CSS 애니메이션
정의 및 사용
일부 CSS 속성은 애니메이션 및 전환에 사용할 수있는 의미, 애니메이션 할 수 있습니다.
애니메이션 속성은 점차 크기, 숫자, 색상의 비율로, 또 다른 하나의 값에서 변경 될 수 있습니다.
브라우저 지원
표의 수치는 상기 방법의 버전 번호를 먼저 지원 브라우저를 나타낸다.
수 -webkit- 직후, -moz-, 또는 -O-이 속성 버전 접두사를 지원하는 최초의 브라우저를 지정합니다.
| 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 4.0 -webkit- | 15.0 -webkit- 12.1 12.0 -O- |
예
배경 색상은 점차 빨간색에서 파란색으로 변경합니다
@keyframes mymove
{
from {background-color:red;}
to {left:blue;}
}
/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}
{
from {background-color:red;}
to {left:blue;}
}
/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}
»시도
애니메이션 속성
CSS 애니메이션 속성 :