css(过渡&动画1.4)

1）概念
使css属性的值在一定时间内平滑的变化，比如鼠标悬停背景色发生改变
2）使用过渡的四要素
-指定过渡属性(哪个属性需要变化)，比如background-color
-指定过渡时间，可以是秒(s)、毫秒(ms)
-指定过渡延迟时间，表示什么时候开始执行过渡
-触发过渡，通过用户的行为触发过渡效果，比如悬停、点击
2）过渡属性
transition属性用于设置过渡
transition-property:指定过渡的css属性名;当设置多个属性过渡时，属性之间用逗号隔开
transition-duration：过渡时间；规定了完成过渡需要花费的时间，可以为s或ms
transition-timing-function：规定属性过渡效果的速度曲线，取值可以为ease(默认值，慢速开始，快速变化，慢速结束)/linear(始终保持相同的速度)/ease-in(慢速开始，加速效果)/ease-out(有减速的效果)/ease-in-out(慢速开始和结束，先加速再减速)
transition-delay：过渡延迟，即多长时间以后再执行过渡效果，取值为秒或毫秒

注意不是所有的属性都可以设置过渡，可以设置的属性有：颜色属性、取值为数值的属性、转换属性、渐变属性、visibility、阴影属性
3）简写方式
transition:属性 过渡时间 过渡样式 延迟时间;
简写的多个属性过渡效果
transition:属性 时间 函数 延迟,属性2 时间 函数 延迟;

1、动画
1）概述
动画可以制作类似flash的效果，通过关键帧控制动画的每一步，使元素从一种样式逐渐变化为另一种样式，可以实现复杂的效果
2）动画的组成
-动画声明，通过@keyframe来声明动画的关键帧
-调用动画，通过animation来调用已有的动画，可以设置动画时间，播放次数等
3）关键帧
帧是动画中最小单位的单幅影像画面，关键帧就相当于二维动画中的原话，用来定义动画的变化，改变状态的帧
css通过@keyframes用于声明动画，指定关键帧
语法
@keyframes 动画名称
{
from/0%{
css样式
}
百分比{
css样式
}
…
to/100%{
css动画
}
}
4）动画属性
animation-name:要调用的动画名称
animation-duration:动画完成一个周期所需要的时间，取值为秒或毫秒
animation-timing-function：动画的速度曲线，取值为预定义函数，参考过渡
animation-delay:延迟时间
animation-iteration-count：动画的播放次数，取值为数值或infinite，表示无线循环
animation-direction：动画播放方向，取值为normal或alternate（轮流播放，在奇数次正常播放，偶数次反向播放）
5）简写属性
animation:名字 时间 函数 延迟 播放次数 方向;
6）动画在播放前后动画效果是否可见
通过animation-fill-mode属性，可以规定动画在播放前或后，其动画效果是否可见，可取值为none(不改变默认行为)/forwards(在动画完成后保持最后一帧的属性值)/backwards(动画开始之间应用第一帧的属性)
注意动画属性及关键帧的兼容性
关键帧兼容
@-webkit-keyframes name
@-moz-keyframes name