728x90
13. 애니메이션
- 요소에 적용되는 CSS 스타일을 다른 스타일로 부드럽게 전환할 수 있다.
- 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키 프레임들로 이루어짐.
■ 속성
- animation-name: 호출할 애니메이션 이름작성
- animation-duration: 애니메이션시간
- animation-delay: 딜레이시간
- animation-direction: 애니메이션 진행방향(alternate, normal)
- animation-iteration-count:반복횟수(숫자 또는 infinite(무한반복))
■ keyframe 사용한 애니메이션 룰 작성법
- keyframe 룰을 이용하여 애니메이션 패턴을 지정하고 요소에서 애니메이션 패턴을 호출
@keyframes 애니메이션 이름{
from{
css속성;
}to{
css속성;
}
}
※ from ==> 애니메이션 시작지점 = 0% 로 대체가능
※ to ==> 애니메이션 종료시점 = 100% 로 대체가능
■ 예시
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>애니메이션</title> <style type="text/css"> *{margin:0; padding:0;} body{padding: 40px;} .spacer{height: 50px;} .aa{width: 50px; height: 50px; background-color: #f00; animation-duration:2s; animation-name:aa_ani;} .bb{width: 50px; height: 50px; background-color: #0f0; animation-duration:2s; animation-iteration-count:3; animation-direction:alternate; animation-name:bb_ani;} /* aa요소 애니메이션 룰 생성*/ @keyframes aa_ani{ from{ margin-left:0; }to{ margin-left:500px; } } /* bb요소 애니메이션 룰 생성*/ @keyframes bb_ani{ 0%{ margin-left:0; }50%{ margin-left: 500px; }100%{ margin-top: 100px; } } </style> </head> <body> <div class="aa"></div> <div class="spacer"></div><!--여백--> <div class="bb"></div> </body> </html> |
■ 실행결과
※ 실행결과, 빨간색 상자는 오른쪽으로 1번 이동하고 초록색 상자는 오른쪽과 아래 방향으로 3번 움직입니다. 부드럽게 잘 작동합니다. 신기하네요^^ (결과물을 보여드리고 싶어서 반디캠으로 한번 찍어봤어요ㅎㅎ)
반응형