首页 > 前端技术 > 正文

CSS3 animation属性实现图片360度旋转动画
2015-06-17 11:08:11    网络资源
0   

CSS Animation动画效果将会影响元素相对应的css值,在整个动画过程中,元素的变化属性值完全是由animation来控制,动画后面的会覆盖前面的属性值。如上面例子:因为我们这个demo只是在不同的时
CSS Animation动画效果将会影响元素相对应的css值,在整个动画过程中,元素的变化属性值完全是由animation来控制,动画后面的会覆盖前面的属性值。如上面例子:因为我们这个demo只是在不同的时间段改变了demo1的背景色和左边距,其默认值是:margin-left:100px;background: blue;但当我们在执行动画0%时,margin-left:100px,background:green;当执行到40%时,属性变成了:margin-left:150px;background:orange;当执行到60%时margin-left:75px;background:blue;当动画 执行到100%时:margin-left:100px;background: red;此时动画将完成,那么margin-left和background两个属性值将是以100%时的为主,他不会产生叠加效果,只是一次一次覆盖前一次出将的css属性。就如我们平时的css一样,最后出现的权根是最大的。当动画结束后,样式回到默认效果。

我们可以看一张来自w3c官网有关于css3的animation对属性变化的过程示意图

\

从上面的Demo中我们可以看出animation和transition一样有自己相对应的属性,那么在animation主要有以下几种:animation-name;animation-duration;animation-timing-function;animation-delay;animation-iteration-count;animation-direction;animation-play-state。下面我们分别来看看这几个属性的使用

一、animation-name:

语法:

  animation-name: none | IDENT[,none | IDENT]*;

取值说明:

animation-name:是用来定义一个动画的名称,其主要有两个值:IDENT是由Keyframes创建的动画名,换句话说此处的IDENT要和Keyframes中的IDENT一致,如果不一致,将不能实现任何动画效果;none为默认值,当值为none时,将没有任何动画效果。另外我们这个属性跟前面所讲的transition一样,我们可以同时附几个animation给一个元素,我们只需要用逗号“,”隔开。

二、animation-duration:

语法:

  animation-duration: <time>[,<time>]*

取值说明:

animation-duration是用来指定元素播放动画所持续的时间长,取值:

三、animation-timing-function:

语法:

   animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]* 

取值说明:

animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率,说得简单点就是动画的播放方式。他和transition中的transition-timing-function一样,具有以下六种变换方式:ease;ease-in;ease-in-out;linear;cubic-bezier。具体的使用方法大家可以点这里,查看其中transition-timing-function的使用方法。

四、animation-delay:

语法:

  animation-delay: <time>[,<time>]*

取值说明:

animation-delay:是用来指定元素动画开始时间。取值为

五、animation-iteration-count

语法:

  animation-iteration-count:infinite | <number> [, infinite | <number>]* 

取值说明:

animation-iteration-count是用来指定元素播放动画的循环次数,其可以取值为数字,其默认值为“1”;infinite为无限次数循环。

六、animation-direction

语法:

  animation-direction: normal | alternate [, normal | alternate]* 

取值说明:

animation-direction是用来指定元素动画播放的方向,其只有两个值,默认值为normal,如果设置为normal时,动画的每次循环都是向前播放;另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。

七、animation-play-state

语法:

   animation-play-state:running | paused [, running | paused]* 

取值说明:

animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值,running和paused其中running为默认值。他们的作用就类似于我们的音乐播放器一样,可以通过paused将正在播放的动画停下了,也可以通过running将暂停的动画重新播放,我们这里的重新播放不一定是从元素动画的开始播放,而是从你暂停的那个位置开始播放。另外如果暂时了动画的播放,元素的样式将回到最原始设置状态。这个属性目前很少内核支持,所以只是稍微提一下。

上面我们分别介绍了animation中的各个属性的语法和取值,那么我们综合上面的内容可以给animation属性一个速记法:

  animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]* 

如下图所示

\

浏览器兼容写法:

.reverse{
  -webkit-animation-name: reverse;
  -webkit-animation-duration: 20s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: center;
  -moz-animation-name: reverse;
  -moz-animation-duration: 20s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: center;
  animation-name: reverse; /*动画规定名称*/
  animation-duration: 20s; /*规定动画完成一个周期所花费的秒或毫秒。默认是 0。*/
  animation-timing-function: linear;  /*从开头到结尾的播放速度。默认是 "ease"  "linear"为动画从头到尾的速度是相同的。*/
  animation-iteration-count: infinite;  /*规定动画被播放的次数。默认是 1。 infinite为无限循环*/
  transform-origin: center;  /*设置旋转元素的基点位置  “center”为中心*/
}

案例:http://sale.jd.com/act/sK60nD3fSIji5.html

CSS3 animation属性实现图片360度旋转动画

相关热词搜索: CSS3  animation  旋转  动画

上一篇:如何在Dreamweaver中使用emmet(ZenCoding) 下一篇:最后一页