通过css3我们可以创建动画，它能取代gif图片、Flash、Js动画等,css3的animation动画是应用在html的DOM元素上的，通过样式来实现的。
@keyframes 规则
实例：
@keyframes myfirst{ /*动画名称：myfirst */
from {background: red;}/*0%*/
to {background: yellow;}/*100*/
}
//或者写成百分百的形式：
@keyframes myfirst{ /*动画名称：myfirst */
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
animation
|
属性
|
描述
|
|---|
|
animation
|
所有动画属性的简写属性，除了 animation-play-state 属性。
|
|
animation-name
|
规定 @keyframes 动画的名称。
|
|
animation-duration
|
规定动画完成一个周期所花费的秒或毫秒。默认是 0。
|
|
animation-timing-function
|
规定动画的速度曲线。默认是 "ease"。
|
|
animation-delay
|
规定动画何时开始。默认是 0。
|
|
animation-iteration-count
|
规定动画被播放的次数。默认是 1。
|
|
animation-direction
|
规定动画是否在下一周期逆向地播放。默认是 "normal"。
|
|
animation-play-state
|
规定动画是否正在运行或暂停。默认是 "running"。
|
|
animation-fill-mode
|
规定对象动画时间之外的状态。
|
实例：
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Opera: */
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}
div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}
服务热线 19970861797
