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） 冲 慢 冲 慢
语法:animation-delay: time;
实例 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 属性定义动画何时开始。
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-fill-mode : none | forwards | backwards | both;
animation-play-state 属性规定动画正在运行还是暂停。
注释：您可以在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。
JavaScript 语法： object.style.animationPlayState="paused"
paused 规定动画已暂停。 测试
running 规定动画正在播放。
------------------------------------------------------------------------------------
定义和用法
animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。
注释：其属性值是由逗号分隔的一个或多个填充模式关键词。
默认值： none
继承性： no
版本： CSS3
JavaScript 语法： object.style.animationFillMode=none
值 描述
none 不改变默认行为。
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both 向前和向后填充模式都被应用。////////////////////////////////////////////////////////////////////////////
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
