CSS 动画
一些 css 属性是 可以有动画效果的 ，这意味着它们可以用于动画和过渡
动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色
浏览器支持
下下表中的数字表示支持该方法的第一个浏览器的版本号
紧跟在数字后面的 -webkit-, -moz-, 或 -o- 指定了第一个支持该属性的浏览器版本前缀
| Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|
| 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- |
4.0 -webkit- | 15.0 -webkit- 12.1 12.0 -o- |
范例
背景颜色逐渐地从红色变化到蓝色
@keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}
/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}
动画属性
一、过渡动画 （transition）
过渡动画，就是能让css样式的变化，体现的更明显一点，让用户能更清晰的看见样式的变化。过渡的实现我们一般通过事件来触发（例如鼠标单击、获得焦点、被点击或对元素任何改变中触发）
过渡相关的属性：
1. transition-property：检索或设置对象中的参与过渡的属性/*all为默认*/
2. transition-duration：检索或设置对象过渡的持续时间/*s或ms为单位*/
3. transition-delay：检索或设置对象延迟过渡的时间 /*同上*/
4. transition-timing-function：检索或设置对象中过渡的动画类型 /*控制过渡动画的速度类型 默认为ease-in-out（先加速后减速）;还有几种 linear(匀速) ease（平滑的过渡） ease-in(加速）ease-out（减速） */
大堆是不是很吓人，其实我们可以简写：例：transition:all 1s 3s linear;--->>all表示所有属性都参与过渡，并且持续时间为1s,延迟3s,匀速进行！
过渡属性添加的方式：给要参与过渡的元素添加即可。
这样当我们鼠标滑过div的时候,p标签和h2标签的宽度从100px到600px的变化过程就能看的更清楚了，不过唯一的不同是他们的速度（即动画类型）不是一致的，但它们是同时完成过渡的，因为我们设置了相同的时间。
利用过渡我们常用来实现导航的图标的变化、颜色、或者鼠标滑过其他样式变化从而达到与用户交互的功能。
看过了过渡动画是不是不过瘾，其实我们利用CSS3能够做到更多的动画效果，那就是接下来的关键帧动画。
二、关键帧动画（animation）
不同于过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，或者用关键帧的话来说，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。
除了与过渡都能定义首尾状态以外，他们还有一个更大的相同点就是相关的属性也特别多
1.animation-name
检索或设置对象所应用的动画名称
必须与规则@keyframes配合使用，
eg:@keyframes mymove{} animation-name:mymove;
2.animation-duration
检索或设置对象动画的持续时间
说明：animation-duration:3s; 动画完成使用的时间为3s
3.animation-timing-function
- 检索或设置对象动画的关键帧动画类型
- 属性值
- linear：匀速。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
- ease：平滑。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
- ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
- ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
- ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
- step-start:马上跳到动画每一结束桢的状态 【tips】可用来制作逐帧动画！
5.animation-delay
+ 检索或设置对象动画延迟的时间
+ 说明：animation-delay:0.5s; 动画开始前延迟的时间为0.5s)
6.animation-iteration-count
+ 检索或设置对象动画的循环次数
+ 属性值
+ animation-iteration-count: infinite | number;
+ infinite：无限循环
+ number: 循环的次数
7.animation-direction
+ 检索或设置对象动画在循环中是否反向运动
+ 属性值
+ normal：正常方向
+ reverse：反方向运行
+ alternate：动画先正常运行再反方向运行，并持续交替运行
+ alternate-reverse：动画先反运行再正方向运行，并持续交替运行
8.animation-play-state
+ 检索或设置对象动画的状态
+ 属性值
+ animation-play-state:running | paused;
+ running:运动
+ paused: 暂停
+ animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行