CSS3 动画包括Transiton 和 aniantion

动画常常和transform属性常用

值得注意的是 transform并不是动画属性，但是动画的实现离不开它

CSS3动画可以做一些功能性的菜单按钮

宣传的轮播图，各种页面的缓冲

页面间的切换过渡，网页小游戏

                                  Swiper

                                       |

Vue-transition    —    CSS动画    —    Animate.css

                                       |

                                     SVG

transition有个特点，文档流有变化的时候，他才会过渡，而且文档流一定要有个初始

时间函数可以实现缓动的效果

display不能和transition一起使用

transition后面尽量不跟all（影响读取速度和页面流畅性）

常见闪动 可以用perspective和backface-visibility（等3D元素）

1、初学CSS3动画

①CSS3动画包括transition和animation

②动画常常和transform属性常用

③注意，transform并不是动画属性，但是它在为我们动画的实现做出了杰出的贡献

2、动画属性

①transition是动画属性，主要负责过渡属性的变化

②animation是动画属性，他可以实现transition做不到的事情，animation可以直接加载动画，transition需要一个触发，需要js协助

③transform不是动画属性，它是一个静态类，经常和动画类属性搭配

3、CSS3动画的发展（效果）兼容性

IE 10 2012-09-04

Chrome 4 2010-1-25 -webkit

FireFox 5 2011-1-25

4、CSS3动画的发展（事件）兼容性

IE 10 2013-10-17

Chrome 4 2010-1-25

FireFox 5 2011-1-25

5、CSS3动画的应用

①CSS3动画做一些功能性的菜单按钮

②宣传用的轮播图，各种页面的效果的缓冲

③页面间的切换过渡，网页小游戏

CSS3动画包括transition和animation

动画常常和rtansform属性常用

rtansform并不是动画属性，但也很优秀

animation基础和写法

①动画名称（name）--@keyframes，与transition不同的是，animation需要自定义一个名称②过渡时间（duration）延迟时间（delay）③时间函数（timing-function）④播放次数（iteration-count）⑤播放方向（direction），即是否轮流播放和反向播放⑥停止播放的状态（fill-mode），⑦是否暂停（play-state）

⑤的属性值：alternate：先正向后反向；reverse：反向播放

⑥的属性值：forwards：以最后的状态结束。（不可和infinite一起用）

⑦的属性值：running：无限播放；paused：停止播放。该属性要跟js结合

animation可以解决transition display：none bug

 1、学习CSS3动画的意义

①开发周期短

②增加浏览页面的趣味性 

③增加用户视觉冲击力

2、什么是动画

①动画片、漫画、视频、flash等等会动的画面都是动画

②颜色高度等属性的变化（过渡）也是动画

③CSS3对于动画的实现有过度和帧动画 

2、动画属性①transition是动画属性，主要负责过渡属性的变化②animation是动画属性，他可以实现transition做不到的事情，animation可以直接加载动画，transition需要一个触发，需要js协助③transform不是动画属性，它是一个静态类，经常和动画类属性搭配

1，第一阶段:熟练的使用transition 和 animation 中的 name during

2，第二阶段：模仿阶段 模拟效果 观察思路方案

3，第三阶段：自己开发复杂的开发和实现

        CSS3动画必备基础

1. Css3新属性和其他Css3静态属性

2. Chrime浏览器调试工具

3. 掌握JS的基本的API，例如属性选择、事件监听

监听事件

animationstart

animationend，transitionend

animationitertion

要先打好基础（CSS3基础）

Transition基础和写法

Transition的四个属性

1.属性名称（property）

2.过度时间（duration）4.延迟时间（delay）

3.时间函数（timing-function）

分了整洁性，按这个顺序写很不错

要善于向别人学习，学习他人的思路

借鉴前，先脑洞一下自己的思路（就像做题，自己先做）

善于总结和对比，补短板

学起来简单，做起来难（所以要努力学）

学习CSS3动画必备基础

CSS3的新属性和其他CSS3的静态属性

谷歌浏览器调试工具，开发者工具（F12 ）

JS基本的API，如属性选择，事件监听

开发周期短

增加浏览的趣味性（和用户交互，让用户有更好的体验）

增加的用户视觉冲击力（更好的视觉效果和视觉体验，人是视觉动物）