css3的动画功能有以下三种:
1、transition(过度属性)
2、animation(动画属性)
3、transform(2d/3d转换属性)
下面逐一进行介绍我的理解：
1、transition:331d1e1d542d7a252d08f67d1424ed12 a833cf4c2f7cbfc49e8154e58a73cb23 c689204b54f6e723921beacd38744111
如-webkit-transition:color 1s;
等同于:
-webkit-transition-property:color;
-webkit-transition-duration:1s;
多个属性的过渡效果可以这样写：
方法1：-webkit-transition:177ff2ebc4ef7016d02af8129f089665 14f005d1ca61411c857ae348de3af769 ,66e0f0f660ced338a3fd4d11b1725e4a ee7b0d14dd34d857944e3f49ee39d62f ,。。。
方法2：
-webkit-transition:177ff2ebc4ef7016d02af8129f089665 14f005d1ca61411c857ae348de3af769;
-webkit-transition:66e0f0f660ced338a3fd4d11b1725e4a ee7b0d14dd34d857944e3f49ee39d62f;
transition-timing-function属性值有5个:
ease:缓慢开始，缓慢结束
liner:匀速
ease-in:缓慢开始
ease-out:缓慢结束
ease-in-out:缓慢开始，缓慢结束（和ease稍有区别）
实例：
transition过渡效果
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>transition过渡效果</title>
<style>
*{
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;
}
</style>
<script>
window.onload=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.onclick=function(){
box.style.left = 1000+"px";
box.style.top = 100+"px";
box.style.transitiontimingfunction="ease";
};
e2.onclick=function(){
box.style.right = 0+"px";
box.style.top = 0+"px";
box.style.transitiontimingfunction="liner";
};
e3.onclick=function(){
box.style.right = 1000+"px";
box.style.top = 100+"px";
box.style.transitiontimingfunction="ease-in";
};
e4.onclick=function(){
box.style.left = 0+"px";
box.style.top = 0+"px";
box.style.transitiontimingfunction="ease-out";
};
e5.onclick=function(){
box.style.left = 1000+"px";
box.style.top = 100+"px";
box.style.transitiontimingfunction="ease-in-out";
};
}
</script>
</head>
<body>
<p id="box"></p>
<br>
<br>
<br>
<br>
<br>
<br>
<hr>
<br>
<br>
<br>
<p class="btn">
<button id="e1">ease</button>
<button id="e2">liner</button>
<button id="e3">ease-in</button>
<button id="e4">ease-out</button>
<button id="e5">ease-in-out</button>
</p>
</body>
</html>
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效果
<!doctype html>
<html>
<head>
<style>
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;}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 internet explorer 中无效。</p>
<p></p>
</body>
</html>
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转换效果
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>transform3d转换效果</title>
<style>
*{
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;
}
</style>
<script>
window.onload=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.onclick=function(){
box.style.transform = "translatex(500px)";
};
ty.onclick=function(){
box.style.transform = "translatey(400px)"
};
rx.onclick=function(){
box.style.transform = "rotatex(30deg)"
};
ry.onclick=function(){
box.style.transform = "rotatey(30deg)"
};
rz.onclick=function(){
box.style.transform = "rotatez(30deg)"
};
}
</script>
</head>
<body>
<p id="box"></p>
<br>
<br>
<br>
<br>
<br>
<br>
<hr>
<br>
<br>
<br>
<p>translate(移动距离)</p>
<p class="btn">
<button id="tx">translatex</button>
<button id="ty">translatey</button>
</p>
<p>rotate(旋转角度)</p>
<p class="btn">
<button id="rx">rotatex</button>
<button id="ry">rotatey</button>
<button id="rz">rotatez</button>
</p>
</body>
</html>
使用transform-origin属性调整旋转中心。默认旋转中心点为p盒子的正中心。
这个旋转中心是可以改变的：
x轴：left、center、right.
y轴：top、center、bottom.
z轴：length px(一个长度值)。
以上这篇css3动画效果小结(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
更多css3动画效果总结分析。
相关文章：
如何用html5的canvas制作3d动画效果
html5 canvas动画效果图文代码演示
css3动画实现5种预载动画效果