html5中动画总结,css3动画效果总结分析

css3的动画功能有以下三种:

1、transition(过度属性)

2、animation(动画属性)

3、transform(2D/3D转换属性)

下面逐一进行介绍我的理解：

1、transition:

如-webkit-transition:color 1s;

等同于:

-webkit-transition-property:color;

-webkit-transition-duration:1s;

多个属性的过渡效果可以这样写：

方法1：-webkit-transition: , ,。。。

方法2：

-webkit-transition: ;

-webkit-transition: ;

transition-timing-function属性值有5个:

ease:缓慢开始，缓慢结束

liner:匀速

ease-in:缓慢开始

ease-out:缓慢结束

ease-in-out:缓慢开始，缓慢结束(和ease稍有区别)

实例：

transition过渡效果

transition过渡效果

*{

margin: 0px;

padding: 0px;

}

#box{

width: 200px;

height: 200px;

background-color: chocolate;

position: relative;

left: 0px;

top: 0px;

transition: top 5s ease,left 5s ease ;

-moz-transition: top 5s ease,left 5s ease ; /* Firefox 4 */

-webkit-transition: top 5s ease,left 5s ease ; /* Safari and Chrome */

-o-transition: top 5s ease,left 5s ease ; /* Opera */

}

.btn{

width: 512px;

margin: 0 auto;

border: 2px solid #e3e3e3;

border-radius: 5px;

padding: 10px;

}

.btn button{

width: 80px;

height: 40px;

text-align: center;

line-height: 40px;

margin-right: 20px;

}

button:last-child{

margin-right: 0px;

}

window.οnlοad=function(){

var e1 = document.getElementById("e1");

var e2 = document.getElementById("e2");

var e3 = document.getElementById("e3");

var e4 = document.getElementById("e4");

var e5 = document.getElementById("e5");

var box = document.getElementById("box");

e1.οnclick=function(){

box.style.left = 1000+"px";

box.style.top = 100+"px";

box.style.transitionTimingFunction="ease";

};

e2.οnclick=function(){

box.style.right = 0+"px";

box.style.top = 0+"px";

box.style.transitionTimingFunction="liner";

};

e3.οnclick=function(){

box.style.right = 1000+"px";

box.style.top = 100+"px";

box.style.transitionTimingFunction="ease-in";

};

e4.οnclick=function(){

box.style.left = 0+"px";

box.style.top = 0+"px";

box.style.transitionTimingFunction="ease-out";

};

e5.οnclick=function(){

box.style.left = 1000+"px";

box.style.top = 100+"px";

box.style.transitionTimingFunction="ease-in-out";

};

}

---

ease

liner

ease-in

ease-out

ease-in-out

2、动画属性animation

animation: name duration timing-function delay iteration-count direction;值描述

animation-name规定需要绑定到选择器的 keyframe 名称。。

animation-duration规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function规定动画的速度曲线。

animation-delay规定在动画开始之前的延迟。

animation-iteration-count规定动画应该播放的次数。

animation-direction规定是否应该轮流反向播放动画。

注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。

@keyframes animationname {keyframes-selector {css-styles;}}值描述

animationname必需。定义动画的名称。

keyframes-selector必需。动画时长的百分比。

合法的值：0-100%

from(与 0% 相同)

to(与 100% 相同)

css-styles必需。一个或多个合法的 CSS 样式属性。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

例如：animation:mymove 5s infinite;

@keyframes mymove{

from{ top:0px; }

to{ top:200px; }

}

还可以这么写：@keyframes mymove{

0%{ top:0px; }

25%{ top:200px; }

50%{ top:100px; }

75%{ top:200px; }

100%{ top:0px; }

}

案例：

css3的animation效果

p

{

width:100px;

height:100px;

background:red;

position:relative;

animation:mymove 5s infinite;

-moz-animation:mymove 5s infinite; /* Firefox */

-webkit-animation:mymove 5s infinite; /* Safari and Chrome */

-o-animation:mymove 5s infinite; /* Opera */

}

@keyframes mymove

{

from {top:0px;}

to {top:200px;}

}

@-moz-keyframes mymove /* Firefox */

{

from {top:0px;}

to {top:200px;}

}

@-webkit-keyframes mymove /* Safari and Chrome */

{

from {top:0px;}

to {top:200px;}

}

@-o-keyframes mymove /* Opera */

{

from {top:0px;}

to {top:200px;}

}

注释：本例在 Internet Explorer 中无效。

3、设置3D场景(即transform)

-webkit-perspective:800;(单位为像素)--即三维物体距离屏幕的距离。

-webkit-perspective-origin:50% 50%;(这个属性代表了人眼观察的视野。50% 50%为X轴、Y轴相应的位置，即屏幕的正中央。)

使用transform属性调整元素：-webkit-transform-style:-webkit-perserve-3d;(这个属性是告诉浏览器我们是在一个三维空间中对元素进行操作)

(1)、translate(移动距离)

translateX(x px)

translateY(y px)

translateZ(z px)

(2)、rotate(旋转角度)

rotateX(x deg)

rotateY(y deg)

rotateZ(z deg)

transform：rotate(45deg)

rotateX:向屏幕上边沿向内旋转为正方向。

rotateY:向屏幕竖直向下为正方向。

rotateZ:向屏幕外为正方向。

一个p块，右边沿向屏幕内旋转45deg,即应设置为：Transform：rotateY(45deg)。

实例：

transform3D转换效果

transform3D转换效果

*{

margin: 0px;

padding: 0px;

}

#box{

width: 200px;

height: 200px;

background-color: chocolate;

position: relative;

left: 0px;

top: 0px;

perspective:800px;

perspective-origin:50% 50%;

transform-style: preserve-3d;

transform-origin:0% 100%;//以Y轴为旋转中心

}

p{

margin:20px 520px;

}

.btn{

width: 300px;

margin: 0 auto;

border: 2px solid #e3e3e3;

border-radius: 5px;

padding: 10px;

}

.btn button{

width: 80px;

height: 40px;

text-align: center;

line-height: 40px;

margin-right: 20px;

}

button:last-child{

margin-right: 0px;

}

window.οnlοad=function(){

var tx = document.getElementById("tx");

var ty = document.getElementById("ty");

var tz = document.getElementById("tz");

var rx = document.getElementById("rx");

var ry = document.getElementById("ry");

var rz = document.getElementById("rz");

var box = document.getElementById("box");

tx.οnclick=function(){

box.style.transform = "translateX(500px)";

};

ty.οnclick=function(){

box.style.transform = "translateY(400px)"

};

rx.οnclick=function(){

box.style.transform = "rotateX(30deg)"

};

ry.οnclick=function(){

box.style.transform = "rotateY(30deg)"

};

rz.οnclick=function(){

box.style.transform = "rotateZ(30deg)"

};

}

---

translate(移动距离)

translateX

translateY

rotate(旋转角度)

rotateX

rotateY

rotateZ

使用transform-origin属性调整旋转中心。默认旋转中心点为p盒子的正中心。

这个旋转中心是可以改变的：

X轴：left、center、right.

Y轴：top、center、bottom.

Z轴：length px(一个长度值)。

以上这篇css3动画效果小结(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。

更多css3动画效果总结分析相关文章请关注PHP中文网！

相关文章：

声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理