一.CSS3触发式动画
常用触发动作：
1.鼠标悬浮：hover2.选项选中：checked3.输入框点击：active4.聚焦后:focus过渡动画（transition）：
通过过渡可以指定一个属性发生变化的切换方式通过过渡可以提升用户体验过渡所需要的条件
开始状态 结束状态 过程所消耗的时间过渡时间(transition-duration) 时间单位 默认是0s 单位s(秒) ms(毫秒) 1s = 1000mstransition-delay 过渡的延时 表示变化延后多少秒过渡 默认是0s 可以为正数也可以为负数 负数代表提前多少秒动 整体过渡运动时间 = duration + delayransition-property 过渡的属性 规定过渡属性作用于元素哪条样式上面 可选值 1.all 所有样式都生效 默认 2.none 没有过渡属性 3.多个样式名 逗号分割 指定样式过渡transition-timing-function 过渡速率 描述什么时候变化快什么变化慢 可选值: ease 默认值 慢速开始 先加速 再减速 linear 匀速运动 ease-in 开始慢 后面快 ease-out 开始快 后面慢 ease-in-out 两头慢 中间快 贝塞尔曲线 越陡速度越快 水平运动时间 竖直是随着时间推移运动的距离 cubic-bezier(.3,-0.97,1,.21); x1 y1 x2 y2 x1和x2取值是0-1 y1和y2取值任意复合样式写法： transition: transition-property transition-duration transition-delay transition-timing-function 例子： transition:width 1s 2s linear;过渡时间不可以省略,其他都可以省略顺序随意 写两个时间 第一个持续时间第二个延迟过渡时间写在不同的位置,效果不一样 1.开始没有 结束也没有 什么都不写 2.开始有 结束也有 写在原始元素身上 3.开始没有 结束有 原始元素写过渡时间 hover伪类里面0s 4.开始有 结束没有 写在hover伪类里面大部分属性都支持过渡效果,注意过渡是一个有效数值过渡到另一个数值写过渡效果必须明确变化开始,结束,时间.二.CSS3主动式动画（animation）
什么是动画
一张张画面拼接而成的效果 一张张画面又叫做关键帧 利用的原理 视觉暂留动画的表示
1.动画名称 时间2.动画过程中描述 可以使用百分比区域描述动画的进程N个关键帧有N-1个动画
动画和过渡的区别
过渡:的变描述样式开始和结束状态化过程 需要手动触发动画:不需要触发条件 自己动 动画可以有多个状态可以无限循环动画的属性
1.animation-name动画名称2.animation-duration 动画持续时间3.animation-delay 动画的延迟4.animation-timing-function 动画速率 steps（运动步长）5.animation-iteration-count动画运动次数 默认运动一次 可以写数值表示运动几次 运动完回到初始位置 无限次运动 infinite6.animation-fill-mode 动画结束时候的状态 backwards 默认为回到初始位置 forwards 执行动画保留最后状态7.aniamtion-direction 动画的方向 防止元素出现不连贯的情况 可选值 normal （0- 100） reverse (100-0) alternate(0 - 100 - 0) 运动次数大于等于2才能看到效果 alternate-reverse(100 - 0 - 100) 运动次数大于等于2才能看到效果动画的复合写法：
animation: name(名称) duration(时间) timing-function(速率) delay(延迟) iteration-count(次数) direction(执行方向) fill-mode paly-state动画的暂停语法：
.wrap{ width: 127.5px; height: 240px; background: url(./images/1.jpg); animation: move 1s steps(4) infinite; } @keyframes move { 0%{ background-position: 0 0; } 100%{ background-position: -510px 0; } }