经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
css3 animation动画,你会用了吗? -cyy
来源:cnblogs  作者:陈莺莺呀  时间:2020/11/16 10:08:02  对本文有异议

animation关键帧使用介绍:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8. <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>
  9.  
  10. <style>
  11. *{
  12. margin:0;
  13. padding:0;
  14. box-sizing:border-box;
  15. }
  16. body{
  17. width:100vw;
  18. height:100vh;
  19. display:flex;
  20. justify-content: center;
  21. align-items: center;
  22. background-color: #34495e;
  23. }
  24. main{
  25. width:100px;
  26. height:100px;
  27. background:white;
  28. animation-name:hd;
  29. animation-duration:2s;
  30. }
  31. /* @keyframes hd{
  32. from{
  33. background:white;
  34. }
  35. to{
  36. background:#e91e63;
  37. }
  38. } */
  39. @keyframes hd{
  40. 0%{
  41. background:white;
  42. }
  43. 25%{
  44. transform:scale(2);
  45. }
  46. 65%{
  47. transform:scale(1);
  48. }
  49. 100%{
  50. background:#e91e63;
  51. }
  52. }
  53. </style>
  54. </head>
  55. <body>
  56. <main></main>
  57. </body>
  58. </html>

 

帧顺序与起始与终点帧特性:

顺序颠倒不影响;

起点帧不写的话,是使用元素默认的状态;

终点帧不设置的话,也是会回到元素默认的状态;

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8. <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>
  9.  
  10. <style>
  11. *{
  12. margin:0;
  13. padding:0;
  14. box-sizing:border-box;
  15. }
  16. body{
  17. width:100vw;
  18. height:100vh;
  19. display:flex;
  20. justify-content: center;
  21. align-items: center;
  22. background-color: #34495e;
  23. }
  24. main{
  25. width:100px;
  26. height:100px;
  27. background:white;
  28. animation-name:hd;
  29. animation-duration:2s;
  30. }
  31. @keyframes hd{
  32. 100%{
  33. background:#e91e63;
  34. }
  35. 0%{
  36. background:white;
  37. }
  38. }
  39. </style>
  40. </head>
  41. <body>
  42. <main></main>
  43. </body>
  44. </html>

 

移动的小方块:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8. <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>
  9.  
  10. <style>
  11. *{
  12. margin:0;
  13. padding:0;
  14. box-sizing:border-box;
  15. }
  16. body{
  17. width:100vw;
  18. height:100vh;
  19. display:flex;
  20. justify-content: center;
  21. align-items: center;
  22. background-color: #34495e;
  23. }
  24. main{
  25. width:400px;
  26. height:400px;
  27. border:1px solid #ddd;
  28. }
  29. div{
  30. width:100px;
  31. height:100px;
  32. background:pink;
  33. animation-name:hd;
  34. animation-duration:4s;
  35. }
  36. @keyframes hd{
  37. 25%{
  38. transform:translate(300px,0);
  39. }
  40. 50%{
  41. transform:translate(300px,300px);
  42. }
  43. 75%{
  44. transform:translate(0,300px);
  45. }
  46. }
  47. </style>
  48. </head>
  49. <body>
  50. <main>
  51. <div></div>
  52. </main>
  53. </body>
  54. </html>

 

同时声明关键帧规则:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8. <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>
  9.  
  10. <style>
  11. *{
  12. margin:0;
  13. padding:0;
  14. box-sizing:border-box;
  15. }
  16. body{
  17. width:100vw;
  18. height:100vh;
  19. display:flex;
  20. justify-content: center;
  21. align-items: center;
  22. background-color: #34495e;
  23. }
  24. main{
  25. width:400px;
  26. height:400px;
  27. border:1px solid #ddd;
  28. }
  29. div{
  30. width:100px;
  31. height:100px;
  32. background:pink;
  33. animation-name:hd;
  34. animation-duration:4s;
  35. }
  36. @keyframes hd{
  37. 25%{
  38. transform:translate(300px,0);
  39. }
  40. 50%{
  41. transform:translate(300px,300px);
  42. background:pink;
  43. border-radius:0;
  44. }
  45. 75%{
  46. transform:translate(0,300px);
  47. }
  48. 25%,75%{
  49. background:#abcdef;
  50. border-radius:50%;
  51. }
  52. }
  53. </style>
  54. </head>
  55. <body>
  56. <main>
  57. <div></div>
  58. </main>
  59. </body>
  60. </html>

 

