码迷,mamicode.com
首页 > Web开发 > 详细

css3 animation 的基础认识.

时间:2014-08-15 17:40:59      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   使用   io   strong   for   

css3 中的 animation属性主要用来做动画的,详细的文章看:http://www.w3cplus.com/content/css3-animation

调用animation的方法:animation-name(动画名称) animation-duration(播放动画的总时长) animation-timing-function(动画的播放方式:

  ease  ease-in  ease-in-out

  linear  cubic-bezier  

) animation-delay(动画开始执行时间) animation-iteration-count(循环次数) ...

 

在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,

玩过flash的朋友可能对这个东西并不会陌生。下面我们就一起来看看这个“Keyframes”是什么东西。前面我们

在使用transition制作一个简单的transition效果时,我们包括了初始属性和最终属性,一个开始执行动作时间

和一个延续动作时间以及动作的变换速率,其实这些值都是一个中间值,如果我们要控制的更细一些,比如说我

要第一个时间段执行什么动作,第二个时间段执行什么动作(换到flash中说,就是第一帧我要执行什么动作,第

二帧我要执行什么动作),这样我们用Transition就很难实现了,此时我们也需要这样的一个“关键帧”来控制。那

么CSS3的Animation就是由“keyframes”这个属性来实现这样的效果。下面我们一起先来看看Keyframes:

Keyframes具有其自己的语法规则,他的命名是由"@keyframes"开头,后面紧接着是这个“动画的名称”加上一对

花括号“{}”,括号中就是一些不同时间段样式规则,有点像我们css的样式写法一样。对于一个"@keyframes"中

的样式规则是由多个百分比构成的,如“0%”到"100%"之间,我们可以在这个规则中创建多个百分比,我们分别给

每一个百分比中给需要有动画效果的元素加上不同的属性,从而让元素达到一种在不断变化的效果,比如说移动,改

变元素颜色,位置,大小,形状等,不过有一点需要注意的是,我们可以使用“fromt”“to”来代表一个动画是从哪开始

,到哪结束,也就是说这个 "from"就相当于"0%"而"to"相当于"100%",值得一说的是,其中"0%"不能像别的属性

取值一样把百分比符号省略,我们在这里必须加上百分符号(“%”)如果没有加上的话,我们这个keyframes是无效

的,不起任何作用。因为keyframes的单位只接受百分比值。

 

下面贴上一个简单的动画效果样式(当鼠标移动到图片上面时图片会扭曲放大缩小效果):

/**
  本代码不是原创,只是进行了些修改,谢谢原作者的贡献
*/
img:hover
{ -webkit-animation: tada 1s .2s ease both; -moz-animation: tada 1s .2s ease both; } @-webkit-keyframes tada{ 0%{-webkit-transform:scale(1);} 10%, 20%{-webkit-transform:scale(0.5) rotate(10deg);} 30%, 50%, 70%, 90%{-webkit-transform:scale(1.1) rotate(-10deg);} 40%, 60%, 80%{-webkit-transform:scale(1.1) rotate(10deg);} 100%{-webkit-transform:scale(1) rotate(0);} } @-moz-keyframes tada{0%{-moz-transform:scale(1);} 10%, 20%{-moz-transform:scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90%{-moz-transform:scale(1.1) rotate(3deg);} 40%, 60%, 80%{-moz-transform:scale(1.1) rotate(-3deg);} 100%{-moz-transform:scale(1) rotate(0);}}

 

css3 animation 的基础认识.,布布扣,bubuko.com

css3 animation 的基础认识.

标签:style   blog   http   color   使用   io   strong   for   

原文地址:http://www.cnblogs.com/hellome/p/3915268.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!