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

延迟属性与帧延迟效果对比：

  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:#ff893b;
  30.             animation-name:scale;
  31.             animation-duration:1s;
  32.             animation-delay:2s;
  33.             animation-iteration-count:infinite;
  34.         }
  35.         @keyframes scale{
  36.             to{
  37.                 transform:scale(3);
  38.             }
  39.         }
  40.     </style>
  41. </head>
  42. <body>
  43.     <div></div>
  44.     
  45. </body>
  46. </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:grid;
  20.             grid-template-rows:10vh 1fr 10vh;
  21.         }
  22.         header{
  23.             background:#ffeb3b;
  24.             display:flex;
  25.             justify-content:center;
  26.             align-items:center;
  27.             animation-name:translate;
  28.             animation-duration:.5s;
  29.         }
  30.         main{
  31.             background:#abcdef;
  32.             display:flex;
  33.             flex-direction:column;
  34.             justify-content:center;
  35.             align-items:center;
  36.             animation-name:rotate;
  37.             animation-duration:.5s;
  38.             animation-delay:1s;
  39.             animation-fill-mode:backwards;
  40.         }
  41.         div{
  42.             border-radius:10px;
  43.             padding:10px;
  44.             width:80%;
  45.             opacity:.8;
  46.             box-shadow:0 0 10px rgba(0,0,0,.5);
  47.             color:white;
  48.             
  49.         }
  50.         div:nth-child(1){
  51.             transform:translateY(-50px);
  52.             background:#7b8422;
  53.         }
  54.         div:nth-child(2){
  55.             background:indianred;
  56.         }
  57.         footer{
  58.             background:#878681;
  59.             display:flex;
  60.             justify-content:center;
  61.             align-items:center;
  62.             animation-name:rotate;
  63.             animation-duration:.5s;
  64.             animation-delay:.5s;
  65.             animation-fill-mode:backwards;
  66.         }
  67.         .opacity{
  68.             animation-name:opacity;
  69.             animation-duration:.5s;
  70.             animation-fill-mode:backwards;
  71.         }
  72.         .s1-5{
  73.             animation-delay:1.5s;
  74.         }
  75.         .s2{
  76.             animation-delay:2s;
  77.         }
  78.         @keyframes translate{
  79.             from{
  80.                 transform:translateX(-100vw);
  81.             }
  82.             to{
  83.                 transform:translateX(0);
  84.             }
  85.         }
  86.         @keyframes rotate{
  87.             from{
  88.                 transform:scale(0) rotate(360deg);
  89.             }
  90.             to{
  91.                 transform:scale(1) rotate(0deg);
  92.             }
  93.         }
  94.         @keyframes opacity{
  95.             from{
  96.                 opacity:0;
  97.             }
  98.             to{
  99.                 opacity:1;
  100.             }
  101.         }
  103.         
  104.     </style>
  105. </head>
  106. <body>
  107.     <header>header</header>
  108.     <main>main
  109.         <div class="opacity s1-5">我们的目标是提供这样一个仓库，让它尽可能全面收录优秀的开源库，并免费为之提供 CDN 加速服务，使之有更好的访问速度和稳定的环境。同时，我们也提供开源库源接入的入口，让所有人都可以提交开源库，包括 JavaScript、CSS、图片和 swf 等静态文件。</div>
  110.         <div class="opacity s2">我们的目标是提供这样一个仓库，让它尽可能全面收录优秀的开源库，并免费为之提供 CDN 加速服务，使之有更好的访问速度和稳定的环境。同时，我们也提供开源库源接入的入口，让所有人都可以提交开源库，包括 JavaScript、CSS、图片和 swf 等静态文件。</div>
  111.     </main>
  112.     <footer>footer</footer>
  113. </body>
  114. </html>

 

也可以使用动画库：swiper  animate.css

 

