经验首页 前端设计 程序设计 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.         }
  40.     </style>
  41. </head>
  42. <body>
  43.     <main></main>
  44. </body>
  45. </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.   
  79.     </main>
  80. </body>
  81. </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.         }
  36.         @keyframes hd{
  37.             20%{
  38.                 transform:rotate(45deg) scale(1);
  39.                 opacity:1;
  40.             }
  41.             40%{
  42.                 transform:rotate(45deg) scale(.5);
  43.                 opacity:.5;
  44.             }
  45.             60%{
  46.                 transform:rotate(45deg) scale(1);
  47.                 opacity:1;
  48.             }
  49.             80%{
  50.                 transform:rotate(45deg) scale(.5);
  51.                 opacity:.5;
  52.             }
  53.             100%{
  54.                 transform:rotate(45deg) scale(1);
  55.                 opacity:1;
  56.             }
  57.         }
  58.         .heart::before{
  59.             content:'';
  60.             width:200px;
  61.             height:200px;
  62.             background:#e93e1e;
  63.             transform:translateX(-100px);
  64.             position:absolute;
  65.             border-radius:50%;
  66.         }
  67.         .heart::after{
  68.             content:'';
  69.             width:200px;
  70.             height:200px;
  71.             background:#e93e1e;
  72.             transform:translateY(-100px);
  73.             position:absolute;
  74.             border-radius:50%;
  75.         }
  76.     </style>
  77. </head>
  78. <body>
  79.     <div class="heart"></div>
  80. </body>
  81. </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.         
  25.         div{
  26.             width:100px;
  27.             height:100px;
  28.             background:radial-gradient(at center,#ffeb3b,#ff893b);
  29.             border-radius:50%;
  31.             animation-name:ball;
  32.             animation-duration:.7s;
  33.             animation-iteration-count:infinite;
  34.             animation-direction:alternate-reverse;
  35.         }
  36.         section{
  37.             width:200px;
  38.             height:40px;
  39.             background:rgba(0,0,0,.3);
  40.             border-radius:50%;
  41.             position:absolute;
  42.             transform:translateY(50px);
  43.             z-index:-1;
  44.             filter:blur(5px);
  46.             animation-name:shadow;
  47.             animation-duration:.7s;
  48.             animation-iteration-count:infinite;
  49.             animation-direction:alternate-reverse;
  50.         }
  51.         @keyframes shadow{
  52.             to{
  53.                 height:20px;
  54.                 background:rgba(0,0,0,.1);
  55.                 filter:blur(35px);
  56.             }
  57.         }
  58.         @keyframes ball{
  59.             to{
  60.                 transform:translateY(-300px);
  61.             }
  62.         }
  63.     </style>
  64. </head>
  65. <body>
  66.     <div></div>
  67.     <section></section>
  68. </body>
  69. </html>

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

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

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站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号