从零开始学习前端开发 — 15、CSS3过渡、动画
一、css3过渡
语法： transition: 过渡属性 过渡时间 延迟时间 过渡方式;
1.过渡属性(transition-property)
取值：all 所有发生变化的css属性都添加过渡
eg: transition: all 1s;
ident 指定要过渡的css属性列表
eg: transition:border-radius 1s,background 2s;
none 没有属性发生过渡
注：我们可以省略滑过状态或其他状态的过渡属性，但是不能省略初始状态的transition属性
2.过渡时间(transition-duration)
取值：0 不过渡
time 设置一个正数，单位为s
eg: transition: all 1s;
3.延迟时间(transition-delay)
取值：
0 不延迟，过渡动画正常执行
正数 按照设置的时间延迟执行过渡动画
负数 设置时间前的动画将会被截断
4.过渡方式(transition-function)
取值：
ease 缓解效果，默认值
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 慢-快-慢
二、css3动画
语法： animation:动画名称 动画执行时间 动画延迟执行时间 动画播放次数 动画播放后的状态;
动画是由一帧一帧的关键帧组成的，在设置animation之前要先定义动画关键帧：
语法：
@keyframes 动画名称{
0%{
属性:属性值;
}
50%{
属性:属性值;
}
...
100%{
属性:属性值;
}
}
@keyframes 动画名称{
from{
属性:属性值;
}
...
to{
属性:属性值;
}
}
1.动画名称(animation-name)
eg: animation:ball 1s;
注：动画名称要与@keyframes中的动画名称一致
2.动画执行一次所需的时间(animation-duration)
取值：
time: 正数，单位为秒(s)或者毫秒(ms)，默认为0，不执行动画
3.动画延迟执行的时间(animation-delay)
取值：
0: 默认值，不延迟
正数： 按照设置的时间延迟执行动画
负数： 设置时间前的动画将会被截断
4.设置动画的播放次数(animation-iteration-count)
取值：
number 可以设置为正整数
infinite 无限循环播放
5.设置对象动画的状态(animation-play-state)
取值：
running 默认值，运动
paused 动画暂停
6.设置动画的播放方式(animation-timing-function)
取值：
ease
linear 匀速运动
ease-in
ease-out
ease-in-out
step-start 马上转跳到动画的结束状态或马上转跳到下一帧，中间没有过渡
step-end 保持动画开始时的状态，直到动画执行结束，转跳到动画结束状态
steps(n,start|end)
n代表动画分几步完成
7.设置对象动画的运动方向(animation-direction)
取值：
normal 默认值，正常方向运动
reverse 与normal方向相反运动
alternate 奇数次正方向，偶数次反方向
alternate-reverse 奇数次反方向，偶数次正方向
8.设置对象动画时间之外的状态(animation-fill-mode)
取值：
none 默认值，不设置对象动画之外的状态
forwards 保持动画结束时的状态
backwards 保持动画开始时的状态
both 遵循forwards和backwards两个规则
三、CSS3 transition和animation的区别
1.transition动画执行需要出发条件，animation动画出发在页面加载完成后可以自动执行
2.transition触发一次执行一次，多次执行需要执行多次触发条件，animation可以无限循环播放，也可限制次数
3.transition只能设置开始和结束状态 不能设置中间的动态
扩展：隐藏变形元素的背面 backface-visibility:hidden;
