当前位置：Gxlcms > css > css3动画效果总结分析

css3动画效果总结分析

时间：2021-07-01 10:21:17 帮助过：10人阅读

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个:

ease:缓慢开始，缓慢结束

liner:匀速

ease-in:缓慢开始

ease-out:缓慢结束

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

实例：
transition过渡效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>transition过渡效果</title>
  6.     <style>
  7.         *{   
  8.             margin: 0px;   
  9.             padding: 0px;   
  10.         }   
  11.         #box{   
  12.             width: 200px;   
  13.             height: 200px;   
  14.             background-color: chocolate;   
  15.             position: relative;   
  16.             left: 0px;   
  17.             top: 0px;   
  18.             transition: top 5s ease,left 5s ease ;   
  19.             -moz-transition: top 5s ease,left 5s ease ; /* Firefox 4 */   
  20.             -webkit-transition: top 5s ease,left 5s ease ; /* Safari and Chrome */   
  21.             -o-transition: top 5s ease,left 5s ease ; /* Opera */   
  22.         }   
  23.         .btn{   
  24.             width: 512px;   
  25.             margin: 0 auto;   
  26.             border: 2px solid #e3e3e3;   
  27.             border-radius: 5px;   
  28.             padding: 10px;   
  29.         }   
  30.         .btn button{   
  31.             width: 80px;   
  32.             height: 40px;   
  33.             text-align: center;   
  34.             line-height: 40px;   
  35.             margin-right: 20px;   
  36.         }   
  37.         button:last-child{   
  38.             margin-right: 0px;   
  39.         }   
  40.     </style>
  41.     <script>
  42.         window.onload=function(){   
  43.             var e1 = document.getElementById("e1");   
  44.             var e2 = document.getElementById("e2");   
  45.             var e3 = document.getElementById("e3");   
  46.             var e4 = document.getElementById("e4");   
  47.             var e5 = document.getElementById("e5");   
  48.             var box = document.getElementById("box");   
  49.             e1.onclick=function(){   
  50.                 box.style.left = 1000+"px";   
  51.                 box.style.top = 100+"px";   
  52.                 box.style.transitionTimingFunction="ease";   
  53.             };   
  54.             e2.onclick=function(){   
  55.                 box.style.right = 0+"px";   
  56.                 box.style.top = 0+"px";   
  57.                 box.style.transitionTimingFunction="liner";   
  58.             };   
  59.             e3.onclick=function(){   
  60.                 box.style.right = 1000+"px";   
  61.                 box.style.top = 100+"px";   
  62.                 box.style.transitionTimingFunction="ease-in";   
  63.             };   
  64.             e4.onclick=function(){   
  65.                 box.style.left = 0+"px";   
  66.                 box.style.top = 0+"px";   
  67.                 box.style.transitionTimingFunction="ease-out";   
  68.             };   
  69.             e5.onclick=function(){   
  70.                 box.style.left = 1000+"px";   
  71.                 box.style.top = 100+"px";   
  72.                 box.style.transitionTimingFunction="ease-in-out";   
  73.             };   
  74.         }   
  75.     </script>
  76. </head>
  77. <body>
  78.     <p id="box"></p>
  79.     <br>
  80.     <br>
  81.     <br>
  82.     <br>
  83.     <br>
  84.     <br>
  85.     <hr>
  86.     <br>
  87.     <br>
  88.     <br>
  89.     <p class="btn">
  90.         <button id="e1">ease</button>
  91.         <button id="e2">liner</button>
  92.         <button id="e3">ease-in</button>
  93.         <button id="e4">ease-out</button>
  94.         <button id="e5">ease-in-out</button>
  95.     </p>
  96. </body>
  97. </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% 动画的结束时间。

例如：

  1. 　　animation:mymove 5s infinite;   
  2. 　　@keyframes mymove{   
  3. 　　　　from{ top:0px; }   
  4. 　　　　to{ top:200px; }   
  5. 　　}

还可以这么写：

  1. 　　@keyframes mymove{   
  2. 　　　　0%{ top:0px; }   
  3. 　　　　25%{ top:200px; }   
  4. 　　　　50%{ top:100px; }   
  5. 　　　　75%{ top:200px; }   
  6. 　　　　100%{ top:0px; }   
  7. 　　}

