CSS3动画@keyframes

animation 简写属性CSS3

animation-name 规定@keyframes动画名称

animation-duration 动画花费时间默认0

animation-delay 动画何时开始/秒（多少秒开始）

animation-timing-function 动画速度曲线

linear 匀速从头到尾一样

ease 默认，低速开始，加快，结束前变慢

ease-in 从低速开始

ease-out 以低速结束

animation-iteration-count 播放次数 infinite无限

（动画-反复-计算：播放次数）

用在：hover后面

animation-play-state 是否暂停

paused 暂停

running 正常播放

animation-direction （播放）之后逆向播放

轮流反方向 alternate

默认播放正常单方向

animation-fill-mode 保持最后一个属性值

none 不改变(默认值)

forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）

backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）

both 向前和向后填充模式都被应用

综合所有

animation：name（名字） duration（花费时间） timing-function（速度曲线） delay（何时开始） iteration-count（次数） directing（逆向）

动画启动

@keyframes name{

from{left：0；} 开始属性值

To {left：-400px；}结束属性值

}

@keyframes name {keyframes-selector {css-styles;}}

animationname 定义动画的名称。

keyframes-selector 动画时长的百分比。

0-100%

from（与 0% 相同） to（与 100% 相同）

可以只有to

css-styles 一个或多个合法的 CSS 样式属性。

动画事件：

动画开始：

obj.addEventListener("webkitAnimationStart", fn);

obj.addEventListener("animationstart", fn);

动画执行过程中触发：

obj.addEventListener("webkitAnimationIteration", fn);

obj.addEventListener("animationiteration", fn);

动画结束是触发：

obj.addEventListener('webkitAnimationEnd',fn);

obj.addEventListener('animationend',fn);

rotateY(-.5turn)

来段代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
*{
padding: 0;
margin: 0;
list-style: none;}
#box{
width: 440px;
height: 110px;
border: 1px solid red;
margin: auto;
position: relative;
overflow: hidden;
}
#pic{
width: 880px;
position: absolute;
/*
            animation-name: onr;                名字
            animation-duration: 5s;             花费时间速度
            animation-timing-function:linear;   运动速度曲线
            animation-delay: 1s;                何时开始
            animation-iteration-count:infinite; 播放次数
            animation-direction:alternate;       一次后逆向播放
            */
animation: onr 5s linear infinite;


}
#pic:hover{animation-play-state:paused;}
#pic li{
width: 100px;
height: 100px;
margin: 5px;
float: left;
}
@keyframes onr {
from{ left: 0;}
to{left: -440px}

        }
</style>
</head>
<body>
<div id="box">
    <ul id="pic">
        <li style="background: blue"></li>
        <li style="background: yellowgreen"></li>
        <li style="background: yellow"></li>
        <li style="background: darkorange"></li>
        <li style="background: blue"></li>
        <li style="background: yellowgreen"></li>
        <li style="background: yellow"></li>
        <li style="background: darkorange"></li>
    </ul>
</div>

</body>
</html>