贝塞尔曲线控制动画速率：

  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.             background:#57596a;
  21.             display:grid;
  22.             /* 栅格定义一行一列 */
  23.             grid-template:1fr/1fr;
  24.             
  25.         }
  26.         ul{
  27.             display:grid;
  28.             /* 栅格定义一行五列 */
  29.             grid-template:1fr/repeat(6,1fr);
  30.             list-style:none;
  31.             gap:10px;
  32.         }
  33.         li{
  34.             background:orange;
  35.             height:10vh;
  37.             animation-name:translate;
  38.             animation-duration:2s;
  39.             animation-iteration-count:infinite;
  40.         }
  41.         li:nth-child(1){
  42.             animation-timing-function:ease;
  43.         }
  44.         li:nth-child(2){
  45.             animation-timing-function:ease-in;
  46.         }
  47.         li:nth-child(3){
  48.             animation-timing-function:ease-out;
  49.         }
  50.         li:nth-child(4){
  51.             animation-timing-function:ease-in-out;
  52.         }
  53.         li:nth-child(5){
  54.             animation-timing-function:linear;
  55.         }
  56.         li:nth-child(6){
  57.             animation-timing-function:cubic-bezier(.17,.67,.92,.1);
  58.         }
  59.         @keyframes translate{
  60.             to{
  61.                 transform:translateY(90vh);
  62.             }
  63.         }
  64.     </style>
  65. </head>
  66. <body>
  67.     <ul>
  68.         <li>ease</li>
  69.         <li>ease-in</li>
  70.         <li>ease-out</li>
  71.         <li>ease-in-out</li>
  72.         <li>linear</li>
  73.         <li>cubic-bezier</li>
  74.     </ul>
  75. </body>
  76. </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.             background-color: #34495e;
  20.             /* 栅格，一行五列 */
  21.             display:grid;
  22.             grid-template:1fr/repeat(5,1fr);
  23.         }
  24.         
  25.         div{
  26.             /* 栅格列的定位 */
  27.             grid-column:3/4;
  28.             justify-self:center;
  30.             background:orange;
  31.             height:50px;
  32.             width:50px;
  33.             border-radius:50%;
  35.             animation-name:move;
  36.             animation-duration:4s;
  37.             animation-iteration-count:infinite;
  38.             animation-fill-mode:forwards;
  39.         }
  40.         @keyframes move{
  41.             /* 向上弹的帧 */
  42.             0%{
  43.                 transform:translateY(0vh);
  44.             }
  45.             30%{
  46.                 transform:translateY(10vh);
  47.             }
  48.             60%{
  49.                 transform:translateY(40vh);
  50.             }
  51.             80%{
  52.                 transform:translateY(60vh);
  53.             }
  54.             95%{
  55.                 transform:translateY(75vh);
  56.             }
  57.             0%,30%,60%,80%,95%{
  58.                 animation-timing-function:ease-in; 
  59.             }
  60.             /* 向下落的帧 */
  61.             15%,45%,75%,85%,100%{
  62.                 transform:translateY(90vh);
  63.                 animation-timing-function:ease-out; 
  64.             }
  65.         }
  66.     </style>
  67. </head>
  68. <body>
  69.     <div></div>
  70. </body>
  71. </html>

 

盒阴影偏移技巧与currentColor特性：

currentColor 指当前定义的color的颜色

 

提交按钮加载动画效果：

  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:grid;
  20.             grid-template:1fr/1fr;
  21.         }
  22.         
  23.         button{
  24.             align-self:center;
  25.             justify-self:center;
  27.             background:#f3f3f3;
  28.             height:50px;
  29.             width:200px;
  31.             color:#4e505f;
  32.             border:1px solid #ddd;
  33.         }
  34.         button::after{
  35.             content:'';
  36.             width:3px;
  37.             height:3px;
  38.             display:inline-block; /*块元素才能加阴影*/
  39.             box-shadow:3px 0 0 currentColor,9px 0 0 currentColor,15px 0 0 currentColor;
  41.             animation-name:hd;
  42.             animation-duration:1s;
  43.             animation-iteration-count:infinite;
  44.         }
  45.         @keyframes hd{
  46.             from{
  47.                 box-shadow:none;
  48.             }
  49.             30%{
  50.                 box-shadow:3px 0 0 currentColor;
  51.             }
  52.             60%{
  53.                 box-shadow:3px 0 0 currentColor,9px 0 0 currentColor;
  54.             }
  55.             90%{
  56.                 box-shadow:3px 0 0 currentColor,9px 0 0 currentColor,15px 0 0 currentColor;
  57.             }
  58.         }
  59.     </style>
  60. </head>
  61. <body>
  62.     <button>提交</button>
  63. </body>
  64. </html>

 

