CSS篇动画

来源：互联网发布：优酷mac下的视频在哪里编辑：程序博客网时间：2024/06/05 04:37

参考资料：http://isux.tencent.com/css3/index.html?animation-name

1、animation-name

语法：animation-name: none | <identifier> [ , none | <identifier> ]*;定义一个或多个动画名称。

检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义如果提供多个属性值，以逗号进行分隔。

如何开始进行动画
@keyframes相当于一个命名空间，后面跟一个名词，如果在class中的animation-name定义了与之对应的name，那么就可以执行动画了。定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态：如：
@-webkit-keyframes demo{
from{left:0;}
to{left:400px;}
}
复杂动画：
@-webkit-keyframes demo{
0%{left:0;}
50%{left:200px;}
100%{left:400px;}
}

这里面的百分百有点像flash里帧的概念。表示设置某个时间段内任意时间点的样式。

取值
none：不引用任何动画名称
identifier：定义一个或多个动画名称(identifier标识)

示例：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>实例</title></head><body><style type="text/css">.demo_box{border:1px solid #3DA5DC;background:#a4dcf9;height:100px;width:200px; text-align:center;color:#fff; }.animation_name{    left:0;    top:100px;    position:absolute;    -webkit-animation:0.5s 0.5s ease infinite alternate;    -webkit-animation-name:demo;    -moz-animation:0.5s 0.5s ease infinite alternate;    -moz-animation-name:demo;}@-webkit-keyframes demo{    0%{left:0;}    100%{left:400px;}} </style><div class="demo_box animation_name">看我没事来回跑</div>                                                  </body></html>

兼容性

IEFirefoxOperaSafariChromeIE 10+Firefox 3.5+目前暂无版本支持Safari 10+Chrome 2.0+

2、animation-duration

语法：animation-duration: <time>[,<time>]*; 指定对象动画的持续时间。

说明：检索或设置对象动画的持续时间；如果提供多个属性值，以逗号进行分隔。

取值：<time>：正数，单位可以是秒(s)或者毫秒(ms)。默认值为0，表明动画不执行。

<!DOCTYPE html><html><head><meta charset="utf-8"><title>animation name示例</title><script src="./js/jquery-3.1.1.min.js"></script></head><body><style type="text/css">.demo_box{border:1px solid #3DA5DC;background:#a4dcf9;height:100px;width:200px; text-align:center;color:#fff; }.animation_duration{    left:10px;    top:100px;    position:absolute;    -webkit-animation:0.5s ease 1 forwards;    -webkit-animation-duration:5s;    -webkit-animation-name:demo;    -moz-animation:0.5s ease 1 forwards;    -moz-animation-name:demo;    -moz-animation-duration:2s;}@-webkit-keyframes demo{    0%{left:10px;}    100%{left:400px;}}</style><div class="demo_box animation_duration">我一共运行了2秒钟</div>                                                  </body></html>

兼容性

IEFirefoxOperaSafariChromeIE 10+Firefox 3.5+目前暂无版本支持Safari 10+Chrome 2.0+

3、animation-timing-function

说明：检索或设置对象动画的过渡类型；如果提供多个属性值，以逗号进行分隔。

取值：
ease：缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔。
linear：线性效果，等同于cubic-bezier(0.0,0.0,1.0,1.0)函数。
ease-in：渐显效果，等同于cubic-bezier(0.42,0,1.0,1.0)函数。
ease-out：渐隐效果，等同于cubic-bezier(0,0,0.58,1.0)函数。
ease-in-out：渐显渐隐效果，等同于cubic-bezier(0.42,0,0.58,1.0)函数。
step-start：马上转跳到动画结束状态。
step-end：保持动画开始状态，直到动画执行时间结束，马上转跳到动画结束状态。
steps(<number>[, [ start | end ] ]?)：第一个参数number为指定的间隔数，即把动画分为n步阶段性展示，第二个参数默认为end，设置最后一步的状态，start为结束时的状态，end为开始时的状态，若设置与animation-fill-mode的效果冲突，而以animation-fill-mode的设置为动画结束的状态。
cubic-bezier(<number>, <number>, <number>, <number>)：特殊的立方贝塞尔曲线效果。

兼容性

IEFirefoxOperaSafariChromeIE 10+Firefox 3.5+目前暂无版本支持Safari 10+Chrome 2.0+

<!DOCTYPE html><html><head><meta charset="utf-8"><title>animation-timing-function示例</title><script src="./js/jquery-3.1.1.min.js"></script></head><body><style type="text/css">.demo_box{border:1px solid #3DA5DC;background:#a4dcf9;height:100px;width:200px; text-align:center;color:#fff; }.demo_box{    -webkit-animation:f1 2s 0.5s forwards;    -moz-animation:f1 2s 0.5s forwards;    position:relative;    left:10px;    width:50px;    height:50px;    border-radius:50px;    margin:10px 0;    overflow:hidden;}.ease{     -webkit-animation-timing-function:ease;    -moz-animation-timing-function:ease;}.linear{    -webkit-animation-timing-function:linear;    -moz-animation-timing-function:linear;}.ease-in{    -webkit-animation-timing-function:ease-in;    -moz-animation-timing-function:ease-in;}.ease-out{    -webkit-animation-timing-function:ease-out;    -moz-animation-timing-function:ease-out;}.ease-in-out{    -webkit-animation-timing-function:ease-in-out;    -moz-animation-timing-function:ease-in-out;}.step-start{    -webkit-animation-timing-function:step-start;    -moz-animation-timing-function:step-start}.step-end{    -webkit-animation-timing-function:step-end;    -moz-animation-timing-function:step-end;}.steps{    -webkit-animation-timing-function:steps(2);    -moz-animation-timing-function:steps(2)}.cubic-bezier{    -webkit-animation-timing-function:cubic-bezier(0.52,0,0.58,1.0);    -moz-animation-timing-function:cubic-bezier(0.52,0,0.58,1.0);}@-webkit-keyframes f1{    0%{left:10px;}    100%{left:500px;}}@-moz-keyframes f1{    0%{left:10px;}    100%{left:500px;background:#f00}}                                                </style><div class="demo_box ease">ease</div><div class="demo_box linear">linear</div><div class="demo_box ease-in">ease-in</div><div class="demo_box ease-out">ease-out</div><div class="demo_box ease-in-out">ease-in-out</div><div class="demo_box step-start">step-start</div><div class="demo_box step-end">step-end</div><div class="demo_box steps">steps(2)</div><div class="demo_box cubic-bezier">cubic-bezier(0.52,0,0.58,1.0)</div>                                              </body></html>

4、animation-delay

语法：animation-delay: <time>; 指定对象动画延迟执行的时间。

说明：设置动画延迟执行的时间。
默认值0表示立即执行，正数为动画延迟一定时间，负数为截断一定时间内的动画。单位为秒(s)或毫秒(s)。

取值：0：不延迟，立即执行。正数：按照设置的时间延迟。负数：设置时间前的动画将被截断。

兼容性

IEFirefoxOperaSafariChromeIE 10+Firefox 3.5+目前暂无版本支持Safari 10+Chrome 2.0+

0 0

CSS篇 动画

兼容性

兼容性

兼容性

兼容性

CSS篇动画