CSS로 애니메이션 효과를?
CSS 애니메이션
예시
Hello World!
위와 같이 색깔이 바뀌거나, 위치를 이동시키기가 가능하다.
CSS 애니메이션 적용
먼저 적용시킬 html 파일에 클래스를 지정해 글을 작성한다.
|
1 |
<div class="test1">TEST1</div> |
이번에는 CSS로, 애니메이션 속성값을 입력한다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style media="screen"> @keyframes animation1 { from {background-color: red;} to {background-color: yellow;} } .test1 { width: fit-content; height: fit-content; background-color: red; animation-name: animation1; /* 위에서 정의한 애니메이션 */ animation-duration: 3s; /* 지속 시간 */ animation-iteration-count: 100; /* 반복 횟수 */ } </style> |
위처럼 from 과 to 로 지정하거나
진행 % 별로 설정 가능
|
1 2 3 4 5 6 7 8 9 |
<style> @keyframes animation2 { 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:200px; top:0px;} 50% {background-color:blue; left:0px; top:100px;} 75% {background-color:green; left:200px; top:100px;} 100% {background-color:red; left:0px; top:0px;} } </style> |