案例：
css3的animation效果

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p   
  6. {   
  7. width:100px;   
  8. height:100px;   
  9. background:red;   
  10. position:relative;   
  11. animation:mymove 5s infinite;   
  12. -moz-animation:mymove 5s infinite; /* Firefox */   
  13. -webkit-animation:mymove 5s infinite; /* Safari and Chrome */   
  14. -o-animation:mymove 5s infinite; /* Opera */   
  15. }   
  16. @keyframes mymove   
  17. {   
  18. from {top:0px;}   
  19. to {top:200px;}   
  20. }   
  21. @-moz-keyframes mymove /* Firefox */   
  22. {   
  23. from {top:0px;}   
  24. to {top:200px;}   
  25. }   
  26. @-webkit-keyframes mymove /* Safari and Chrome */   
  27. {   
  28. from {top:0px;}   
  29. to {top:200px;}   
  30. }   
  31. @-o-keyframes mymove /* Opera */   
  32. {   
  33. from {top:0px;}   
  34. to {top:200px;}   
  35. }   
  36. </style>
  37. </head>
  38. <body>
  39. <p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
  40. <p></p>
  41. </body>
  42. </html>

3、设置3D场景（即transform）

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

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

使用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)

　　css3动画效果总结分析

transform：rotate（45deg）

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

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

rotateZ:向屏幕外为正方向。

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

实例：

transform3D转换效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>transform3D转换效果</title>
  6.     <style>
  7.         *{   
  8.             margin: 0px;   
  9.             padding: 0px;   
  10.         }   
  11.         #box{   
  12.             width: 200px;   
  13.             height: 200px;   
  14.             background-color: chocolate;   
  15.             position: relative;   
  16.             left: 0px;   
  17.             top: 0px;   
  18.             perspective:800px;   
  19.             perspective-origin:50% 50%;   
  20.             transform-style: preserve-3d;   
  21.             transform-origin:0% 100%;//以Y轴为旋转中心   
  22.         }   
  23.         p{   
  24.             margin:20px 520px;   
  25.         }   
  26.         .btn{   
  27.             width: 300px;   
  28.             margin: 0 auto;   
  29.             border: 2px solid #e3e3e3;   
  30.             border-radius: 5px;   
  31.             padding: 10px;   
  32.         }   
  33.         .btn button{   
  34.             width: 80px;   
  35.             height: 40px;   
  36.             text-align: center;   
  37.             line-height: 40px;   
  38.             margin-right: 20px;   
  39.         }   
  40.         button:last-child{   
  41.             margin-right: 0px;   
  42.         }   
  43.     </style>
  44.     <script>
  45.         window.onload=function(){   
  46.             var tx = document.getElementById("tx");   
  47.             var ty = document.getElementById("ty");   
  48.             var tz = document.getElementById("tz");   
  49.             var rx = document.getElementById("rx");   
  50.             var ry = document.getElementById("ry");   
  51.             var rz = document.getElementById("rz");   
  52.             var box = document.getElementById("box");   
  53.             tx.onclick=function(){   
  54.                 box.style.transform = "translateX(500px)";   
  55.             };   
  56.             ty.onclick=function(){   
  57.                 box.style.transform = "translateY(400px)"
  58.             };   
  59.             rx.onclick=function(){   
  60.                 box.style.transform = "rotateX(30deg)"
  61.             };   
  62.             ry.onclick=function(){   
  63.                 box.style.transform = "rotateY(30deg)"
  64.             };   
  65.             rz.onclick=function(){   
  66.                 box.style.transform = "rotateZ(30deg)"
  67.             };   
  68.         }   
  69.     </script>
  70. </head>
  71. <body>
  72.     <p id="box"></p>
  73.     <br>
  74.     <br>
  75.     <br>
  76.     <br>
  77.     <br>
  78.     <br>
  79.     <hr>
  80.     <br>
  81.     <br>
  82.     <br>
  83.     <p>translate(移动距离)</p>
  84.     <p class="btn">
  85.         <button id="tx">translateX</button>
  86.         <button id="ty">translateY</button>
  87.     </p>
  88.     <p>rotate(旋转角度)</p>
  89.     <p class="btn">
  90.         <button id="rx">rotateX</button>
  91.         <button id="ry">rotateY</button>
  92.         <button id="rz">rotateZ</button>
  93.     </p>
  94. </body>
  95. </html>

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

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

　　　　X轴：left、center、right.

　　　　Y轴：top、center、bottom.

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

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

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

相关文章：

如何用HTML5的Canvas制作3D动画效果

HTML5 Canvas动画效果图文代码演示

CSS3动画实现5种预载动画效果

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！