CSS 애니메이션 가능
정의 및 사용
일부 CSS 속성은 애니메이션 가능하므로 애니메이션 및 전환에 사용할 수 있습니다.
애니메이션 가능한 속성은 크기, 숫자, 백분율 및 색상과 같이 한 값에서 다른 값으로 점진적으로 변경될 수 있습니다.
브라우저 지원
표의 숫자는 CSS 애니메이션을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
-webkit-, -moz- 또는 -o- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.
43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
예시
빨간색에서 파란색으로 배경색 애니메이션:
@keyframes mymove
{
from {background-color: red;}
to {background-color: blue;}
}
애니메이션 가능한 속성
다음 속성은 CSS에서 애니메이션 가능 합니다.