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:<属性1> <时间1> ,<属性2> <时间2> ,。。。
方法2：
-webkit-transition:<属性1> <时间1>;
-webkit-transition:<属性2> <时间2>;
transition-timing-function属性值有5个:
ea:缓慢开始，缓慢结束
liner:匀速
ea-in:缓慢开始
ea-out:缓慢结束
ea-in-out:缓慢开始，缓慢结束（和ea稍有区别）
实例：
transition过渡效果
xml/html code
复制内容到剪贴板
<!doctypehtml><htmllang=“en”><head><metachart=“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:top5a,left5a; -moz-transition:top5a,left5a;/*firefox4*/ -webkit-transition:top5a,left5a;/*safariandchrome*/ -o-transition:top5a,left5a;/*opera*/ } .btn{ width:512px; margin:0auto; border:2pxsolid#e3e3e3; border-radius:5px; padding:10px; } .btnbutton{ width:80px; height:40px; text-align:center; line-h数学的思维导图eight:40px; margin-right:20px; } button:last-child{ margin-right:0px; } </style><script>window.onload=function(){ vare1=document.getelementbyid(“e1”); vare2=document.getelementbyid(“e2”); vare3=document.getelementbyid(“e3”); vare4=document.getelementbyid(“e4”); vare5=document.getelementbyid(“e5”); varbox=document.getelementbyid(“box”); e1.onclick=function(){ box.style.left=1000+”px”; box.style.top=100+”px”; box.style.transitiontimingfunction=“ea”; }; 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=“ea-in”; }; e4.onclick=function(){ box.style.left=0+”px”; box.style.top=0+”px”; box.style.transitiontimingfunction=“ea-out”; }; e5.onclick=function(){ box.style.left=1000+”px”; box.style.top=100+”px”; box.style.transitiontimingfunction=“ea-in-out”; }; } </script></head><body><divid=“box”></div><br><br><br><br><br><br><hr><br><br><br><divclass=“btn”><buttonid=“e1”>ea</button><buttonid=“e2”>liner</button><buttonid=“e3”>ea-in</button><buttonid=“e4”>ea-out</button><buttonid=“e5”>ea-in-out</button></div></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-lector {css-styles;}}
值
描述
animationname
必需。定义动画的名称。
keyframes-lector
必需。动画时长的百分比。
合法的值：
0-100% from（与 0% 相同） to（与 100% 相同）css-styles
必需。一个或多个合法的 css 样式属性。
以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。
例如：
css code
复制内容到剪贴板
animation:mymove5sinfinite; @keyframesmymove{ from{top:0px;} to{top:200px;} }还可以这么写：
css code
复制内容到剪贴板
@keyframesmymove{ 0%{top:0px;} 25%{top:200px;} 50%{top:100px;} 75%{top:200px;} 100%{top:0px;} } 案例：
css3的animation效果
xml/html code
复制内容到剪贴板
<!doctypehtml><html><head><style> div { width:100px; height:100px; background:red; position:relative; animation:mymove5sinfinite; -moz-animation:mymove5si剪窗花的步骤nfinite;/*firefox*/ -webkit-animation:mymove5sinfinite;/*safariandchrome*/ -o-animation:mymove5sinfinite;/*opera*/ } @keyframesmymove { from{top:0px;} to{top:200px;} } @-moz-keyframesmymove/*firefox*/ { from{top:0px;} to{top:200px;} } @-webkit-keyframesmymove/*safariandchrome*/ { from{top:0px;} to{top:200px;} } @-o-keyframesmymove/*opera*/ { from{top:0px;} to{top:200px;} } </style></head><body><p><b>注释：</b>本例在internetexplorer中无效。</p><div>云南国税网上办税大厅;</div></body></html>3、设置3d场景（即transform）
-webkit-perspective:800;(单位为像素)–即三维物体距离屏幕的距离。
-webkit-perspective-origin:50% 50%;(这个属性代表了人眼观察的视野。50% 50%为x轴、y轴相应的位置，即屏幕的正中央。)
使用transform属性调整元素：-webkit-transform-style:-webkit-perrve-3d;(这个属性是告诉浏览器我们是在一个三维空间中对元素进行操作)
(1)、translate(移动距离)
translatex（x px）
translatey（y px）
tra东京奥运会金牌总数是多少nslatez（z px）
(2)、rotate(旋转角度)
rotatex(x deg)
rotatey(y deg)
rotatez(z deg)
transform：rotate（45deg）
rotatex:向屏幕上边沿向内旋转为正方向。
rotatey:向屏幕竖直向下为正方向。
rotatez:向屏幕外为正方向。
一个div块，右边沿向屏幕内旋转45deg,即应设置为：transform：rotatey（45deg）。
实例：
transform3d转换效果
xml/html code
复制内容到剪贴板
<!doctypehtml><htmllang=“en”><head><metachart=“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:prerve-3d; transform-origin:0%100%;//以y轴为旋转中心 } p{ margin:20px520px; } .btn{ width:300px; margin:0auto; border:2pxsolid#e3e3e3; border-radius:5px; padding:10px; } .btnbutton{ width:80px; height:40px; text-align:center; line-height:40px; margin-right:20px; } button:last-child{ margin-right:0px; } </style><script>window.onload=function(){ vartx=document.getelementbyid(“tx”); varty=document.getelementbyid(“ty”); vartz=document.getelementbyid(“tz”); varrx=document.getelementbyid(“rx”); varry=document.getelementbyid(“ry”); varrz=document.getelementbyid(“rz”); varbox=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><divid=“box”></div><br><br><br><br><br><br><hr><br><br><br><p>translate(移动距离)</p><divclass=“btn”><buttonid=“tx”>translatex</button><buttonid=“ty”>translatey</button></div><p>rotate(旋转角度)</p><divclass=“btn”><buttonid=“rx”>rotatex</button><buttonid=“ry”>rotatey</button><buttonid=“rz”>rotatez</button></div></body></html>使用transform-origin属性调整旋转中心。默认旋转中心点为div盒子的正中心。
这个旋转中心是可以改变的：
x轴：left、center、right.
y轴：top、center、bottom.
z轴：length px(一个长度值)。
以上这篇css3动画效果小结(推荐)就是www.887551.com分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持www.887551.com。
原文地址：/d/file/titlepic/5700997.html
