一 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);}

效果如下:

到此,你已经掌握了css的基础内容.html和css的内容都算比较简单.接下来我们将学习JavaScript,网页的逻辑部分.