动画( animation ) （日志）_综合

动画( animation ) 是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

一、动画的基本使用
制作动画分为两步:
1．先定义动画
2．再使用（调用动画）

1.用keyframes定义动画（类似定义类选择器)
keyframes 动画名称{
        0%{
        width : 100px;
        }
        100%{
        width : 200pX;
        }
}

动画序列
0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词"from"和"to”，等同于0%和100%.

2、动画的使用
div {
width : 200px;height: 200px;
background-color: aqua;

margin: 100px auto;
animation-name:动画名称;
animation-duration:持续时间；

}

  <style>div{width: 300px;height: 300px;border: 1px solid red ;animation-name: logo;animation-duration: 3s;}@keyframes logo{0%{transform: translate(100px);}      100%{transform: translate(1000px);}}</style>
</head>
<body><div></div>
</body>
</html>

动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数

如下案例划分5个部分

  <style>div{width: 80px;height: 80px;border: 1px solid red ;animation-name: logo;animation-duration: 5s;}@keyframes logo{0%{transform: translate(0px,0px);}25%{transform: translate(1000px,0px);}50%{transform:translate(1000px,500px) ;} 75%{transform: translate(0px,500px);} 100%{transform: translate(0px,0px);}}</style>
</head>
<body><div></div>
</body>
</html>

动画常用属性：

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animation-play-state属性
animation-name	规定@keyframes动画的名称
animation-duration	规定动画完成一个周期需要的时间，默然为0s；
animation-timing-function	规定动画的速度曲线
animation-delay	规定动画何时开始
animation-iteration-count	规定动画被播放次数，默然为1，循环是infinite
animation-direction	规定动画是否在下一轮逆向播放,默认normal,逆播放alternate
animation-play-state	规定动画是否正在运行或暂停。默认是running，暂停的paused
anmation-fill-mode	规定动画结束后的状态，保持结束状态forwards,回到起始状态backwards

动画属性简写：

animation :动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;

属性中的默认值可以不写，前两个属性必须保留动画名称持续时间

简写属性里面不包含animation-play-state
暂停动画: animation-play-state: puased;经常和鼠标经过等其他配合使用
想要动画走回来，而不是直接跳回来:animation-direction : alternate
盒子动画结束后，停在结束位置: animation-fill-mode : forwards