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

demo

1. transition 
   

•     property
  

•     duration

•     过渡效果

2. display不能和transition一起使用

①掌握transition和 animation 

② 模仿

③独自开发

css

•     帧动画
  

•     过度动画

动画属性

    transition

    animation

什么是动画

学习CSS3意义

动画监听事件：

时间函数记录

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

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

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

        CSS3动画必备基础

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

2. Chrime浏览器调试工具

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

CSS3 动画包括Transiton 和 aniantion

动画常常和transform属性常用

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

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

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

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

                                  Swiper

                                       |

Vue-transition    —    CSS动画    —    Animate.css

                                       |

                                     SVG

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

css3 动画 transition animation

动画常常和transform属性常用

过度和动画在js中监听

1. 监听的事件：animationstart animationend transitioned animationiteration 

2. 在360 safari和部分chrome下需要WebkitAnimationEnd,IE和firefox已经做了兼容直接写就可以

animation

1. 动画名称（name）@keyframes

2. 过渡时间(duration)

3. 延迟时间(delay)

4. 时间函数(timing-function)

位移尽量使用：transform:translateX(200px)x轴水平位移

animation和transition的区别：

1. animation可以定义播放次数（iteration-count）

2. 播放方向(direction)即是否轮流播放和反向播放

3. 停止播放的状态(fill-mode) 是否暂停

infinite：无限播放   可以直接写数字表示播放次数

播放方向:alternate:先正后反 

              reverse:反向 从结束位置往开始位置播放

停止播放的状态：forwards 停在最后一帧的位置

animation适用场景：跑马灯 loading动画 帧动画

animation解决了transition display:none bug

Transition:过渡动画 类似的一个：transform

四大属性：

1. 属性名称：property 1代码顺序

2. 过渡时间:duration 2

3. 延迟时间：delay 4

4. 时间函数：timing-function 3

scss:&:hover{} 伪类选择器：鼠标滑过时的样式 相当于.demo-1:hover{}

.demo-1{

&:hover{

}

transition:width 2s linear (ease) 2s;

}

特性：当文档流的属性有变化的时候才会实现过度，而且文档流开始有一个 初始化

时间函数：实现一个缓动的效果

注意点：display不能和transition一起使用

transition需要元素在文档中有一个初始的属性，浏览器读不到display的任何属性值

transition后边尽量不要跟all 造成浏览器大量计算资源

常见闪动：perspective和backface-visibility

111111

Transition 开启!

1.属性名称(property)

2.过渡时间(duration) 4.延迟时间(delay)

3.时间函数(timing-function)

需要csc

英语学习：

.box

width(宽度):100px;

height(高度):100px;

background:#000;   000是黑色

·熟练使用name during

Chrome 浏览器调试工具

API?