多个动画使用与时间配置:

当动画数量超过定义的动画时间数量时,多出的动画会从头循环时间

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8. <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>
  9.  
  10. <style>
  11. *{
  12. margin:0;
  13. padding:0;
  14. box-sizing:border-box;
  15. }
  16. body{
  17. width:100vw;
  18. height:100vh;
  19. display:flex;
  20. justify-content: center;
  21. align-items: center;
  22. background-color: #34495e;
  23. }
  24. main{
  25. width:400px;
  26. height:400px;
  27. border:1px solid #ddd;
  28. }
  29. div{
  30. width:100px;
  31. height:100px;
  32. background:pink;
  33. animation-name:translate,background;
  34. animation-duration:4s;
  35. animation-duration:4s,2s;
  36. }
  37. @keyframes translate{
  38. 25%{
  39. transform:translate(300px,0);
  40. }
  41. 50%{
  42. transform:translate(300px,300px);
  43. }
  44. 75%{
  45. transform:translate(0,300px);
  46. }
  47. }
  48. @keyframes background{
  49. 25%{
  50. background:#c9e91e;
  51. }
  52. 50%{
  53. background:#ffc107;
  54. }
  55. 75%{
  56. background:#2196f3;
  57. }
  58. }
  59. </style>
  60. </head>
  61. <body>
  62. <main>
  63. <div></div>
  64. </main>
  65. </body>
  66. </html>

 

属性重叠对动画的影响:

当属性重叠时,前面的会被后面的覆盖

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8. <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>
  9.  
  10. <style>
  11. *{
  12. margin:0;
  13. padding:0;
  14. box-sizing:border-box;
  15. }
  16. body{
  17. width:100vw;
  18. height:100vh;
  19. display:flex;
  20. justify-content: center;
  21. align-items: center;
  22. background-color: #34495e;
  23. }
  24. main{
  25. width:400px;
  26. height:400px;
  27. border:1px solid #ddd;
  28. }
  29. div{
  30. width:100px;
  31. height:100px;
  32. background:pink;
  33. animation-name:translate,background;
  34. animation-duration:4s;
  35. animation-duration:4s,2s;
  36. }
  37. @keyframes translate{
  38. 25%{
  39. transform:translate(300px,0);
  40. }
  41. 50%{
  42. transform:translate(300px,300px);
  43. }
  44. 75%{
  45. transform:translate(0,300px);
  46. }
  47. }
  48. @keyframes background{
  49. 25%{
  50. background:#c9e91e;
  51. transform:translate(300px,0);
  52. }
  53. 50%{
  54. background:#ffc107;
  55. }
  56. 75%{
  57. background:#2196f3;
  58. }
  59. }
  60. </style>
  61. </head>
  62. <body>
  63. <main>
  64. <div></div>
  65. </main>
  66. </body>
  67. </html>

 