steps步进动画规则详解：

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  7.  
  8.     <style>
  9.         *{
  10.             margin:0;
  11.             padding:0;
  12.             box-sizing:border-box;
  13.             list-style:none;
  14.         }
  15.         body{
  16.             width:100vw;
  17.             height:100vh;
  18.             display:grid;
  19.             background:#01547a;
  20.         }
  21.         main{
  22.             width:400px;
  23.             height:200px;
  24.             background:red;
  25.             justify-self:center;
  26.             align-self:center;
  27.             display:grid;
  28.             grid-template:repeat(2,1fr)/repeat(4,1fr);
  29.         }
  30.         div{
  31.             text-align:center;
  32.             background:#ffeb3b;
  33.             border:1px solid #01547a;
  34.             box-sizing:border-box;
  35.             position:relative;
  36.         }
  37.         div:nth-child(1)::before{
  38.             content:'START';
  39.             width:100px;
  40.             height:100px;
  41.             background:pink;
  42.             position:absolute;
  43.             top:0;
  44.             left:0;
  46.             animation-timing-function:steps(4,start);
  47.         }
  48.         div:nth-child(5)::before{
  49.             content:'END';
  50.             width:100px;
  51.             height:100px;
  52.             background:lightgreen;
  53.             position:absolute;
  54.             top:0;
  55.             left:0;
  57.             animation-timing-function:steps(4,end);
  58.         }
  59.         div:nth-child(1)::before,
  60.         div:nth-child(5)::before{
  61.             animation-name:hd;
  62.             animation-duration:2s;
  63.             animation-iteration-count:infinite;
  64.             z-index:2;
  65.         }
  66.         @keyframes hd{
  67.             to{
  68.                 transform:translateX(400px);
  69.             }
  70.         }
  71.         
  73.     </style>
  74. </head>
  75. <body>
  76.     <main>
  77.         <div>1</div>
  78.         <div>2</div>
  79.         <div>3</div>
  80.         <div>4</div>
  81.         <div>5</div>
  82.         <div>6</div>
  83.         <div>7</div>
  84.         <div>8</div>
  85.     </main>
  86. </body>
  87. </html>

 

step-start与step-end单步处理：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  7.  
  8.     <style>
  9.         *{
  10.             margin:0;
  11.             padding:0;
  12.             box-sizing:border-box;
  13.             list-style:none;
  14.         }
  15.         body{
  16.             width:100vw;
  17.             height:100vh;
  18.             display:grid;
  19.             background:#01547a;
  20.         }
  21.         main{
  22.             width:400px;
  23.             height:200px;
  24.             background:red;
  25.             justify-self:center;
  26.             align-self:center;
  27.             display:grid;
  28.             grid-template:repeat(2,1fr)/repeat(4,1fr);
  29.         }
  30.         div{
  31.             text-align:center;
  32.             background:#ffeb3b;
  33.             border:1px solid #01547a;
  34.             box-sizing:border-box;
  35.             position:relative;
  36.         }
  37.         div:nth-child(1)::before{
  38.             content:'START';
  39.             width:100px;
  40.             height:100px;
  41.             background:pink;
  42.             position:absolute;
  43.             top:0;
  44.             left:0;
  46.             animation-timing-function:steps(1,start);
  47.             animation-timing-function:step-start;
  48.         }
  49.         div:nth-child(5)::before{
  50.             content:'END';
  51.             width:100px;
  52.             height:100px;
  53.             background:lightgreen;
  54.             position:absolute;
  55.             top:0;
  56.             left:0;
  58.             animation-timing-function:steps(1,end);
  59.             animation-timing-function:step-end;
  60.         }
  61.         div:nth-child(1)::before,
  62.         div:nth-child(5)::before{
  63.             animation-name:hd;
  64.             animation-duration:2s;
  65.             animation-iteration-count:infinite;
  66.             z-index:2;
  67.         }
  68.         @keyframes hd{
  69.             50%{
  70.                 transform:translateX(100px);
  71.             }
  72.             to{
  73.                 transform:translateX(0);
  74.             }
  75.         }
  76.         
  78.     </style>
  79. </head>
  80. <body>
  81.     <main>
  82.         <div>1</div>
  83.         <div>2</div>
  84.         <div>3</div>
  85.         <div>4</div>
  86.         <div>5</div>
  87.         <div>6</div>
  88.         <div>7</div>
  89.         <div>8</div>
  90.     </main>
  91. </body>
  92. </html>

 

