css动画

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

现在，我很少写介绍CSS的文章，因为感觉网站开发的关键还是在服务器端。但是，CSS动画除外，它实在太有用了。-- （阮一峰 CSS动画）

在CSS 3引入Transition（过渡）这个概念之前，CSS是没有时间轴的。也就是说，所有的状态变化，都是即时完成。

1、transition的完整写法如下。

transition:property duration timing-function delay;
            生效样式    周期       时间函数    何时开始
如：
img{
    transition: height 1s ease 1s;
}

transition属性是一个简写形式，可以单独定义成四个动画属性。

img{
    transition-duration: 1s; 
    transition-delay: 1s;
    transition-property: height; 
    transition-timing-function: ease;
}

使用注意：transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。

transition的优点在于简单易用，但是它有几个很大的局限。
（1）transition需要事件触发，所以没法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

CSS Animation就是为了解决这些问题而提出的。区别在于，transition是为变化的过程添加动画，所以必须要有一个事件去触发元素某个样式的值的变化。animation的强大之处，就是可以定义任何时刻任何阶段的动画。

2、animation（升级版的transition）的完整写法如下。

animation:name duration function delay count direction;
       关键帧名称  周期   时间函数  何时开始 播放次数 播放方向
如：
animation: myfirst 5s linear 2s infinite alternate;

animation属性是一个简写形式，可以单独定义成六个动画属性：

*   animation-name
*   animation-duration
*   animation-timing-function
*   animation-delay
*   animation-iteration-count
*   animation-direction 规定是否应该轮流反向播放动画，默认回到起始状态
此外还有两个属性:
*   animation-play-state 规定动画终止或运行，默认运行
*   animation-fill-mode 规定动画结束后的状态，默认回到起始状态

各属性可选值:
function: linear|ease(慢入慢出)|...|cubic-bezier
direction: normal|alternate(轮流反向播放)|reverse..
play-state: running|paused
fill-mode: none|forwards(保持终态)|backwards|both

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。--（W3C CSS动画）

@keyframes myfirst
{
0%   {background: red;}  等同于 from
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;} 等同于to
}

时间函数：管理着动画在单位帧内播放的速度曲线，使用三次贝尔函数的数学函数，预设值（linear ease ease-in...)，决定着动画的展示效果。
时间函数--非线性：能够实现动画的阶跃式变化，不是线性的过渡。

3、CSS中的transform、transition、animation
从各自的名字我们就可以大概了解到它们的用途。
transform 用来平移，旋转，缩放，倾斜元素。
transition 为元素样式的(数字)值变化提供过渡动画。
animation 为增强过渡动画能力，可用来取代许多网页动画图像，Flash动画，和javascript。

使用transform实现几何变换，可配合动画实现炫酷效果：
transform 2D转换：平面二维空间内几何变换

                  转换效果         单位
translate(x,y)  水平垂直平移       像素px
rotate(deg)     顺时针旋转         度数deg
scale(x,y)      水平垂直缩放       比例数值
skew(x,y)       倾斜              度数deg

transform 3D转换：立体三维空间内几何变换

               转换效果       简写
translateX/Y/Z  同上         translate3d(x,y,z)
rotateX/Y/Z     绕轴立体旋转   rotate3d(x,y,z,angle)
scaleX/Y/Z      同上         scale3d(x,y,z)
perspective(n)  透视效果      无    

实战动画案例一：实现图片左右轮流平移移动和绕Z轴翻转360度

<div>
  <img src="gxt.png" style="width:100px;height: 100px;">
</div>
  
div {
  width: 100%;
  height: 100px;
  background-color: red;
}
img {
  animation: myfirst 2s ease infinite alternate;
}

@keyframes myfirst {
  to {
    margin-left: calc(100% - 100px); // - 号左右空格不能少
    -webkit-transform: rotateZ(360deg);
  }
}

说明：
calc() 函数用于动态计算长度值，100%指的是视窗宽度。
vh单位是相对于视口的高度。视口被均分为100单位的vh。