多动画控制移动端引导背景页:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8. <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>
  9.  
  10. <style>
  11. *{
  12. margin:0;
  13. padding:0;
  14. box-sizing:border-box;
  15. }
  16. body{
  17. background-color: dimgrey;
  18. }
  19. main{
  20. width:100vw;
  21. height:100vh;
  22. background-color: #34495e;
  23. transform:scale(0);
  24. animation-name:scale,background;
  25. animation-duration:2s;
  26. animation-fill-mode:forwards;
  27. display:flex;
  28. justify-content: center;
  29. align-items: center;
  30. }
  31. main::after{
  32. content:'CYY';
  33. color:white;
  34. font-size:2em;
  35. opacity:0;
  36. animation-name:opacity;
  37. animation-duration:1s;
  38. animation-delay:2s;
  39. animation-fill-mode:forwards;
  40. }
  41. @keyframes opacity{
  42. to{
  43. opacity:.8;
  44. }
  45. }
  46. @keyframes scale{
  47. 25%{
  48. transform:scale(.5);
  49. }
  50. 50%{
  51. transform:scale(1) rotate(360deg);
  52. }
  53. 75%{
  54. transform:scale(.5);
  55. }
  56. 100%{
  57. transform:scale(1);
  58. }
  59. }
  60. @keyframes background{
  61. 25%{
  62. background:#c9e91e;
  63. }
  64. 50%{
  65. background:#ffc107;
  66. }
  67. 75%{
  68. background:#2196f3;
  69. }
  70. 100%{
  71. background:#f48eb1;
  72. }
  73. }
  74. </style>
  75. </head>
  76. <body>
  77. <main>
  78. </main>
  79. </body>
  80. </html>

 

动画属性中间值详解:

有中间值的属性才可以进行动画,否则就是突变

 

animation-iteration-count 控制动画播放次数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8. <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>
  9.  
  10. <style>
  11. *{
  12. margin:0;
  13. padding:0;
  14. box-sizing:border-box;
  15. }
  16. body{
  17. width:100vw;
  18. height:100vh;
  19. display:flex;
  20. justify-content: center;
  21. align-items: center;
  22. background-color: #34495e;
  23. }
  24. main{
  25. width:400px;
  26. height:400px;
  27. border:1px solid #ddd;
  28. }
  29. div{
  30. width:100px;
  31. height:100px;
  32. background:pink;
  33. animation-name:translate,background;
  34. animation-duration:2s;
  35. animation-iteration-count:2;
  36. animation-iteration-count:2,1;
  37. /* 无限循环 */
  38. animation-iteration-count:infinite;
  39. }
  40. @keyframes translate{
  41. 25%{
  42. transform:translate(300px,0);
  43. }
  44. 50%{
  45. transform:translate(300px,300px);
  46. }
  47. 75%{
  48. transform:translate(0,300px);
  49. }
  50. }
  51. @keyframes background{
  52. 25%{
  53. background:#c9e91e;
  54. }
  55. 50%{
  56. background:#ffc107;
  57. }
  58. 75%{
  59. background:#2196f3;
  60. }
  61. }
  62. </style>
  63. </head>
  64. <body>
  65. <main>
  66. <div></div>
  67. </main>
  68. </body>
  69. </html>

 

使用变形绘制小心心:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8. <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>
  9.  
  10. <style>
  11. *{
  12. margin:0;
  13. padding:0;
  14. box-sizing:border-box;
  15. }
  16. body{
  17. width:100vw;
  18. height:100vh;
  19. display:flex;
  20. justify-content: center;
  21. align-items: center;
  22. background-color: #34495e;
  23. }
  24. .heart{
  25. width:200px;
  26. height:200px;
  27. background:#e93e1e;
  28. position:relative;
  29. transform:rotate(45deg) scale(.5);
  30. animation-name:hd;
  31. animation-duration:2s;
  32. animation-iteration-count:infinite;
  33. opacity:.5;
  34. }
  35. @keyframes hd{
  36. 20%{
  37. transform:rotate(45deg) scale(1);
  38. opacity:1;
  39. }
  40. 40%{
  41. transform:rotate(45deg) scale(.5);
  42. opacity:.5;
  43. }
  44. 60%{
  45. transform:rotate(45deg) scale(1);
  46. opacity:1;
  47. }
  48. 80%{
  49. transform:rotate(45deg) scale(.5);
  50. opacity:.5;
  51. }
  52. 100%{
  53. transform:rotate(45deg) scale(1);
  54. opacity:1;
  55. }
  56. }
  57. .heart::before{
  58. content:'';
  59. width:200px;
  60. height:200px;
  61. background:#e93e1e;
  62. transform:translateX(-100px);
  63. position:absolute;
  64. border-radius:50%;
  65. }
  66. .heart::after{
  67. content:'';
  68. width:200px;
  69. height:200px;
  70. background:#e93e1e;
  71. transform:translateY(-100px);
  72. position:absolute;
  73. border-radius:50%;
  74. }
  75. </style>
  76. </head>
  77. <body>
  78. <div class="heart"></div>
  79. </body>
  80. </html>

 

