css3动画笔记

------------------------------------------------------------------------------------
@keyframes
animation                    所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name              规定 @keyframes 动画的名称。   
animation-duration            规定动画完成一个周期所花费的秒或毫秒。默认是 0。   
animation-timing-function    规定动画的速度曲线。默认是 "ease"。   
animation-delay                规定动画何时开始。默认是 0。   
animation-iteration-count    规定动画被播放的次数。默认是 1。   
animation-direction         规定动画是否在下一周期逆向地播放。默认是 "normal"。   
animation-play-state        规定动画是否正在运行或暂停。默认是 "running"。   
animation-fill-mode         规定对象动画时间之外的状态。*/

关键字:
Keyframes: 关键帧
animation：动画
duration: 持续时间
timing-function：定时活动/速度曲线
iteration-count 重复计数/重复播放
direction  反向播放
play-state 播放状态
fill-mode  填充模式/结束后动画是否可见
------------------------------------------------------------------------------------
@keyframes//
语法：@keyframes animationname {keyframes-selector {css-styles;}}
animationname    必需。定义动画的名称。
keyframes-selector    必需。动画时长的百分比。
合法的值：
0-100%
from（与 0% 相同）
to（与 100% 相同）
css-styles    必需。一个或多个合法的 CSS 样式属性。

exp1:
在一个动画中添加多个 keyframe 选择器：
@keyframes mymove
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

exp2:
在一个动画中改变多个 CSS 样式：
@keyframes mymove
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

exp3:

带有多个 CSS 样式的多个 keyframe 选择器：
@keyframes mymove
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}

}

------------------------------------------------------------------------------------
语法：animation: name duration timing-function delay iteration-count direction;

语法：动画:   动画名字  完成时间 什么时候快什么时候慢 动画延迟  播放次数 是否反向播放

animation 属性是一个简写属性，用于设置六个动画属性：
animation-name                   规定需要绑定到选择器的 keyframe 名称。。
animation-duration                  规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function           规定动画的速度曲线。
animation-delay                     规定在动画开始之前的延迟。
animation-iteration-count           规定动画应该播放的次数。
animation-direction                 规定是否应该轮流反向播放动画。
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
object.style.animation="mymove 5s infinite"

------------------------------------------------------------------------------------
语法：animation-name: keyframename|none;
keyframename    规定需要绑定到选择器的 keyframe 的名称。
none            规定无动画效果（可用于覆盖来自级联的动画）。
JavaScript 语法：    object.style.animationName="mymove"

------------------------------------------------------------------------------------

语法:animation-duration: time;

animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计。
object.style.animationDuration="3s"

规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。
请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
JavaScript 语法：    object.style.animationDuration="3s"
------------------------------------------------------------------------------------
语法：animation-timing-function: value
animation-timing-function 规定动画的速度曲线。
速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。
速度曲线用于使变化更为平滑。

默认值：    ease
JavaScript 语法：    object.style.animationTimingFunction="linear"

animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：
linear    动画从头到尾的速度是相同的。    测试
ease    默认。动画以低速开始，然后加快，在结束前变慢。    测试
ease-in    动画以低速开始。    测试
ease-out    动画以低速结束。    测试
ease-in-out    动画以低速开始和结束。    测试
cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

cubic-bezier(n,n,n,n)

  exp：(0,1,0,1)=（动画过渡用时0秒 1 0 1） 冲 慢 冲 慢
实例 1
为了更好地理解不同的定时函数值，这里提供了设置五个不同值的五个不同的 div 元素：
/* W3C 和 Opera: */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
/* Firefox: */
#div1 {-moz-animation-timing-function: linear;}
#div2 {-moz-animation-timing-function: ease;}
#div3 {-moz-animation-timing-function: ease-in;}
#div4 {-moz-animation-timing-function: ease-out;}
#div5 {-moz-animation-timing-function: ease-in-out;}
/* Safari 和 Chrome: */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}
------------------------------------------------------------------------------------

语法:animation-delay: time;

定义和用法
animation-delay 属性定义动画何时开始。
animation-delay 值以秒或毫秒计。
提示：允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。

JavaScript 语法：    object.style.animationDelay="2s"
time    可选。定义动画开始前等待的时间，以秒或毫秒计。默认值是 0。

亲自试一试 - 实例
负值，请注意动画跳过 2 秒进入动画周期：
animation-delay: -2s /* W3C 和 Opera */
-moz-animation-delay: -2s /* Firefox */
-webkit-animation-delay: -2s /* Safari 和 Chrome */
------------------------------------------------------------------------------------

语法：animation-iteration-count: n|infinite;

定义和用法
animation-iteration-count 属性定义动画的播放次数。
JavaScript 语法：    object.style.animationIterationCount=3

n    定义动画播放次数的数值。    、
infinite    规定动画应该无限次播放。
------------------------------------------------------------------------------------

语法:animation-direction: normal|alternate;
定义和用法
animation-direction 属性定义是否应该轮流反向播放动画。
如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。
注释：如果把动画设置为只播放一次，则该属性没有效果。

JavaScript 语法：    object.style.animationDirection="alternate"

normal    默认值。动画应该正常播放。    测试
alternate    动画应该轮流反向播放。
------------------------------------------------------------------------------------

语法:animation-play-state: paused|running;

animation-play-state 属性规定动画正在运行还是暂停。
注释：您可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。
JavaScript 语法：    object.style.animationPlayState="paused"
paused    规定动画已暂停。    测试
running    规定动画正在播放。
------------------------------------------------------------------------------------

语法：animation-fill-mode : none | forwards | backwards | both;

定义和用法
animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。
注释：其属性值是由逗号分隔的一个或多个填充模式关键词。
默认值：    none
继承性：    no
版本：    CSS3
JavaScript 语法：    object.style.animationFillMode=none

值    描述
none    不改变默认行为。
forwards    当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards    在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both    向前和向后填充模式都被应用。

////////////////////////////////////////////////////////////////////////////