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:<属性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过渡效果

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="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:top5sease,left5sease;
  19. -moz-transition:top5sease,left5sease;/*Firefox4*/
  20. -webkit-transition:top5sease,left5sease;/*SafariandChrome*/
  21. -o-transition:top5sease,left5sease;/*Opera*/
  22. }
  23. .btn{
  24. width:512px;
  25. margin:0auto;
  26. border:2pxsolid#e3e3e3;
  27. border-radius:5px;
  28. padding:10px;
  30. }
  31. .btnbutton{
  32. width:80px;
  33. height:40px;
  34. text-align:center;
  35. line-height:40px;
  36. margin-right:20px;
  37. }
  38. button:last-child{
  39. margin-right:0px;
  40. }
  41. </style>
  42. <script>
  43. window.onload=function(){
  44. vare1=document.getElementById("e1");
  45. vare2=document.getElementById("e2");
  46. vare3=document.getElementById("e3");
  47. vare4=document.getElementById("e4");
  48. vare5=document.getElementById("e5");
  49. varbox=document.getElementById("box");
  50. e1.onclick=function(){
  51. box.style.left=1000+"px";
  52. box.style.top=100+"px";
  53. box.style.transitionTimingFunction="ease";
  54. };
  55. e2.onclick=function(){
  56. box.style.right=0+"px";
  57. box.style.top=0+"px";
  58. box.style.transitionTimingFunction="liner";
  59. };
  60. e3.onclick=function(){
  61. box.style.right=1000+"px";
  62. box.style.top=100+"px";
  63. box.style.transitionTimingFunction="ease-in";
  64. };
  65. e4.onclick=function(){
  66. box.style.left=0+"px";
  67. box.style.top=0+"px";
  68. box.style.transitionTimingFunction="ease-out";
  69. };
  70. e5.onclick=function(){
  71. box.style.left=1000+"px";
  72. box.style.top=100+"px";
  73. box.style.transitionTimingFunction="ease-in-out";
  74. };
  76. }
  77. </script>
  78. </head>
  79. <body>
  80. <divid="box"></div>
  81. <br>
  82. <br>
  83. <br>
  84. <br>
  85. <br>
  86. <br>
  87. <hr>
  88. <br>
  89. <br>
  90. <br>
  91. <divclass="btn">
  92. <buttonid="e1">ease</button>
  93. <buttonid="e2">liner</button>
  94. <buttonid="e3">ease-in</button>
  95. <buttonid="e4">ease-out</button>
  96. <buttonid="e5">ease-in-out</button>
  97. </div>
  98. </body>
  99. </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% 动画的结束时间。

例如：

CSS Code复制内容到剪贴板
  1. 　　animation:mymove5sinfinite;
  3. 　　@keyframesmymove{
  5. 　　　　from{top:0px;}
  7. 　　　　to{top:200px;}
  9. 　　}

还可以这么写：

CSS Code复制内容到剪贴板
  1. 　　@keyframesmymove{
  3. 　　　　0%{top:0px;}
  5. 　　　　25%{top:200px;}
  7. 　　　　50%{top:100px;}
  9. 　　　　75%{top:200px;}
  11. 　　　　100%{top:0px;}
  13. 　　}

案例：
css3的animation效果

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <style>
  5. div
  6. {
  7. width:100px;
  8. height:100px;
  9. background:red;
  10. position:relative;
  11. animation:mymove5sinfinite;
  12. -moz-animation:mymove5sinfinite;/*Firefox*/
  13. -webkit-animation:mymove5sinfinite;/*SafariandChrome*/
  14. -o-animation:mymove5sinfinite;/*Opera*/
  15. }
  17. @keyframesmymove
  18. {
  19. from{top:0px;}
  20. to{top:200px;}
  21. }
  23. @-moz-keyframesmymove/*Firefox*/
  24. {
  25. from{top:0px;}
  26. to{top:200px;}
  27. }
  29. @-webkit-keyframesmymove/*SafariandChrome*/
  30. {
  31. from{top:0px;}
  32. to{top:200px;}
  33. }
  35. @-o-keyframesmymove/*Opera*/
  36. {
  37. from{top:0px;}
  38. to{top:200px;}
  39. }
  40. </style>
  41. </head>
  42. <body>
  44. <p><b>注释：</b>本例在InternetExplorer中无效。</p>
  46. <div></div>
  48. </body>
  49. </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:向屏幕外为正方向。

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

实例：

transform3D转换效果

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="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:20px520px;
  25. }
  26. .btn{
  27. width:300px;
  28. margin:0auto;
  29. border:2pxsolid#e3e3e3;
  30. border-radius:5px;
  31. padding:10px;
  33. }
  34. .btnbutton{
  35. width:80px;
  36. height:40px;
  37. text-align:center;
  38. line-height:40px;
  39. margin-right:20px;
  40. }
  41. button:last-child{
  42. margin-right:0px;
  43. }
  44. </style>
  45. <script>
  46. window.onload=function(){
  47. vartx=document.getElementById("tx");
  48. varty=document.getElementById("ty");
  49. vartz=document.getElementById("tz");
  50. varrx=document.getElementById("rx");
  51. varry=document.getElementById("ry");
  52. varrz=document.getElementById("rz");
  53. varbox=document.getElementById("box");
  54. tx.onclick=function(){
  55. box.style.transform="translateX(500px)";
  56. };
  57. ty.onclick=function(){
  58. box.style.transform="translateY(400px)"
  59. };
  60. rx.onclick=function(){
  61. box.style.transform="rotateX(30deg)"
  62. };
  63. ry.onclick=function(){
  64. box.style.transform="rotateY(30deg)"
  65. };
  66. rz.onclick=function(){
  67. box.style.transform="rotateZ(30deg)"
  68. };
  69. }
  70. </script>
  71. </head>
  72. <body>
  73. <divid="box"></div>
  74. <br>
  75. <br>
  76. <br>
  77. <br>
  78. <br>
  79. <br>
  80. <hr>
  81. <br>
  82. <br>
  83. <br>
  84. <p>translate(移动距离)</p>
  85. <divclass="btn">
  86. <buttonid="tx">translateX</button>
  87. <buttonid="ty">translateY</button>
  88. </div>
  89. <p>rotate(旋转角度)</p>
  90. <divclass="btn">
  91. <buttonid="rx">rotateX</button>
  92. <buttonid="ry">rotateY</button>
  93. <buttonid="rz">rotateZ</button>
  94. </div>
  95. </body>
  96. </html>

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

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

　　　　X轴：left、center、right.

　　　　Y轴：top、center、bottom.

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

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

原文地址：http://www.cnblogs.com/gaotenglong/archive/2016/07/24/5700997.html