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:是用来指定元素动画开始时间。取值为46dd80ba616c57a652514755c74c4211为数值,单位为s(秒),其默认值也是0。这个属性和transition-delayy使用方法是一样的。
五、animation-iteration-count
语法:
animation-iteration-count:infinite | <number> [, infinite | <number>]*
取值说明:
animation-iteration-count是用来指定元素播放动画的循环次数,其可以取值d80b5def5ed1be6e26d91c2709f14170为数字,其默认值为“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>] ]*
如下图所示
兼容的浏览器
前面我也简单的提过,CSS3的animation到目前为止只支持webkit内核的浏览器,因为最早提出这个属性的就是safari公司,据说Firefox5.0+将支持Animation。如图所示
那么到此为止,我们主要一起学习了有关animation的理论知识,下面我们一起来看两个实例制作过程,来加强对animation的实践能力
DEMO一:发光变色的button
我们这个demo主要是通过在keyframes中改变元素的background;color;box-shadow三个属性,来达到一种发光变色的button效果,我们来看看其实现代码
HTML Code:
<a href="" class="btn">发光的button</a>
CSS Code
/*给这个按钮创建一个动名名称:buttonLight,然后在每个时间段设置不同的background,color来达到变色效果,改变box-shadow来达到发光效果*/
@-webkit-keyframes 'buttonLight' { from { background: rgba(96, 203, 27,0.5); -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset, 0 0 3px rgba(220, 120, 200, 0.5); color: red; } 25% { background: rgba(196, 203, 27,0.8); -webkit-box-shadow: 0 0 10px rgba(255, 155, 255, 0.5) inset, 0 0 8px rgba(120, 120, 200, 0.8); color: blue; } 50% { background: rgba(196, 203, 127,1); -webkit-box-shadow: 0 0 5px rgba(155, 255, 255, 0.3) inset, 0 0 3px rgba(220, 120, 100, 1); color: orange; } 75% { background: rgba(196, 203, 27,0.8); -webkit-box-shadow: 0 0 10px rgba(255, 155, 255, 0.5) inset, 0 0 8px rgba(120, 120, 200, 0.8); color: black; } to { background: rgba(96, 203, 27,0.5); -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset, 0 0 3px rgba(220, 120, 200, 0.5); color: green; } } a.btn { /*按钮的基本属性*/ background: #60cb1b; font-size: 16px; padding: 10px 15px; color: #fff; text-align: center; text-decoration: none; font-weight: bold; text-shadow: 0 -1px 1px rgba(0,0,0,0.3); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8); -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8); box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8); /*调用animation属性,从而让按钮在载入页面时就具有动画效果*/ -webkit-animation-name: "buttonLight"; /*动画名称,需要跟@keyframes定义的名称一致*/ -webkit-animation-duration: 5s;/*动画持续的时间长*/ -webkit-animation-iteration-count: infinite;/*动画循环播放的次数*/ }
效果:
效果一
变化中效果二
为了更好的看出这个demo的效果,你可以把上面的代码复制到你本过的页面上,并使用safari和chrome,你会觉得很有意思,整个按钮好像在不停的呼吸一样。
Demo二:方形旋转变成圆型
我们这个demo是通过transform的rotate和border-radius不同值,把一个方型图片随着时间的推移,慢慢的转换成了个圆型效果,下面我们来看看其具体实现的效果
HTML Code:
<a href="#" class="box"></a> <span class="click-btn">Click</span>
CSS Code:
/*定义方型转化为圆型的动画round*/
@-webkit-keyframes 'round' { from{ -webkit-transform: rotate(36deg); -webkit-border-radius: 2px; } 10%{ -webkit-transform: rotate(72deg); -webkit-border-radius: 4px; } 20% { -webkit-transform: rotate(108deg); -webkit-border-radius: 6px; } 30% { -webkit-transform: rotate(144deg); -webkit-border-radius: 9px; } 40%{ -webkit-transform: rotate(180deg); -webkit-border-radius: 12px; } 50%{ -webkit-transform: rotate(216deg); -webkit-border-radius: 14px; } 60% { -webkit-transform: rotate(252deg); -webkit-border-radius: 16px; } 70% { -webkit-transform: rotate(288deg); -webkit-border-radius: 19px; } 80%{ -webkit-transform: rotate(324deg); -webkit-border-radius: 22px; } to { -webkit-transform: rotate(360deg); -webkit-border-radius: 25px; }} /*给方型box一个初步样式*/ a.box { display: block; width: 50px; height: 50px; background: red; margin-bottom: 20px; } /*圆型box的样式,并在这里应用animation*/ a.round { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; background: green; -webkit-animation-name: 'round'; /*动画名称*/ -webkit-animation-duration: 60s;/*播放一次所持续时间*/ -webkit-animation-timing-function: ease;/*动画播放频率*/ -webkit-animation-iteration-count: infinite;/*动画播放次涒为无限次*/ } /*click button效果*/ .click-btn { background: rgba(125,220,80,0.8); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 0 0 8px rgba(255,255,255,0.8),0 0 10px rgba(10,255,120,0.3); -moz-box-shadow: inset 0 0 8px rgba(255,255,255,0.8),0 0 10px rgba(10,255,120,0.3); box-shadow: inset 0 0 8px rgba(255,255,255,0.8),0 0 10px rgba(10,255,120,0.3); padding: 5px 10px; color: #369; font-size: 16px; font-weight: bold; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); cursor: pointer; }
jQuery Code:
<script type="text/javascript"> $(document).ready(function(){ $(".click-btn").click(function(){ $(this).siblings().addClass("round"); }); }); </script>
我们载入时box是没有任何动画效果的,当我们点击了click button看给原box上加上一个round的class名,从而触发了一个round的动作。请看效果:
未点击按钮时效果(未触发动画效果)
点击click按钮开始播放动画
【相关推荐】
1. CSS3免费视频教程
4. 详解关于css3的新特性
5. 推荐十个CSS3动画实例
以上是CSS3学习之Animation详解的详细内容。更多信息请关注PHP中文网其他相关文章!