animation-play-state 控制动画播放与暂停：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  7.  
  8.     <style>
  9.         *{
  10.             margin:0;
  11.             padding:0;
  12.             box-sizing:border-box;
  13.             list-style:none;
  14.         }
  15.         body{
  16.             width:100vw;
  17.             height:100vh;
  18.             display:grid;
  19.             background:#01547a;
  20.         }
  21.         main{
  22.             width:400px;
  23.             height:200px;
  24.             background:red;
  25.             justify-self:center;
  26.             align-self:center;
  27.             display:grid;
  28.             grid-template:repeat(2,1fr)/repeat(4,1fr);
  29.         }
  30.         div{
  31.             text-align:center;
  32.             background:#ffeb3b;
  33.             border:1px solid #01547a;
  34.             box-sizing:border-box;
  35.             position:relative;
  36.         }
  37.         div:nth-child(1)::before{
  38.             content:'START';
  39.             width:100px;
  40.             height:100px;
  41.             background:pink;
  42.             position:absolute;
  43.             top:0;
  44.             left:0;
  46.             animation-timing-function:steps(4,start);
  47.         }
  48.         div:nth-child(5)::before{
  49.             content:'END';
  50.             width:100px;
  51.             height:100px;
  52.             background:lightgreen;
  53.             position:absolute;
  54.             top:0;
  55.             left:0;
  57.             animation-timing-function:steps(4,end);
  58.         }
  59.         div:nth-child(1)::before,
  60.         div:nth-child(5)::before{
  61.             animation-name:hd;
  62.             animation-duration:2s;
  63.             animation-iteration-count:infinite;
  64.             z-index:2;
  66.             animation-play-state:paused;
  67.         }
  68.         main:hover div::before{
  69.             animation-play-state:running;
  70.         }
  71.         @keyframes hd{
  72.             to{
  73.                 transform:translateX(400px);
  74.             }
  75.         }
  76.         
  78.     </style>
  79. </head>
  80. <body>
  81.     <main>
  82.         <div>1</div>
  83.         <div>2</div>
  84.         <div>3</div>
  85.         <div>4</div>
  86.         <div>5</div>
  87.         <div>6</div>
  88.         <div>7</div>
  89.         <div>8</div>
  90.     </main>
  91. </body>
  92. </html>

 

纯css3的网站轮换图：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  7.  
  8.     <style>
  9.         *{
  10.             margin:0;
  11.             padding:0;
  12.             box-sizing:border-box;
  13.             list-style:none;
  14.         }
  15.         body{
  16.             width:100vw;
  17.             height:100vh;
  18.             display:grid;
  19.             background:#01547a;
  20.         }
  21.         main{
  22.             width:400px;
  23.             height:200px;
  24.             justify-self:center;
  25.             align-self:center;
  26.             overflow:hidden;
  27.             position:relative;
  28.         }
  29.         section{
  30.             width:1600px;
  31.             height:200px;
  32.             display:grid;
  33.             grid-template:1fr/repeat(4,400px);
  34.             animation-name:slide;
  35.             animation-duration:4s;
  36.             animation-timing-function:steps(4,end);
  37.             animation-iteration-count:infinite;
  38.         }
  39.         section:hover,
  40.         section:hover+ul::after{
  41.             /* 鼠标移入时轮播图暂停 */
  42.             animation-play-state:paused;
  43.         }
  44.         div{
  45.             overflow:hidden;
  46.         }
  47.         img{
  48.             width:100%;
  49.         }
  50.         @keyframes slide{
  51.             to{
  52.                 transform:translateX(-1600px);
  53.             }
  54.         }
  55.         @keyframes num{
  56.             to{
  57.                 transform:translateX(200px);
  58.             }
  59.         }
  60.         ul{
  61.             position:absolute;
  62.             left:50%;
  63.             bottom:20px;
  64.             transform:translateX(-50%);
  65.             display:grid;
  66.             grid-template:1fr/repeat(4,1fr);
  67.             list-style:none;
  68.             width:200px;
  69.             justify-items:center;
  70.         }
  71.         ul::after{
  72.             content:'';
  73.             position:absolute;
  74.             left:10px;
  75.             background:#f44336;
  76.             top:0;
  77.             width:30px;
  78.             height:30px;
  79.             border-radius:50%;
  80.             z-index:-1;
  82.             animation-name:num;
  83.             animation-duration:4s;
  84.             animation-timing-function:steps(4,end);
  85.             animation-iteration-count:infinite;
  86.         }
  87.         li{
  88.             width:30px;
  89.             height:30px;
  90.             border-radius:50%;
  91.             background:rgba(0,0,0,.5);
  92.             display:grid;
  93.             justify-items:center;
  94.             align-items:center;
  95.             color:white;
  96.         }
  97.  
  98.     </style>
  99. </head>
  100. <body>
  101.     <main>
  102.         <section>
  103.             <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605196795432&di=c5722991665c7cbecde51004044a3480&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202006%2F15%2F20200615144517_nXCSe.thumb.400_0.jpeg" alt=""></div>
  104.             <div><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1352056604,3886928601&fm=26&gp=0.jpg" alt=""></div>
  105.             <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605196816727&di=0fe20015abb70cebcb629469edb2ce00&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F11%2F20200211120916_SXQzf.thumb.400_0.jpeg" alt=""></div>
  106.             <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605196847395&di=484b7f335e5359c649c7ce0c815e95d5&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F27%2F20200227181512_vtype.thumb.400_0.jpeg" alt=""></div>
  107.         </section>
  108.         <ul>
  109.             <li>1</li>
  110.             <li>2</li>
  111.             <li>3</li>
  112.             <li>4</li>
  113.         </ul>
  114.     </main>
  115. </body>
  116. </html>

 

