방문해 주셔서 감사합니다.
개인적으로 CSS3의 꽃 중 하나라고 생각하는 애니메이션을 다루네요.
예전이면 자바스크립트나 제이쿼리로 구현했을 기능을 CSS를 사용해서 구현할 수 있어요.
CSS3 만세 !!
자 쉽게 말해 CSS의 애니메이션으로 다음과 같은 기능을 구현할 수 있어요.
animation
그럼 CSS 애니메이션 어떻게 구현하는지 알아볼게요.
선택자{animation:키프레임 이름, 시간, 반복 횟수}
@keyframes 키프레임 이름{
from{시작할 CSS 속성 값)
to{끝날 CSS 속성 값}
}
키프레임이라는 이름을 정해 입력 한 후 해당 애니메이션의 작동 시간은 얼마이고, 이 애니메이션 효과를 몇번 작성할 것인지를 정해주며, 키프레임에서는 어떤 행동을 할 것인지에 대한 CSS 속성을 작성합니다.
다음은 하늘색 박스가 왼쪽에서 오른쪽으로 3초만에 이동하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS 애니메이션 </title>
<link rel="stylesheet" href="./cssReset.css">
<style>
.move{width:100px;height:50px;background:skyblue;position:relative;
animation: move 3s 1}
@keyframes move {
from{
left:0
}
to{
left:1000px
}
}
</style>
</head>
<body>
<p class="move"> hello world </p>
</body>
</html>
결과는 바로 아래에서 확인하겠습니다.
실행 버튼을 눌러 결과를 확인하면 박스가 움직임을 확인할 수 있습니다.
이번에는 from ~ to 단위에 %를 더해 CSS를 적용하는 방법에 대해 알아볼게요.
선택자{animation:키프레임 이름, 시간, 반복 횟수}
@keyframes 키프레임 이름{
from{시작할 CSS 속성 값)
10%{10% 정도의 진행 상황에 적용할 CSS 속성과 값}
20%{10% 정도의 진행 상황에 적용할 CSS 속성과 값}
30%{10% 정도의 진행 상황에 적용할 CSS 속성과 값}
40%{10% 정도의 진행 상황에 적용할 CSS 속성과 값}
50%{10% 정도의 진행 상황에 적용할 CSS 속성과 값}
60%{10% 정도의 진행 상황에 적용할 CSS 속성과 값}
70%{10% 정도의 진행 상황에 적용할 CSS 속성과 값}
80%{10% 정도의 진행 상황에 적용할 CSS 속성과 값}
90%{10% 정도의 진행 상황에 적용할 CSS 속성과 값}
to{끝날 CSS 속성 값}
}
위와 같이 하셔도 좋고, 10% 40% 60% 이런식도 좋습니다.
다음은 %를 활용한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS 애니메이션 </title>
<link rel="stylesheet" href="./cssReset.css">
<style>
.move{width:100px;height:80px;border-radius:20px;background:skyblue;position:relative;
animation: move 3s infinite}
@keyframes move {
from{
left:0
}
10%{width:120px;height:100px;left:300px}
30%{width:150px;height:130px;left:500px}
50%{width:300px;height:260px;left:800px}
70%{width:150px;height:130px;left:500px}
90%{width:120px;height:100px;left:300px}
to{
left:0px
}
}
.move p{float:left;width:100%;text-align:center;margin:30px 0 0 0;font-size:20px;color:#fff;
font-weight:bold}
</style>
</head>
<body>
<div class="move"> <p>hello world </p></div>
</body>
</html>
결과는 바로 아래에서 확인하겠습니다.
봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.
당신의 작은 누름이 저에게는 큰 희망이 됩니다.
컨텐츠의 내용을 더 보려면 바로 아래에서 확인할 수 있습니다.
컨텐츠
더보기
댓글 0개
정렬기준
