html5 动画运动 属性

属性    描述    CSS
@keyframes    规定动画。    3
animation    所有动画属性的简写属性，除了 animation-play-state 属性。    3
animation-name    规定 @keyframes 动画的名称。    3
animation-duration    规定动画完成一个周期所花费的秒或毫秒。默认是 0。    3
animation-timing-function    规定动画的速度曲线。默认是 "ease"。    3
animation-delay    规定动画何时开始。默认是 0。    3
animation-iteration-count    规定动画被播放的次数。默认是 1。    3
animation-direction    规定动画是否在下一周期逆向地播放。默认是 "normal"。    3
animation-play-state    规定动画是否正在运行或暂停。默认是 "running"。    3
animation-fill-mode    规定对象动画时间之外的状态。    3
下面的两个例子设置了所有动画属性：

animation:myfirst 5s linear 2s infinite alternate;
1.animation-name   动画的名称 、

2.animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。

3.animation-timing-function    规定动画的速度曲线。默认是 "ease"。

4.animation-delay    规定动画何时开始。默认是 0。

5.animation-direction    规定动画是否在下一周期逆向地播放。默认是 "normal"。

复杂的写法：
div
{
width:100px;
height:100px;
background:red;
position:relative;
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 and 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;
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
简写：

div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinite alternate;

1.animation-name   动画的名称 、
2.animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。

3.animation-timing-function    规定动画的速度曲线。默认是 "ease"。

4.animation-delay    规定动画何时开始。默认是 0。
5.animation-direction    规定动画是否在下一周期逆向地播放。默认是 "normal"。

/* Firefox: */ -moz-animation:myfirst 5s linear 2s infinite alternate;
 /* Safari and Chrome: */ -webkit-animation:myfirst 5s linear 2s infinite alternate; 
/* Opera: */ -o-animation:myfirst 5s linear 2s infinite alternate; }


@keyframes myfirst {
 0% {background:red; left:0px; top:0px;} 
 25% {background:yellow; left:200px; top:0px;} 
 50% {background:blue; left:200px; top:200px;} 
 75% {background:green; left:0px; top:200px;} 
 100% {background:red; left:0px; top:0px;} 
}

 

转载于:https://www.cnblogs.com/benpaodegegen/p/7278540.html