animation-direction 控制动画方向的四种模式:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8. <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>
  9.  
  10. <style>
  11. *{
  12. margin:0;
  13. padding:0;
  14. box-sizing:border-box;
  15. }
  16. body{
  17. width:100vw;
  18. height:100vh;
  19. display:flex;
  20. justify-content: center;
  21. align-items: center;
  22. background-color: #34495e;
  23. }
  24. ul{
  25. width:400px;
  26. height:100px;
  27. list-style:none;
  28. display:flex;
  29. }
  30. li{
  31. color:#e93e1e;
  32. flex:1;
  33. border:1px solid #ddd;
  34. display:flex;
  35. justify-content: center;
  36. position: relative;;
  37. }
  38. li span{
  39. position:absolute;
  40. bottom:0;
  41. }
  42. li:nth-child(1)>i{
  43. /* 默认值normal,不加也可以 */
  44. /* 正向,循环时突变 */
  45. animation-direction:normal;
  46. }
  47. li:nth-child(2)>i{
  48. /* 反向,循环时突变 */
  49. animation-direction:reverse;
  50. }
  51. li:nth-child(3)>i{
  52. /* 正向,循环时过渡 */
  53. animation-direction:alternate;
  54. }
  55. li:nth-child(4)>i{
  56. /* 反向,循环时过渡 */
  57. animation-direction:alternate-reverse;
  58. }
  59. i.fa{
  60. font-size:3em;
  61. animation-name:scale;
  62. animation-duration:2s;
  63. animation-iteration-count:infinite;
  64. position:absolute;
  65. }
  66. @keyframes scale{
  67. to{
  68. transform:scale(2);
  69. }
  70. }
  71. </style>
  72. </head>
  73. <body>
  74. <ul>
  75. <li><i class="fa fa-heart" aria-hidden="true"></i><span>normal</span></li>
  76. <li><i class="fa fa-heart" aria-hidden="true"></i><span>reverse</span></li>
  77. <li><i class="fa fa-heart" aria-hidden="true"></i><span>alternate</span></li>
  78. <li><i class="fa fa-heart" aria-hidden="true"></i><span>alternate-reverse</span></li>
  79. </ul>
  80. </body>
  81. </html>

 

弹跳小球体验动画轮换衔接:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  8. <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>
  9.  
  10. <style>
  11. *{
  12. margin:0;
  13. padding:0;
  14. box-sizing:border-box;
  15. }
  16. body{
  17. width:100vw;
  18. height:100vh;
  19. display:flex;
  20. justify-content: center;
  21. align-items: center;
  22. background-color: #34495e;
  23. }
  24. div{
  25. width:100px;
  26. height:100px;
  27. background:radial-gradient(at center,#ffeb3b,#ff893b);
  28. border-radius:50%;
  29. animation-name:ball;
  30. animation-duration:.7s;
  31. animation-iteration-count:infinite;
  32. animation-direction:alternate-reverse;
  33. }
  34. section{
  35. width:200px;
  36. height:40px;
  37. background:rgba(0,0,0,.3);
  38. border-radius:50%;
  39. position:absolute;
  40. transform:translateY(50px);
  41. z-index:-1;
  42. filter:blur(5px);
  43. animation-name:shadow;
  44. animation-duration:.7s;
  45. animation-iteration-count:infinite;
  46. animation-direction:alternate-reverse;
  47. }
  48. @keyframes shadow{
  49. to{
  50. height:20px;
  51. background:rgba(0,0,0,.1);
  52. filter:blur(35px);
  53. }
  54. }
  55. @keyframes ball{
  56. to{
  57. transform:translateY(-300px);
  58. }
  59. }
  60. </style>
  61. </head>
  62. <body>
  63. <div></div>
  64. <section></section>
  65. </body>
  66. </html>

原文链接:http://www.cnblogs.com/chenyingying0/p/13963456.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号