CSS动画属性笔录
【简介】
动画是使元素从一种样式逐渐变化为另一种样式的效果，并且可以改变任意多的样式任意多的次数
一般使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器
【兼容】
IE10、Firefox 以及 Opera 均支持动画属性，而Chrome 和 Safari 需要前缀 -webkit-
优点：关于动画是CSS3引入的，可以在许多网页中取代动画图片、Flash 动画以及 JavaScript
【主要内容】
1. CSS3的@keyframes 规则；
2. animation 属性及它所配置的6个动画属性
①animation-name动画名；②animation-duration动画持续时间；③animation-timing-function定时功能；
④animation-delay动画延迟；⑤animation-iteration-count动画迭代计数；⑥animation-direction动画方向
【详解】
一 . CSS3的@keyframes 规则
如需在 CSS3 中创建动画，需用到@keyframes 规则。@keyframes 规则用于创建动画，在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果
兼容：
目前浏览器都不支持 @keyframes 规则
Firefox 支持替代的 @-moz-keyframes 规则；Opera 支持替代的 @-o-keyframes 规则；Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则
动画绑定选择器：
当在 @keyframes 中创建动画时，需要把它捆绑到某个选择器，否则不会产生动画效果
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
①规定动画的名称；②规定动画的时长
注意：必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0
语法：
@keyframes animationname动画名称 {keyframes-selector时长 {css-styles;样式}}二 . animation 属性
它所有动画属性的简写属性，除了 animation-play-state 属性
作用：将动画与文档元素（div等dom）绑定
animation 属性是一个简写属性，用于设置六个动画属性：
①animation-name动画名；②animation-duration动画持续时间；③animation-timing-function定时功能；
④animation-delay动画延迟；⑤animation-iteration-count动画迭代计数；⑥animation-direction动画方向
【兼容】IE10、Firefox 以及 Opera 支持6个动画属性，Safari 和 Chrome 支持替代的 -webkit+...属性
下面依次介绍6个动画属性：
①animation-name动画名-----规定需要绑定到选择器的 keyframe 名称；
②animation-duration动画持续时间------规定完成动画所花费的时间，以秒或毫秒计（默认值是 0，意味着没有动画效果）；
③animation-timing-function动画定时功能------规定动画的速度曲线，速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。
animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。能够在该函数中使用自己的值，也可以预定义的值：
| linear | 动画从头到尾的速度是相同的。 | 测试 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 | 测试 |
| ease-in | 动画以低速开始。 | 测试 |
| ease-out | 动画以低速结束。 | 测试 |
| ease-in-out | 动画以低速开始和结束。 | 测试 |
④animation-delay动画延迟------ 定义动画何时开始，属性值以秒或毫秒计
提示：允许负值，例-2s 使动画马上开始，但会从开始跳过 2 秒直接进入动画周期。默认值是 0
⑤animation-iteration-count动画迭代计数------规定动画应该播放的次数
属性值：n------定义动画播放次数的数值；infinite------规定动画应该无限次播放
⑥animation-direction动画方向------规定是否应该轮流反向播放动画
属性值：normal------默认值，动画正常播放；alternate------动画轮流反向播放（在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放），例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画布</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s infinite;
animation-direction:alternate;
/* Safari and Chrome */
-webkit-animation:myfirst 5s infinite;
-webkit-animation-direction:alternate;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持
animation-direction 属性。</p>
<div></div>
</body>
</html>三 . 其他动画属性
①animation-play-state动画播放状态------规定动画是否正在运行或暂停，默认是 "running"
属性值：paused------规定动画已暂停；running------规定动画正在播放
②animation-fill-mode动画填充模式------规定对象动画时间之外的状态，指的是动画在播放之前或之后，其动画效果是否可见
通俗的讲就是动画结束之后保持什么状态
（1）none 表示不设置结束之后的状态，默认情况下回到跟初始状态一样；
（2）forwards 表示将动画元素设置为整个动画结束时的状态。；
（3）backwards 明确设置动画结束之后回到初始状态；
（4）both 表示设置为结束或者开始时候的状态。一般都是回到默认状态