css动画

动画的原理：1、大脑的视觉暂留作用。2、画面逐渐变化。

动画的作用：1、让用户产生愉悦感。2、引起用户的注意。3、对用户的操作进行反馈。4、掩饰网页的运算/加载过程。

动画的类型：1、transition补间动画。2、 keyframe关键帧动画。3、逐帧动画。

补间动画

补间动画支撑的操作

位置-平移（left/right/margin/transform)

方位-旋转（transform）

大小-缩放（transform）

透明度（opacity）

其他-线性变换（transform）

Demo

.container{
    width: 10px;
    height: 10px;
    banckground: red;
    transition: width 1s;
    transition: width 1s, background 3s;/*同时设置多个属性*/
	transition: all 1s;/*所有*/
    transition-delay: 1s;/*定义动画/过渡效果何时开始。
*/
    transition-duration: 1s;/*规定完成动画效果需要多少秒或毫秒。
*/
    transition-property: width;/*规定设置动画效果的 CSS 属性的名称。*/
    transition-time-function: ease;/*规定速度效果的速度曲线。
*/
}
.container:hover{
    width: 600px;
    background: green;
}

transitionAPI：transition：delay property duration time-function（timing/easing）；

timing的属性可以在网络上寻找。

逐帧动画

关键帧动画的一种特殊用法

每一帧都是关键帧（keyframe）

适用于无法补间计算的动画

资源较大、

使用steps()

关键帧动画每一帧之间有动画

keyframe语法

1	@keyframes animationname {keyframes-selector {css-styles;}}

animationname：必需。定义动画的名称。

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

合法的值：

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

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

keyframe定义和用法

通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

animation语法

1	animation: name duration timing-function delay iteration-count direction;

animation定义和用法

animation 属性是一个简写属性，用于设置六个动画属性：

animation-name：规定需要绑定到选择器的 keyframe 名称。。
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function：规定动画的速度曲线。
animation-delay：规定在动画开始之前的延迟。
animation-iteration-count：规定动画应该播放的次数。
animation-direction：规定是否应该轮流反向播放动画。
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

demo

.container{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    banckground: url(../demo.png) no-repeat;
    animation: mymove 1s infinite;
    animation-timing-function: steps(1);/*去掉关键帧之间的补间动画*/
}
@keyframes mymove 
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}