6.1 css3 Animation

1. animation简介
   ▪ animation无疑是CSS3里最牛的功能。可以采用较少的代码制作超炫的动画。
   ▪ animation制作动画的原理类似与flash，采用关键帧的概念。
   ▪ animation可以说是transition的功能加强版，可以控制的更细腻。

2. transition
   ▪ Transition是实现过渡效果的CSS3属性，从视觉效果上观察Transition可让HTML元素实现动态效果形成一个简单的动画。
   ▪ Transition属性中也有很多和animation相似的地方。

3. Transition复习
   ▪ transition-property(规定设置过渡效果的 CSS 属性的名称。)
   ▪ transition-duration(规定完成过渡效果需要多少秒或毫秒。)
   ▪ transition-timing-function(规定速度效果的速度曲线。)
   ▪ transition-delay(规定过度效果的延迟。)

4. Animation中的属性
   ▪ animation-name(动画命名)
   ▪ animation-duration(动画持续时间)
   ▪ animation-timing-function(动画速度曲线)
   ▪ animation-iteration-count(动画播放次数)
   ▪ animation-direction(完成一次动画后的运行方式)
   ▪ animation-play-state(控制动画的播放状态)
   ▪ animation-fill-mode(规定动画在播放之前或之后，其动画效果是否可见)

5. Transition与Animation的区别
   ▪ transition是过渡效果，animation是动画。
   ▪ transition只能指定起始状态和结束状态的动画效果, animation可以有多个关键帧设置实现更加丰富的动画效果。
   ▪ transition需要有动作(hover等)来触发才能执行，animation可以自己执行。
   ▪ 两者支持的属性不同，animation多出iteration-count, direction,play-state等属性，增加可控性。

6. animation-name
   ▪ animation-name: keyframename|none;
   ▪ 为 @keyframes 动画规定一个名称。
   ▪ none为默认值，既没有动画效果。

7. animation-duration
   ▪ animation-duration: time;
   ▪ 定义动画完成一个周期所需要的时间，以秒或毫秒计。

8. animation-timing-function
   ▪ animation-timing-function: value;
   ▪ 规定动画的速度曲线。
   ▪ linear：动画从头到尾的速度是相同的。
   ▪ ease：默认。动画以低速开始，然后加快，在结束前变慢。
   ▪ ease-in：动画以低速开始。
   ▪ ease-out：动画以低速结束。
   ▪ ease-in-out：动画以低速开始和结束。

9. animation-delay
   ▪ animation-delay: time;
   ▪ 定义动画的开始时间（延迟时间）。
   ▪ time取值为秒或毫秒计，默认值是 0。

10. animation-iteration-count
    ▪ animation-iteration-count: n|infinite;
    ▪ 指定元素播放动画的循环次数。
    ▪ n:定义动画播放次数的数值。
    ▪ infinite:规定动画应该无限次播放。

11. animation-direction
    ▪ animation-direction: normal|alternate;
    ▪ 定义是否应该轮流反向播放动画。
    ▪ normal：默认值。动画应该正常播放。
    ▪ alternate：动画轮流反向播放。

12. animation-play-state
    ▪ animation-play-state: paused|running;
    ▪ 属性规定动画正在运行还是暂停。
    ▪ paused可以让动画暂定播放，running可以让动画继续播放。

13. animation-fill-mode
    ▪ animation-fill-mode:none|forwards|backwards|both;
    ▪ 规定动画在播放之前或之后，其动画效果是否可见。
    ▪ none :在应用动画时,在经过延时时间后执行动画之前及动画结束后，使元素呈现默认状态。
    ▪ forwards:表示动画结束后,元素就是当前动画结束时候的状态。
    ▪ backwards:表示动画开始之前,元素处于keyframe是"from"或"0%"关键帧的状态。
    ▪ both:forwards + backwards

