css3动画代码如何运用（css3零基础自学教程）

css3动画代码如何运用（css3零基础自学教程）animation-duration属性以秒为单位 指定所选动画的持续时间.<div>元素的内容由竖排 自动变为横排.div.width-animation{ animation-name:最后篇章; animation-duration:10s;}@keyframes 最后篇章 {from{width:0px;}to{width:120px;} }效果如下:

一 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 网页的逻辑部分.