CSS Animation

浏览数：32 / 时间：2015年06月09日

 1 div {
 2     /* Chrome, Safari, Opera 等使用webkit引擎的浏览器*/
 3     -webkit-animation-name: myfirst; /*规定 @keyframes 动画的名称。*/
 4     -webkit-animation-duration: 5s;  /*规定动画完成一个周期所花费的秒或毫秒。默认是 0。*/
 5     -webkit-animation-timing-function: linear;/*设置动画的速度曲线,默认是 "ease"。*/
 6     -webkit-animation-delay: 2s; /*设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。*/
 7     -webkit-animation-iteration-count: infinite;/*规定动画被播放的次数。默认是 1。*/
 8     -webkit-animation-direction: alternate;/*设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。*/
 9     -webkit-animation-play-state: running;/*规定动画是否正在运行或暂停。默认是 "running"。*/
10     /* Standard syntax */
11     animation-name: myfirst;
12     animation-duration: 5s;
13     animation-timing-function: linear;
14     animation-delay: 2s;
15     animation-iteration-count: infinite;
16     animation-direction: alternate;
17     animation-play-state: running;
18 }

可以缩写为

div {
    -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Chrome, Safari, Opera */
    animation: myfirst 5s linear 2s infinite alternate; /* Standard syntax */
}

补充：

animation-direction
设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。默认值normal不循环，reverse反向运行，alternate正常运行完后反向运行依次循环，alternate-reverse先反向运行后正常运行依次循环

http://www.w3schools.com/cssref/playit.asp?filename=playcss_animation-direction&preval=normal

animation-timing-function
设置动画速度，即通过建立加速度曲线，设置动画在关键帧之间是如何变化。可能值：

1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)；

2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)；

3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)；

4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0)；

5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)；

6、cubic-bezier：（该值允许你去自定义一个时间曲线），特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

http://www.w3school.com.cn/cssref/pr_animation-timing-function.asp

animation-fill-mode
指定动画执行前后如何为目标元素应用样式。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-fill-mode

例子中div至少要设置动画的名称和时长，然后在@keyframes中创建动画，绑定到div的选择器（动画名称）

@keyframes至少要创造两帧以上

完整例子：

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
    animation: myfirst 5s;
}

/* Chrome, Safari, Opera */
@-webkit-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;}
}

/* Standard syntax */
@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;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

旋转：

@-moz-keyframes rotate {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}
@-o-keyframes rotate {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(360deg);
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

摇摆：

@-moz-keyframes arm {
  from {
    -moz-transform: rotate(-4deg);
  }
  to {
    -moz-transform: rotate(4deg);
  }
}
@-o-keyframes arm {
  from {
    -o-transform: rotate(-4deg);
  }
  to {
    -o-transform: rotate(4deg);
  }
}
@keyframes arm {
  from {
    transform: rotate(-4deg);
  }
  to {
    transform: rotate(4deg);
  }
}
@-webkit-keyframes arm {
  from {
    -webkit-transform: rotate(-4deg);
  }
  to {
    -webkit-transform: rotate(4deg);
  }
}

css3-transform:

http://www.w3cplus.com/content/css3-transform

CSS Animation,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

CSS Animation