animation-fill-mode 动画填充模式：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  7.  
  8.     <style>
  9.         *{
  10.             margin:0;
  11.             padding:0;
  12.             box-sizing:border-box;
  13.             list-style:none;
  14.         }
  15.         body{
  16.             width:100vw;
  17.             height:100vh;
  18.             display:grid;
  19.             background:#01547a;
  20.         }
  21.         ul{
  22.             list-style:none;
  23.             width:400px;
  24.             height:100px;
  25.             justify-self:center;
  26.             align-self:center;
  27.             display:grid;
  28.             grid-template:1fr/repeat(4,1fr);
  29.         }
  30.         li{
  31.             width:100px;
  32.             height:100px;
  33.             background:orange;
  34.             border-radius:50%;
  35.             display:grid;
  36.             justify-items:center;
  37.             align-items:center;
  39.             animation-name:hd;
  40.             animation-duration:2s;
  41.             animation-delay:2s;
  42.         }
  43.         li:nth-child(1){
  44.             /* 延迟过程中使用元素默认的效果，结束之后回到默认的效果 */
  45.             animation-fill-mode:normal;
  46.         }
  47.         li:nth-child(2){
  48.             /* 延迟过程中使用起始帧的效果，结束之后回到默认的效果 */
  49.             animation-fill-mode:backwards;
  50.         }
  51.         li:nth-child(3){
  52.              /* 延迟过程中使用元素默认的效果，结束之后回到结束帧 */
  53.             animation-fill-mode:forwards;
  54.         }
  55.         li:nth-child(4){
  56.             /* 延迟过程中使用起始帧的效果，结束之后回到结束帧 */
  57.             animation-fill-mode:both;
  58.         }
  59.         @keyframes hd{
  60.             from{
  61.                 transform:scale(0);
  62.             }
  63.             to{
  64.                 transform:scale(1);
  65.                 background:lightblue;
  66.             }
  67.         }
  68.     </style>
  69. </head>
  70. <body>
  71.     <ul>
  72.         <li>normal</li>
  73.         <li>backwards</li>
  74.         <li>forwards</li>
  75.         <li>both</li>
  76.     </ul>
  77. </body>
  78. </html>

 

animation动画组合定义语法：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  7.  
  8.     <style>
  9.         *{
  10.             margin:0;
  11.             padding:0;
  12.             box-sizing:border-box;
  13.             list-style:none;
  14.         }
  15.         body{
  16.             width:100vw;
  17.             height:100vh;
  18.             display:grid;
  19.             background:#01547a;
  20.         }
  21.         ul{
  22.             list-style:none;
  23.             width:400px;
  24.             height:100px;
  25.             justify-self:center;
  26.             align-self:center;
  27.             display:grid;
  28.             grid-template:1fr/repeat(4,1fr);
  29.         }
  30.         li{
  31.             width:100px;
  32.             height:100px;
  33.             background:orange;
  34.             border-radius:50%;
  35.             display:grid;
  36.             justify-items:center;
  37.             align-items:center;
  38.         }
  39.         li:nth-child(1){
  40.             /* 延迟过程中使用元素默认的效果，结束之后回到默认的效果 */
  41.             animation:hd normal 2s 2s;
  42.         }
  43.         li:nth-child(2){
  44.             /* 延迟过程中使用起始帧的效果，结束之后回到默认的效果 */
  45.             animation:hd backwards 2s 2s;
  46.         }
  47.         li:nth-child(3){
  48.              /* 延迟过程中使用元素默认的效果，结束之后回到结束帧 */
  49.              animation:hd forwards 2s 2s;
  50.         }
  51.         li:nth-child(4){
  52.             /* 延迟过程中使用起始帧的效果，结束之后回到结束帧 */
  53.             animation:hd both 2s 2s;
  54.         }
  55.         @keyframes hd{
  56.             from{
  57.                 transform:scale(0);
  58.             }
  59.             to{
  60.                 transform:scale(1);
  61.                 background:lightblue;
  62.             }
  63.         }
  64.     </style>
  65. </head>
  66. <body>
  67.     <ul>
  68.         <li>normal</li>
  69.         <li>backwards</li>
  70.         <li>forwards</li>
  71.         <li>both</li>
  72.     </ul>
  73. </body>
  74. </html>

 

原文链接：http://www.cnblogs.com/chenyingying0/p/13964792.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号