14. Keyframes
    ▪ 关键帧由”@keyframes”开头，后面紧跟”动画名称”和{}。花括号中就是一些不同时间段的样式规则。
    ▪ “@keyframes”中的样式由多个百分比构成，在“0%” 到“100%”中间，可以创建多个百分比。这个百分比即在动画过程中的关键帧位置。
    ▪ 每一个百分比中都要给动画效果元素加上不同的属性，从而让元素在一种不断变化的状态。
    ▪ 我们可以使用”from””to”来代表一个动画的开始和结束帧位置。
    ▪ 当使用百分比表示起始帧时，使用“0%”，不能去掉百分号。keyframes只接受百分比数值。

15. @keyframes写法
    ▪ @keyframes Name {
    from { Properties:Properties value; }
    Percentage { Properties:Properties value; }
    to { Properties:Properties value; }
    }

16. @keyframes写法
    ▪ @-webkit-keyframes Name {
    0% { Properties:Properties value; }
    Percentage { Properties:Properties value; }
    100% { Properties:Properties value; }
    }

17. Animation实例
    ▪ @-webkit-keyframes box1 {
    0% { margin-left: 100px; background: green; }
    40% { margin-left: 150px; background: orange; }
    60% { margin-left: 75px; background: blue; }
    100% { margin-left: 100px; background: red; }
    }

18. 调用animation的方法
    ▪ .box1 { width: 50px; height: 50px; margin-left: 100px; background: blue;
    -webkit-animation-name:'box1';/动画属性名/
    -webkit-animation-duration: 5s;/动画持续时间/
    -webkit-animation-timing-function: ease-in-out; /动画频率/

19 .调用animation的方法
-webkit-animation-delay: 2s;/动画延迟时间/
-webkit-animation-iteration-count: 10;/定义循环资料，infinite为无限次/
-webkit-animation-direction: alternate;/定义动画循环方式/
}

3D动画

动画的基本编写方式已经介绍完了，相信一些简单的2d动画已经难不倒大家了接下来咱们看看更加酷炫的3d动画是如何编写的呢？

CSS3transform改变，使…变形

20. transform
    ▪ transform的含义是：改变，使…变形；转换。
    ▪ transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotateX() 和 rotateY() ，以此类推。

21. rotate
    ▪ 含义：旋转；
    ▪ 如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。其中“deg”是“度”的意思，如“10deg”表示“10度”。
    ▪ 例: transform:rotate(30deg)

22. transform-origin
    ▪ 含义：旋转的基点。
    ▪ 该属性提供2个参数值，第一个用于横坐标，第二个用于纵坐标；如果只提供一个，该值将用于横坐标，纵坐标将默认为50%。
    ▪ percentage：用百分比指定坐标值。可以为负值。
    ▪ length：用长度值指定坐标值。可以为负值。
    ▪ left center right是水平方向取值，而top center bottom是垂直方向的取值。

23. translate
    ▪ 含义：变动，位移；
    ▪ 二维坐标系中translate我们分为三种情况：
    ▪ translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；
    ▪ translateX(x)仅水平方向移动（X轴移动）；
    ▪ translateY(Y)仅垂直方向移动（Y轴移动）；
    ▪ 三维坐标系同理。
    ▪ 例： transform:translate(100px,20px)

24. scale
    ▪ 含义：缩放。
    ▪ 同样以二维坐标系为例scale分为3种情况：
    ▪ scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）；
    ▪ scaleX(x)元素仅水平方向缩放（X轴缩放）；
    ▪ scaleY(y)元素仅垂直方向缩放（Y轴缩放）；
    ▪ 缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。
    ▪ 三维坐标系同理。
    ▪ 例： transform:scale(2,1.5)

25. skew
    ▪ 含义：扭曲，倾斜；
    ▪ 还是以二维坐标系为例scale分为3种情况：
    ▪ skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；
    ▪ skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；
    ▪ skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）；
    ▪ 三维坐标系同理。
    ▪ 例： transform:skew(30deg,10deg)

注意

在编写3d动画时要为元素添加transform-style: preserve-3d；属性。

为了让动画效果兼容各大浏览器我们要在属性前面添加相应的内核前缀。各个浏览器内核前缀总结

3D动画讲到这里也要接近尾声了。

说了这么多不知道大家记住了多少。咱们再做个小练习巩固一下吧~

作业：利用animation动画制作一个有个性的3d立方体。