当前位置: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种预载动画效果

人气教程排行