一 css3动画属性
animation-name属性定义要使用哪个动画.
在下面的例子中,动画的名称设置为最后篇章,它与定义的关键帧相匹配
css代码:
div.width-animation{animation-name:最后篇章; animation-duration:10s;}
@keyframes 最后篇章 {from{width:0px;}to{width:120px;}}
效果如下:
<div>元素的内容由竖排,自动变为横排.
animation-duration属性以秒为单位,指定所选动画的持续时间.
如果动画名称与任何关键帧规则不匹配,则动画将不会执行.
animation-timing-function属性指定动画的速度曲线.它有以下值:
●ease:指定一个慢启动的动画,然后快速,然后慢慢结束(默认值)
●ease-in:指定一个慢启动的动画
●ease-out:指定一个缓慢结束的动画.
●ease-in-out:指定一个缓慢的开始和结束的动画.
●cubic-bezier(n,n,n,n):让你在一个cubic-bezier函数中定义你自己的值.
css代码:
animation-timing-function:linear;
animation-delay定义动画开始之前的延迟.
css代码:
animation-delay:2s;
animation-delay和animation-duration的属性值可以用秒和毫秒来定义.
animation-iteration-count属性确定动画重复的次数.
例如,你可以将动画设置为运行6次.
animation-iteration-count:6;
为了使动画永久重复,只需使用无限值:
animation-iteration-count:infinite;
animation-direction:指定如何应用关键帧,值可以设置为:
1.normal(默认值):这意味着它从0%到100%前进
2.reverse:从100%到0%的方向播放关键帧动画
3.alternate:动画首先向前,然后向后,然后向前.
4.alternate reverse:动画首先先倒退,然后向前,然后倒退.
如果对animation-iteration-count的值使用0或负数,动画将永远不会启动.
div{ animation-name:colorchange; animation-duration:3s;animation-timing-function:ease-in; animation-delay:2s;animation-iteration-count:infinite; animation-direction:reverse;}
上面的css代码可以简写为下面的格式,但是每一个属性的顺序,不能改变,否则无法生效.
div{ animation:colorchange 3s ease-in 2s infinite reverse; }
二 css3 3d转换
除了x轴和y轴,3d转换还引入了z轴,这使得3d操作 成为可能.
3d转换与2d转换非常相似.
通过rotateX(),rotateY()和rotateZ()函数以给定的度数deg围绕相应的轴旋转3d空间中的元素.
css代码:
div{transform:rotateX(160deg);}
你可以使用transform:none;关闭元素的所有转换效果.
3d转换方法允许你使用任何css长度单位(px,em,%等)
translateX:水平移动元素.
translateY:垂直移动
translateZ:移入或移除屏幕(正值将元素移入,负值移出)
translate3d()方法允许我们按照以下的顺序同时传递x,y和z偏移量
div{ transform:translate3d(-25px,4em,15px); }
像translate3d()方法一样,还有scale3d()和rotate3d(),它们适用于3d中的缩放和旋转元素.
perspective定义了如何渲染3d场景的深度.将视角看作从观众到物体的距离.值越大,距离越远,视觉效果越不强烈.子元素所呈现的边缘越小.
css代码:
div.empty-div1{position:relative; height:200px;width:200px; margin:30px;padding:10px;border:2px solid black; perspective:100px;-webkit-perspective:100px;}
div.red-div{padding:60px;position:absolute;background-color:red; border:2px solid blue;transform:rotateX(45deg);-webkit-transform:rotateX(45deg);}
效果如下:
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c50756.shtml
