CSS帧动画

基础知识

　　通过定义一段动画中的关键点、关键状态来创建动画。@Keyframes相比transition对动画过程和细节有更强的控制。

　　过渡动画是两个状态间的变化，帧动画可以处理动画过程中不同时间的细节变化，

　　对过渡动画理解后再学习习帧动画会非常容易，也可以把帧动画理解为多个帧之间的过渡动画。

　　一句话，帧动画是CSS中的大杀器，你应该充分的了解并掌握它。

关键帧

　　使用@keyframes 规则配置动画中的各个帧

　　from 表示起始点

　　to表示终点

　　可以使用百分数如 20% 代表动画运行到20%处

基本使用

　　下面使用 @keyframes 定义了动画叫 radius 并配置了两个帧动作from/to ，然后在main:hover div中使用animation-name 引用了动画并使用animation-duration声明执行三秒。

　　注意：动画命名不要使用CSS关键字如 none

　　可以看到上面的动画是从30%的圆角过渡到了50%的圆角，但是整个动画的结束是瞬间结束，整个动画并不完美。

　　不要着急，下面会介绍各种方法让你的帧动画随心所欲。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <title>Document</title>
  7.         <style>
  8.                 *{
  9.                         margin: 0;
  10.                         padding: 0;
  11.                         list-style: none;
  12.                         box-sizing: border-box;
  13.                 }
  14.                 body{
  15.                         height: 100vh;
  16.                         width: 100vw;
  17.                         display: flex;
  18.                         justify-content: center;
  19.                         align-items: center;
  20.                 }
  21.                 main{
  22.                         height: 200px;
  23.                         width: 200px;
  24.                         display: flex;
  25.                         justify-content: center;
  26.                         align-items: center;
  27.                         border: 1px solid #ddd;
  28.                 }
  29.                 div{
  30.                         height: 100px;
  31.                         width: 100px;
  32.                         background: #5352ed;
  33.  
  34.                 }
  35. ​
  36.                 main:hover div{
  37.                         /* 一组帧的名字 */
  38.                         animation-name: radius;
  39.                         /* 动画时长 */
  40.                         animation-duration: 3s;
  41.                 }
  42. ​
  43.                 @keyframes radius{
  44.                         from{
  45.                                 border-radius: 30%;
  46.                         }
  47.                         to{
  48.                                 border-radius: 50%;
  49.                         }
  50.                 }
  51.         </style>
  52. </head>
  53. <body>
  54.         <main>
  55.                 <div></div>
  56.         </main>
  57. </body>
  58. </html>

代码示例

时间点

　　帧动画需要定义在不同时间执行的动作，开始与结束可以使用 form/to 或 0%/100% 声明。

　　必须添加百分号，25%是正确写法

　　时间点没有顺序要求，即100%写在25%前也可以

　　未设置0%与100% 时将使用元素原始状态

　　你可以这么理解，目前所学的一组帧动画它的运行应该是这样的

　　初始状态 ---> 0% 或者 from ---> 100% 或者 to ---> 初始状态

　　所以现在看上面的动画，就知道为什么看起来比较生硬了。

物体移动

　　下面定义不同时间点来让物体元素移动一圈，下例中可以不设置from/to 系统将定义为元素初始状态。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <title>Document</title>
  7.         <style>
  8.                 *{
  9.                         margin: 0;
  10.                         padding: 0;
  11.                         list-style: none;
  12.                         box-sizing: border-box;
  13.                 }
  14.                 body{
  15.                         height: 100vh;
  16.                         width: 100vw;
  17.                         display: flex;
  18.                         justify-content: center;
  19.                         align-items: center;
  20.                 }
  21.                 main{
  22.                         height: 400px;
  23.                         width: 400px;
  24.                         display: flex;
  25.                         justify-content: flex-start;
  26.                         align-items: flex-start;
  27.                         border: 1px solid #ddd;
  28.                 }
  29.                 div{
  30.                         height: 100px;
  31.                         width: 100px;
  32.                         background: #5352ed;
  33.  
  34.                 }
  35. ​
  36.                 main:hover div{
  37.                         /* 一组帧的名字 */
  38.                         animation-name: move;
  39.                         /* 动画时长 */
  40.                         animation-duration: 3s;
  41.                 }
  42. ​
  43.                 @keyframes move{
  44.                         /* 初始状态 ---> 帧  ---> 初始状态 */
  45.                         25%{
  46.                                 transform: translate(300px,0);
  47.                         }
  48.                         50%{
  49.                                 transform: translate(300px,300px);
  50.                         }
  51.                         75%{
  52.                                 transform: translate(0,300px);
  53.                         }
  54. ​
  55.                 }
  56.         </style>
  57. </head>
  58. <body>
  59.         <main>
  60.                 <div></div>
  61.         </main>
  62. </body>
  63. </html>

代码示例

同时声明

　　时间点可以动画样式一样时可以一起声明，下面将25%/75%背景一起声明。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <title>Document</title>
  7.         <style>
  8.                 *{
  9.                         margin: 0;
  10.                         padding: 0;
  11.                         list-style: none;
  12.                         box-sizing: border-box;
  13.                 }
  14.                 body{
  15.                         height: 100vh;
  16.                         width: 100vw;
  17.                         display: flex;
  18.                         justify-content: center;
  19.                         align-items: center;
  20.                 }
  21.                 main{
  22.                         height: 400px;
  23.                         width: 400px;
  24.                         display: flex;
  25.                         justify-content: flex-start;
  26.                         align-items: flex-start;
  27.                         border: 1px solid #ddd;
  28.                 }
  29.                 div{
  30.                         height: 100px;
  31.                         width: 100px;
  32.                         background: #5352ed;
  33.  
  34.                 }
  35. ​
  36.                 main:hover div{
  37.                         /* 一组帧的名字 */
  38.                         animation-name: move;
  39.                         /* 动画时长 */
  40.                         animation-duration: 3s;
  41.                 }
  42. ​
  43.                 @keyframes move{
  44.                         /* 初始状态 ---> 帧  ---> 初始状态 */
  45.                         25%{
  46.                                 transform: translate(300px,0);
  47.                         }
  48.                         50%{
  49.                                 transform: translate(300px,300px);
  50.                         }
  51.                         75%{
  52.                                 transform: translate(0,300px);
  53.                         }
  54. ​
  55.                         25%,75%{
  56.                                 background: #ff4757;
  57.                         }
  58. ​
  59.                         50%,100%{
  60.                                 background: #5352ed;
  61.                         }
  62. ​
  63.                 }
  64.         </style>
  65. </head>
  66. <body>
  67.         <main>
  68.                 <div></div>
  69.         </main>
  70. </body>
  71. </html>

代码示例

使用动画

　　使用animation-name 规则可以在元素身上同时使用多个动画。

　　使用多个动画时用逗号分隔多个

　　动画有相同属性时，后面动画的属性优先使用

基本使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <title>Document</title>
  7.         <style>
  8.                 *{
  9.                         margin: 0;
  10.                         padding: 0;
  11.                         list-style: none;
  12.                         box-sizing: border-box;
  13.                 }
  14.                 body{
  15.                         height: 100vh;
  16.                         width: 100vw;
  17.                         display: flex;
  18.                         justify-content: center;
  19.                         align-items: center;
  20.                 }
  21.                 main{
  22.                         height: 400px;
  23.                         width: 400px;
  24.                         display: flex;
  25.                         justify-content: flex-start;
  26.                         align-items: flex-start;
  27.                         border: 1px solid #ddd;
  28.                 }
  29.                 div{
  30.                         height: 100px;
  31.                         width: 100px;
  32.                         background: #5352ed;
  33.  
  34.                 }
  35. ​
  36.                 main:hover div{
  37.                         /* 一组帧的名字  可以使用多组帧*/
  38.                         animation-name: move,radius;
  39.                         /* 动画时长 */
  40.                         animation-duration: 3s;
  41.                 }
  42. ​
  43.                 @keyframes move{
  44.                         /* 初始状态 ---> 帧  ---> 初始状态 */
  45.                         25%{
  46.                                 transform: translate(300px,0);
  47.                         }
  48.                         50%{
  49.                                 transform: translate(300px,300px);
  50.                         }
  51.                         75%{
  52.                                 transform: translate(0,300px);
  53.                         }
  54.  
  55.                         /* 相同设置，前者不生效 */
  56. ​
  57.                         25%,75%{
  58.                                 background: #ff4757;
  59.                         }
  60. ​
  61.                         50%,100%{
  62.                                 background: #5352ed;
  63.                         }
  64. ​
  65.                 }
  66. ​
  67.                 @keyframes radius{
  68. ​
  69.                         25%{
  70.                                 border-radius: 50%;
  71.                         }
  72.                         50%{
  73.                                 border-radius: 30%;
  74.                         }
  75.                         75%{
  76.                                 border-radius: 50%;
  77.                         }
  78. ​
  79.                         /* 相同设置后者覆盖前者，所以移动时的颜色会变为下面两种 */
  80. ​
  81.                         25%,75%{
  82.                                 background: #ffa502;
  83.                         }
  84. ​
  85.                         50%,100%{
  86.                                 background: #2ed573;
  87.                         }
  88. ​
  89.                 }
  90.         </style>
  91. </head>
  92. <body>
  93.         <main>
  94.                 <div></div>
  95.         </main>
  96. </body>
  97. </html>

代码示例

动画时间

　　使用 animation-duration 可以声明动画播放的时间，即把所有帧执行一遍所需要的时间。

　　可以使用m秒，ms毫秒时间单位

　　可为不同动画单独设置执行时间

　　如果动画数量大于时间数量，将重新从时间列表中计算 。 如一个动画有Move,Radius,Background 而时间是1s,2s，那么Move的时间是1s，Radius的时间是2s，Background的时间从头开始数，又是1s.

效果体验

　　如下图的过渡时间，圆角是六秒完成，背景色是四秒完成，移动是两秒完成，但是他们的开始时间都是一样的。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <title>Document</title>
  7.         <style>
  8.                 *{
  9.                         margin: 0;
  10.                         padding: 0;
  11.                         list-style: none;
  12.                         box-sizing: border-box;
  13.                 }
  14.                 body{
  15.                         height: 100vh;
  16.                         width: 100vw;
  17.                         display: flex;
  18.                         justify-content: center;
  19.                         align-items: center;
  20.                 }
  21.                 main{
  22.                         height: 400px;
  23.                         width: 400px;
  24.                         display: flex;
  25.                         justify-content: center;
  26.                         align-items: flex-start;
  27.                         border: 1px solid #ddd;
  28.                 }
  29.                 div{
  30.                         height: 100px;
  31.                         width: 100px;
  32.                         background: #5352ed;
  33.  
  34.                 }
  35. ​
  36.                 main:hover div{
  37.                         /* 一组帧的名字  可以使用多组帧*/
  38.                         animation-name: radius,background,move;
  39.                         /* 动画时长 圆角是六秒完成，背景色是四秒完成，移动是两秒完成，但是他们的开始时间都是一样的 */
  40.                         animation-duration: 6s,4s,2s;
  41.                         /* 将动画停留在最后一帧 */
  42.                         animation-fill-mode: forwards;
  43.  
  44.                 }
  45. ​
  46.                 @keyframes radius{
  47.                         to{
  48.                                 border-radius: 50%;
  49.                         }
  50.                 }
  51.                 @keyframes background{
  52.                         to{
  53.  
  54.                         }
  55.                 }
  56.                 @keyframes move{
  57.                         to{
  58.                                 transform: translate(0,150px);
  59.                         }
  60.                 }
  61. ​
  62.  
  63.         </style>
  64. </head>
  65. <body>
  66.         <main>
  67.                 <div></div>
  68.         </main>
  69. </body>
  70. </html>

代码示例

动画属性

　　不是所有css属性都有过渡效果，查看支持动画的CSS属性 ，一般来讲有中间值的属性都可以设置动画如宽度、透明度等。

　　如何理解中间值？

　　比如，一个元素的宽度从100px变为200px，那么它们之间就有中间值。

　　而一个元素的边框样式从实心线变为虚心线，他们就没有中间值。

效果体验

　　看下面这张图，从实心线变为虚心线是瞬间变化，而背景颜色的改变却是跟着动画时间来进行渐变的。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <title>Document</title>
  7.         <style>
  8.                 *{
  9.                         margin: 0;
  10.                         padding: 0;
  11.                         list-style: none;
  12.                         box-sizing: border-box;
  13.                 }
  14.                 body{
  15.                         height: 100vh;
  16.                         width: 100vw;
  17.                         display: flex;
  18.                         justify-content: center;
  19.                         align-items: center;
  20.                 }
  21.                 main{
  22.                         height: 400px;
  23.                         width: 400px;
  24.                         display: flex;
  25.                         justify-content: center;
  26.                         align-items: center;
  27.                         border: 1px solid #ddd;
  28.                 }
  29.                 div{
  30.                         height: 200px;
  31.                         width: 200px;
  32.                         background: #5352ed;
  33.                         /* 添加实心线 */
  34.                         border: 15px solid red;
  35.  
  36.                 }
  37. ​
  38.                 main:hover div{
  39.                         /* 一组帧的名字  可以使用多组帧*/
  40.                         animation-name: border-style,background;
  41.                         /* 动画时长  */
  42.                         animation-duration: 2s;
  43.                         /* 将动画停留在最后一帧 */
  44.                         animation-fill-mode: forwards;
  45. ​
  46.                 }
  47. ​
  48.                 @keyframes border-style{
  49.                         to{
  50.                                 border:15px dotted red ;
  51.                         }
  52.                 }
  53.                 @keyframes background{
  54.                         to{
  55.  
  56.                         }
  57.                 }
  58.  
  59. ​
  60.  
  61.         </style>
  62. </head>
  63. <body>
  64.         <main>
  65.                 <div></div>
  66.         </main>
  67. </body>
  68. </html>

代码示例

中间值

　　可以看下下面这个例子，左边的块from与to设置的尺寸单位没有中间值，所以是瞬间变大。

　　而右边块的from与to设置的尺寸单位是具有中间值的，所以是跟随动画时间进行渐变。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. ​
  4. <head>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <title>Document</title>
  8.         <style>
  9.                 * {
  10.                         margin: 0;
  11.                         padding: 0;
  12.                         list-style: none;
  13.                         box-sizing: border-box;
  14.                 }
  15. ​
  16.                 body {
  17.                         height: 100vh;
  18.                         width: 100vw;
  19.                         display: flex;
  20.                         justify-content: center;
  21.                         align-items: center;
  22.                 }
  23. ​
  24.                 main {
  25.                         height: 400px;
  26.                         width: 400px;
  27.                         display: flex;
  28.                         justify-content: space-evenly;
  29.                         align-items: center;
  30.                         border: 1px solid #ddd;
  31.                 }
  32. ​
  33.                 main div:nth-child(1) {
  34. ​
  35.                         background: #5352ed;
  36.                 }
  37. ​
  38.                 main div:nth-child(2) {
  39. ​
  40.                         background: #ff4757;
  41.                 }
  42. ​
  43.                 main:hover div:nth-child(1) {
  44.                         /* 一组帧的名字  可以使用多组帧*/
  45.                         animation-name: size-percentage;
  46.                         /* 动画时长  */
  47.                         animation-duration: 2s;
  48.                         /* 将动画停留在最后一帧 */
  49.                         animation-fill-mode: forwards;
  50. ​
  51.                 }
  52. ​
  53.                 main:hover div:nth-child(2) {
  54.                         /* 一组帧的名字  可以使用多组帧*/
  55.                         animation-name: size-px;
  56.                         /* 动画时长  */
  57.                         animation-duration: 2s;
  58.                         /* 将动画停留在最后一帧 */
  59.                         animation-fill-mode: forwards;
  60. ​
  61.                 }
  62. ​
  63. ​
  64.                 @keyframes size-percentage {
  65. ​
  66.                         from {
  67.                                 width: 200px;
  68.                                 height: 200px;
  69.                         }
  70. ​
  71.                         /* px 与 % 之间没有中间值，所以是瞬间出现 */
  72. ​
  73.                         to {
  74.                                 width: 50%;
  75.                                 height: 50%;
  76.                         }
  77.                 }
  78. ​
  79.                 @keyframes size-px {
  80. ​
  81.                         from {
  82.                                 width: 100px;
  83.                                 height: 100px;
  84.                         }
  85. ​
  86.                         /* 有中间值，跟随动画时间进行渐变 */
  87. ​
  88.                         to {
  89.                                 width: 200px;
  90.                                 height: 200px;
  91.                         }
  92.                 }
  93.         </style>
  94. </head>
  95. ​
  96. <body>
  97.         <main>
  98.                 <div></div>
  99.                 <div></div>
  100.         </main>
  101. </body>
  102. ​
  103. </html>

代码示例

重复动画

　　使用animation-iteration-count 规则设置动画重复执行次数，可以给一个数字。当设置值为 infinite 表示无限循环执行。

　　可同时设置元素的多个动画重复，使用逗号分隔

　　如果动画数量大于重复数量定义，后面的动画将重新计算重复

效果体验

　　如下面这个案例，移动的次数是一次，而变化圆角是无限次。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <title>Document</title>
  7.         <style>
  8.                 *{
  9.                         margin: 0;
  10.                         padding: 0;
  11.                         list-style: none;
  12.                         box-sizing: border-box;
  13.                 }
  14.                 body{
  15.                         height: 100vh;
  16.                         width: 100vw;
  17.                         display: flex;
  18.                         justify-content: center;
  19.                         align-items: center;
  20.                 }
  21.                 main{
  22.                         height: 400px;
  23.                         width: 400px;
  24.                         display: flex;
  25.                         justify-content: flex-start;
  26.                         align-items: flex-start;
  27.                         border: 1px solid #ddd;
  28.                 }
  29.                 div{
  30.                         height: 100px;
  31.                         width: 100px;
  32.                         background: #5352ed;
  33.  
  34.                 }
  35. ​
  36.                 main:hover div{
  37.                         /* 一组帧的名字  可以使用多组帧*/
  38.                         animation-name: move,radius;
  39.                         /* 动画时长 */
  40.                         animation-duration: 3s;
  41.                         /* 代表移动只走一遍，随后就不断的圆角变化，进入死循环 */
  42.                         animation-iteration-count: 1,infinite;
  43.                 }
  44. ​
  45.                 @keyframes move{
  46.                         /* 初始状态 ---> 帧  ---> 初始状态 */
  47.                         25%{
  48.                                 transform: translate(300px,0);
  49.                         }
  50.                         50%{
  51.                                 transform: translate(300px,300px);
  52.                         }
  53.                         75%{
  54.                                 transform: translate(0,300px);
  55.                         }
  56.  
  57.                         /* 相同设置，前者不生效 */
  58. ​
  59.                         25%,75%{
  60.                                 background: #ff4757;
  61.                         }
  62. ​
  63.                         50%,100%{
  64.                                 background: #5352ed;
  65.                         }
  66. ​
  67.                 }
  68. ​
  69.                 @keyframes radius{
  70. ​
  71.                         25%{
  72.                                 border-radius: 50%;
  73.                         }
  74.                         50%{
  75.                                 border-radius: 30%;
  76.                         }
  77.                         75%{
  78.                                 border-radius: 50%;
  79.                         }
  80. ​
  81.                         /* 相同设置后者覆盖前者，所以移动时的颜色会变为下面两种 */
  82. ​
  83.                         25%,75%{
  84.                                 background: #ffa502;
  85.                         }
  86. ​
  87.                         50%,100%{
  88.                                 background: #2ed573;
  89.                         }
  90. ​
  91.                 }
  92.         </style>
  93. </head>
  94. <body>
  95.         <main>
  96.                 <div></div>
  97.         </main>
  98. </body>
  99. </html>

代码示例

心动感觉

　　使用循环动画绘制心动效果。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <title>Document</title>
  7.         <link rel="stylesheet" href="//at.alicdn.com/t/font_1953712_q6h4xm8p2jc.css" type="text/css">
  8.         <style>
  9.                 *{
  10.                         margin: 0;
  11.                         padding: 0;
  12.                         list-style: none;
  13.                         box-sizing: border-box;
  14.                 }
  15.                 body{
  16.                         height: 100vh;
  17.                         width: 100vw;
  18.                         display: flex;
  19.                         justify-content: center;
  20.                         align-items: center;
  21.                 }
  22.                 main{
  23.                         height: 400px;
  24.                         width: 400px;
  25.                         display: flex;
  26.                         justify-content: center;
  27.                         align-items: center;
  28.                         border: 1px solid #ddd;
  29.                 }
  30.  
  31.                 main i.iconfont{
  32.                         font-size: 100px;
  33.                         color: red;
  34.                 }
  35.  
  36.                 main:hover i{
  37.                         /* 添加一组帧动画 */
  38.                         animation-name: xin;
  39.                         /* 时间 */
  40.                         animation-duration: .5s;
  41.                         /* 循环次数  死循环 */
  42.                         animation-iteration-count: infinite;
  43.                 }
  44.  
  45.                 @keyframes xin {
  46.                         to{
  47.                                 opacity: .5;
  48.                                 font-size: 120px;
  49.                         }
  50.  
  51.                         20%{
  52.                                 opacity: .6;
  53.                                 font-size: 130px;
  54.                         }
  55.                         40%{
  56.                                 opacity: .7;
  57.                                 font-size: 140px;
  58.                         }
  59.  
  60.                         60%{
  61.                                 opacity: .8;
  62.                                 font-size: 150px;
  63.                         }
  64.                         80%{
  65.                                 opacity: .9;
  66.                                 font-size: 160px;
  67.                         }
  68.                         to{
  69.                                 opacity: 1;
  70.                                 font-size: 140px;
  71.                         }
  72.                 }
  73.  
  74.         </style>
  75. </head>
  76. <body>
  77.         <main>
  78.                 <i class="iconfont icon-xin"></i>
  79.         </main>
  80. </body>
  81. </html>

代码示例

动画方向

　　使用 animation-direction 控制动画运行的方向。

选项 说明
normal 从0%到100%运行动画
reverse 从100%到0%运行动画
alternate 先从0%到100%，然后从100%到0%
alternate-reverse 先从100%到0%，然后从0%到100%

效果对比

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <title>Document</title>
  8.         <link rel="stylesheet" href="//at.alicdn.com/t/font_1953712_q6h4xm8p2jc.css" type="text/css">
  9.         <style>
  10.                 * {
  11.                         margin: 0;
  12.                         padding: 0;
  13.                         list-style: none;
  14.                         box-sizing: border-box;
  15.                 }
  16.  
  17.                 body {
  18.                         height: 100vh;
  19.                         width: 100vw;
  20.                         display: flex;
  21.                         justify-content: center;
  22.                         align-items: center;
  23.                 }
  24.  
  25.                 main {
  26.                         height: 400px;
  27.                         width: 800px;
  28.                         display: flex;
  29.                         justify-content: space-evenly;
  30.                         align-items: center;
  31.                         border: 1px solid #ddd;
  32.                 }
  33.  
  34.                 main i.iconfont {
  35.                         font-size: 100px;
  36.                         color: red;
  37.                         position: relative;
  38.                 }
  39.  
  40.                 main:hover i {
  41.                         /* 添加一组帧动画 */
  42.                         animation-name: xin;
  43.                         /* 时间 */
  44.                         animation-duration: .5s;
  45.                         /* 循环次数  死循环 */
  46.                         animation-iteration-count: infinite;
  47.  
  48.                 }
  49.  
  50.                 main i:nth-child(1):after {
  51.  
  52.                         content: "normal";
  53.                         font-size: 15px;
  54.                         color: white;
  55.                         position: absolute;
  56.                         left: 50%;
  57.                         top: 50%;
  58.                         transform: translate(-50%, -50%);
  59.                 }
  60.  
  61.                 main i:nth-child(2):after {
  62.  
  63.                         content: "normal-reverse";
  64.                         font-size: 15px;
  65.                         color: white;
  66.                         position: absolute;
  67.                         left: 50%;
  68.                         top: 50%;
  69.                         transform: translate(-50%, -50%);
  70.                 }
  71.  
  72.                 main i:nth-child(3):after {
  73.  
  74.                         content: "alternate";
  75.                         font-size: 15px;
  76.                         color: white;
  77.                         position: absolute;
  78.                         left: 50%;
  79.                         top: 50%;
  80.                         transform: translate(-50%, -50%);
  81.                 }
  82.  
  83.                 main i:nth-child(4):after {
  84.  
  85.                         content: "alternate-reverse";
  86.                         font-size: 15px;
  87.                         color: white;
  88.                         position: absolute;
  89.                         left: 50%;
  90.                         top: 50%;
  91.                         transform: translate(-50%, -50%);
  92.                 }
  93.  
  94.                 main:hover i:nth-child(1) {
  95.                         /* 0-100 */
  96.                         animation-direction: normal;
  97.                 }
  98.  
  99.                 main:hover i:nth-child(2) {
  100.                         /* 100-0 */
  101.                         animation-direction: reverse;
  102.                 }
  103.  
  104.                 main:hover i:nth-child(3) {
  105.                         /* 0-100 100-0  */
  106.                         animation-direction: alternate;
  107.                 }
  108.  
  109.                 main:hover i:nth-child(4) {
  110.                         /* 100-0 0-100 */
  111.                         animation-direction: alternate-reverse;
  112.                 }
  113.  
  114.                 @keyframes xin {
  115.                         to {
  116.                                 opacity: .5;
  117.                                 font-size: 120px;
  118.                         }
  119.  
  120.                         20% {
  121.                                 opacity: .6;
  122.                                 font-size: 130px;
  123.                         }
  124.  
  125.                         40% {
  126.                                 opacity: .7;
  127.                                 font-size: 140px;
  128.                         }
  129.  
  130.                         60% {
  131.                                 opacity: .8;
  132.                                 font-size: 150px;
  133.                         }
  134.  
  135.                         80% {
  136.                                 opacity: .9;
  137.                                 font-size: 160px;
  138.                         }
  139.  
  140.                         to {
  141.                                 opacity: 1;
  142.                                 font-size: 140px;
  143.                         }
  144.                 }
  145.         </style>
  146. </head>
  147.  
  148. <body>
  149.         <main>
  150.                 <i class="iconfont icon-xin"></i>
  151.                 <i class="iconfont icon-xin"></i>
  152.                 <i class="iconfont icon-xin"></i>
  153.                 <i class="iconfont icon-xin"></i>
  154.         </main>
  155. </body>
  156.  
  157. </html>

代码示例

弹跳球

　　alternate-reverse是100-0 0-100，因此非常适合用来做弹跳球。

　　我们先把球和阴影都定义在下方，然后使用alternate-reverse将球转移到上方即可。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <title>Document</title>
  8.         <link rel="stylesheet" href="//at.alicdn.com/t/font_1953712_q6h4xm8p2jc.css" type="text/css">
  9.         <style>
  10.                 * {
  11.                         margin: 0;
  12.                         padding: 0;
  13.                         list-style: none;
  14.                         box-sizing: border-box;
  15.                 }
  16.  
  17.                 body {
  18.                         height: 100vh;
  19.                         width: 100vw;
  20.                         display: flex;
  21.                         justify-content: center;
  22.                         align-items: center;
  23.                 }
  24.  
  25.                 main {
  26.                         height: 400px;
  27.                         width: 400px;
  28.                         display: flex;
  29.                         flex-flow: column;
  30.                         justify-content: flex-end;
  31.                         align-items: center;
  32.                         border: 1px solid #ddd;
  33.  
  34.                 }
  35.  
  36.                 main div {
  37.  
  38.                         height: 100px;
  39.                         width: 100px;
  40.                         background: linear-gradient(45deg, #7bed9f, #2ed573, #1e90ff, #3742fa);
  41.                         border-radius: 50%;
  42.  
  43.                 }
  44.  
  45.                 main section {
  46.  
  47.                         width: 140px;
  48.                         height: 20px;
  49.                         background: #2f3542;
  50.                         border-radius: 75%;
  51.                         /* 高斯模糊 */
  52.                         filter: blur(3px);
  53.  
  54.                 }
  55.  
  56.                 main:hover div {
  57.                         /* 添加一组帧动画 */
  58.                         animation-name: beat;
  59.                         /* 动画时间 */
  60.                         animation-duration: 1s;
  61.                         /* 运动方式 100-0 0-100 */
  62.                         animation-direction: alternate-reverse;
  63.                         /* 死循环 */
  64.                         animation-iteration-count: infinite;
  65.                 }
  66.  
  67.                 main:hover section {
  68.                         /* 添加一组帧动画 */
  69.                         animation-name: size;
  70.                         /* 动画时间 */
  71.                         animation-duration: 1s;
  72.                         /* 运动方式 100-0 0-100 */
  73.                         animation-direction: alternate-reverse;
  74.                         /* 死循环 */
  75.                         animation-iteration-count: infinite;
  76.                 }
  77.  
  78.                 @keyframes beat {
  79.                         from{
  80.                                 background: linear-gradient(90deg, #7bed9f, #2ed573, #1e90ff, #3742fa);
  81.                                 width: 140px;
  82.                         }
  83.  
  84.                         to {
  85.                                 transform: translateY(-280px);
  86.                         }
  87.                 }
  88.  
  89.                 @keyframes size{
  90.  
  91.                         to{
  92.                                 width: 70px;
  93.                         }
  94.                 }
  95.  
  96.         </style>
  97. </head>
  98.  
  99. <body>
  100.         <main>
  101.                 <div></div>
  102.                 <section></section>
  103.         </main>
  104. </body>
  105.  
  106. </html>

代码示例

延迟动画

　　使用 animation-delay 规则定义动画等待多长时间后执行。

　　我们可以为多个动画指定不同的延迟时间，与动画时间的使用规则相同。

效果体验

　　延迟动画 圆角3s后执行，背景色2s后执行，移动1s后执行

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <title>Document</title>
  7.         <style>
  8.                 *{
  9.                         margin: 0;
  10.                         padding: 0;
  11.                         list-style: none;
  12.                         box-sizing: border-box;
  13.                 }
  14.                 body{
  15.                         height: 100vh;
  16.                         width: 100vw;
  17.                         display: flex;
  18.                         justify-content: center;
  19.                         align-items: center;
  20.                 }
  21.                 main{
  22.                         height: 400px;
  23.                         width: 400px;
  24.                         display: flex;
  25.                         justify-content: center;
  26.                         align-items: flex-start;
  27.                         border: 1px solid #ddd;
  28.                 }
  29.                 div{
  30.                         height: 100px;
  31.                         width: 100px;
  32.                         background: #5352ed;
  33.  
  34.                 }
  35.  
  36.                 main:hover div{
  37.                         /* 一组帧的名字  可以使用多组帧*/
  38.                         animation-name: radius,background,move;
  39.                         /* 动画时长  */
  40.                         animation-duration: 2s;
  41.                         /* 延迟动画  圆角3s后执行，背景色2s后执行，移动1s后执行*/
  42.                         animation-delay:3s,2s,1s;
  43.                         /* 将动画停留在最后一帧 */
  44.                         animation-fill-mode: forwards;
  45.  
  46.                 }
  47.  
  48.                 @keyframes radius{
  49.                         to{
  50.                                 border-radius: 50%;
  51.                         }
  52.                 }
  53.                 @keyframes background{
  54.                         to{
  55.                                 background-color: #ffa502;
  56.                         }
  57.                 }
  58.                 @keyframes move{
  59.                         to{
  60.                                 transform: translate(0,150px);
  61.                         }
  62.                 }
  63.  
  64.         </style>
  65. </head>
  66. <body>
  67.         <main>
  68.                 <div></div>
  69.         </main>
  70. </body>
  71. </html>

代码示例

动画速率

系统属性

　　使用animation-timing-function来控制动画速率

值 描述
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 开始慢，然后快，慢下来，结束时非常慢（cubic-bezier(0.25,0.1,0.25,1)）默认值。
ease-in 开始慢，结束快（等于 cubic-bezier(0.42,0,1,1)）
ease-out 开始快，结束慢（等于 cubic-bezier(0,0,0.58,1)）
ease-in-out 中间快，两边慢（等于 cubic-bezier(0.42,0,0.58,1)）
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值

　　可以在帧中单独定义，将影响当前帧的速率

贝塞尔曲线

　　其实不管是linear或者是ease都是由贝塞尔曲线来完成的。

　　我们需要设置四个值 cubic-bezier(<x1>, <y1>, <x2>, <y2>)来控制曲线速度，可在 https://cubic-bezier.com 网站在线体验效果。

效果体验

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <title>Document</title>
  7.         <style>
  8.                 *{
  9.                         margin: 0;
  10.                         padding: 0;
  11.                         list-style: none;
  12.                         box-sizing: border-box;
  13.                 }
  14.                 body{
  15.                         height: 100vh;
  16.                         width: 100vw;
  17.                         display: flex;
  18.                         justify-content: center;
  19.                         align-items: center;
  20.                 }
  21.                 main{
  22.                         height: 400px;
  23.                         width: 400px;
  24.                         display: flex;
  25.  
  26.                         justify-content: space-evenly;
  27.                         align-items: flex-end;
  28.                         border: 1px solid #ddd;
  29.                 }
  30.                 div{
  31.  
  32.                         padding: 10px;
  33.                         height: 100%;
  34.                         width: 25%;
  35.                         text-align: center;
  36.                         background: #ff4757 content-box;
  37.                         color: white;
  38.                 }
  39.  
  40.                 main:hover div{
  41.                         /* 一组帧的名字  可以使用多组帧*/
  42.                         animation-name: move;
  43.                         /* 动画时长  */
  44.                         animation-duration: 3s;
  45.                         /* 重复动画 死循环 */
  46.                         animation-iteration-count: infinite;
  47.  
  48.                 }
  49.  
  50.                 main:hover div:nth-child(1){
  51.                         animation-timing-function: linear;
  52.                 }
  53.  
  54.                 main:hover div:nth-child(2){
  55.                         animation-timing-function: ease;
  56.                 }
  57.  
  58.                 main:hover div:nth-child(3){
  59.                         animation-timing-function: ease-in;
  60.                 }
  61.  
  62.                 main:hover div:nth-child(4){
  63.                         animation-timing-function: ease-out;
  64.                 }
  65.  
  66.                 main:hover div:nth-child(5){
  67.                         animation-timing-function: ease-in-out;
  68.                 }
  69.  
  70.                 @keyframes move{
  71.                         to{
  72.                                 height: 0;
  73.                         }
  74.                 }
  75.  
  76.         </style>
  77. </head>
  78. <body>
  79.         <main>
  80.                 <div>linear</div>
  81.                 <div>ease</div>
  82.                 <div>ease-in</div>
  83.                 <div>ease-out</div>
  84.                 <div>ease-in-out</div>
  85.         </main>
  86. </body>
  87. </html>

代码示例

弹跳球

　　ease-out是开始快，结束慢，而ease-in是结束快，开始慢。因此这两个组合做弹跳小球刚好。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <title>Document</title>
  8.         <link rel="stylesheet" href="//at.alicdn.com/t/font_1953712_q6h4xm8p2jc.css" type="text/css">
  9.         <style>
  10.                 * {
  11.                         margin: 0;
  12.                         padding: 0;
  13.                         list-style: none;
  14.                         box-sizing: border-box;
  15.                 }
  16.  
  17.                 body {
  18.                         height: 100vh;
  19.                         width: 100vw;
  20.                         display: flex;
  21.                         justify-content: center;
  22.                         align-items: center;
  23.                 }
  24.  
  25.                 main {
  26.                         height: 400px;
  27.                         width: 400px;
  28.                         display: flex;
  29.                         flex-flow: column;
  30.                         justify-content: space-between;
  31.                         align-items: center;
  32.                         border: 1px solid #ddd;
  33.  
  34.                 }
  35.  
  36.                 main div {
  37.  
  38.                         height: 100px;
  39.                         width: 100px;
  40.                         background: linear-gradient(45deg, #eccc68, #ffa502, #ff6b81, #ff4757);
  41.                         border-radius: 50%;
  42.  
  43.                 }
  44.  
  45.                 main section {
  46.  
  47.                         width: 70px;
  48.                         height: 20px;
  49.                         background: #2f3542;
  50.                         border-radius: 75%;
  51.                         /* 高斯模糊 */
  52.                         filter: blur(3px);
  53.  
  54.                 }
  55.  
  56.                 main:hover div {
  57.                         /* 添加一组帧动画 */
  58.                         animation-name: beat;
  59.                         /* 动画时间 */
  60.                         animation-duration: 3s;
  61.  
  62.                         /* 死循环 */
  63.                         animation-iteration-count: infinite;
  64.                 }
  65.  
  66.                 main:hover section {
  67.                         /* 添加一组帧动画 */
  68.                         animation-name: size;
  69.                         /* 动画时间 */
  70.                         animation-duration: 3s;
  71.                         /* 死循环 */
  72.                         animation-iteration-count: infinite;
  73.                 }
  74.  
  75.                 @keyframes beat {
  76.                         0% {
  77.                                 background: linear-gradient(60deg, #eccc68, #ffa502, #ff6b81, #ff4757);
  78.                                 transform: translateY(0px);
  79.                                 animation-timing-function: ease-in;
  80.                                 width: 100px;
  81.  
  82.                         }
  83.  
  84.                         30% {
  85.                                 background: linear-gradient(120deg, #eccc68, #ffa502, #ff6b81, #ff4757);
  86.                                 transform: translateY(50px);
  87.                                 animation-timing-function: ease-in;
  88.                                 width: 100px;
  89.                         }
  90.  
  91.                         60% {
  92.                                 background: linear-gradient(240deg, #eccc68, #ffa502, #ff6b81, #ff4757);
  93.                                 transform: translateY(100px);
  94.                                 animation-timing-function: ease-in;
  95.                                 width: 100px;
  96.                         }
  97.  
  98.                         80% {
  99.                                 background: linear-gradient(300deg, #eccc68, #ffa502, #ff6b81, #ff4757);
  100.                                 transform: translateY(150px);
  101.                                 animation-timing-function: ease-in;
  102.                                 width: 100px;
  103.                         }
  104.  
  105.                         95% {
  106.                                 background: linear-gradient(340deg, #eccc68, #ffa502, #ff6b81, #ff4757);
  107.                                 transform: translateY(200px);
  108.                                 animation-timing-function: ease-in;
  109.                                 width: 100px;
  110.                         }
  111.  
  112.                         15%,
  113.                         45%,
  114.                         70%,
  115.                         85%,
  116.                         100% {
  117.                                 width: 140px;
  118.                                 transform: translateY(280px);
  119.                                 animation-timing-function: ease-out;
  120.                         }
  121.                 }
  122.  
  123.                 @keyframes size {
  124.  
  125.                         0% {
  126.                                 width: 80px;
  127.                         }
  128.  
  129.                         30% {
  130.                                 width: 85px;
  131.                         }
  132.  
  133.                         60% {
  134.                                 width: 95px;
  135.                         }
  136.  
  137.                         80% {
  138.                                 width: 110px;
  139.                         }
  140.  
  141.                         95% {
  142.                                 width: 120px;
  143.                         }
  144.  
  145.                         15%,
  146.                         45%,
  147.                         70%,
  148.                         85%,
  149.                         100% {
  150.                                 width: 140px;
  151.  
  152.                         }
  153.                 }
  154.         </style>
  155. </head>
  156.  
  157. <body>
  158.         <main>
  159.                 <div></div>
  160.                 <section></section>
  161.         </main>
  162. </body>
  163.  
  164. </html>

代码示例

按钮提交

　　这个需要用到盒子阴影，一个元素可以有多个阴影。

　　盒子阴影的设置规则如下：

　　水平偏移度/垂直偏移度/模糊度/颜色

　　对于颜色而言可以使用currentColor来获取当前盒子的color属性。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <title>Document</title>
  8.         <link rel="stylesheet" href="//at.alicdn.com/t/font_1953712_q6h4xm8p2jc.css" type="text/css">
  9.         <style>
  10.                 * {
  11.                         margin: 0;
  12.                         padding: 0;
  13.                         list-style: none;
  14.                         box-sizing: border-box;
  15.                 }
  16.  
  17.                 body {
  18.                         height: 100vh;
  19.                         width: 100vw;
  20.                         display: flex;
  21.                         justify-content: center;
  22.                         align-items: center;
  23.                 }
  24.  
  25.                 main {
  26.                         height: 400px;
  27.                         width: 400px;
  28.                         display: flex;
  29.                         justify-content: center;
  30.                         align-items: center;
  31.                         border: 1px solid #ddd;
  32.  
  33.                 }
  34.  
  35.                 main button {
  36.  
  37.                         height: 40px;
  38.                         width: 100px;
  39.                         background-color: #747d8c;
  40.                         color: white;
  41.                         display: flex;
  42.                         justify-content: center;
  43.                         align-items: center;
  44.  
  45.                 }
  46.  
  47.                 main button::after {
  48.                         content: '';
  49.                         display: inline-block;
  50.                         height: 3px;
  51.                         width: 3px;
  52.  
  53.                         margin-left: 5px;
  54.                 }
  55.  
  56.                 /* Js中可换成点击事件 */
  57.                 button:hover::after {
  58.                         /* 添加一组帧动画 */
  59.                         animation-name: point;
  60.                         /* 动画时间 */
  61.                         animation-duration: 2s;
  62.                         /* 死循环 */
  63.                         animation-iteration-count: infinite;
  64.                         /* 动画速率 */
  65.                         animation-timing-function: linear;
  66.                 }
  67.  
  68.                 @keyframes point {
  69.                         60%{
  70.                                 box-shadow: none;
  71.                         }
  72.  
  73.                         30% {
  74.                                 box-shadow: 3px 0 currentColor;
  75.                         }
  76.  
  77.                         60% {
  78.                                 box-shadow: 3px 0 currentColor, 9px 0 currentColor;
  79.                         }
  80.  
  81.                         to {
  82.                                 box-shadow: 3px 0 currentColor, 9px 0 currentColor, 15px 0 currentColor;
  83.                         }
  84.                 }
  85.         </style>
  86. </head>
  87.  
  88. <body>
  89.         <main>
  90.                 <button>提交</button>
  91.         </main>
  92. </body>
  93.  
  94. </html>

代码示例

步进速度

　　过渡使用阶梯化呈现，有点像现实生活中的机械舞，下面是把过渡分3步完成。

选项 说明
steps(n,start) 设置n个时间点，第一时间点变化状态
steps(n,end) 设置n个时间点，第一时间点初始状态
step-start 等于steps(1,start)，可以理解为从下一步开始
step-end 等于steps(1,end)，可以理解为从当前步开始

　　start总是先走，end总是后走。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <title>Document</title>
  7.         <style>
  8.                 *{
  9.                         margin: 0;
  10.                         padding: 0;
  11.                         box-sizing: border-box;
  12.                 }
  13.                 body{
  14.                         height: 100vh;
  15.                         width: 100vw;
  16.  
  17.                         display: flex;
  18.                         justify-content: center;
  19.                         align-items: center;
  20.                 }
  21.  
  22.                 main{
  23.                         height: 400px;
  24.                         width: 800px;
  25.  
  26.                         display: flex;
  27.                         border:1px solid #ddd;
  28.  
  29.                         position: relative;
  30.                 }
  31.                 main div{
  32.                         width: 200px;
  33.                         height: 100%;
  34.                         border: 1px solid #ddd;
  35.                 }
  36.                 main::after{
  37.                         content: "START";
  38.                         height: 30%;
  39.                         width: 25%;
  40.                         background: #ff4757;
  41.                         color: #fff;
  42.                         font-size: 2em;
  43.  
  44.                         position: absolute;
  45.                         top: 0;
  46.  
  47.                         display: flex;
  48.                         justify-content: center;
  49.                         align-items: center;
  50.  
  51.                 }
  52.  
  53.                 main::before{
  54.                         content: "END";
  55.                         height: 30%;
  56.                         width: 25%;
  57.                         background: #70a1ff;
  58.                         color: #fff;
  59.                         font-size: 2em;
  60.  
  61.                         position: absolute;
  62.                         bottom: 0;
  63.  
  64.                         display: flex;
  65.                         justify-content: center;
  66.                         align-items: center;
  67.                 }
  68.  
  69.                 main:hover::after{
  70.                         /* 添加一组动画帧 */
  71.                         animation-name: move;
  72.                       /* 步进动画，3步 */
  73.                       animation-timing-function: steps(3,start);
  74.                       /* 动画时长2s */
  75.                       animation-duration: 2s;
  76.                 }
  77.  
  78.                 main:hover::before{
  79.                         /* 添加一组动画帧 */
  80.                       animation-name: move;
  81.                       /* 步进动画，3步 */
  82.                       animation-timing-function: steps(3,end);
  83.                       /* 动画时长2s */
  84.                       animation-duration: 2s;
  85.                 }
  86.  
  87.                 @keyframes move{
  88.  
  89.                         to{
  90.                                 transform: translateX(600px);
  91.                         }
  92.                 }
  93.  
  94.         </style>
  95.  
  96. </head>
  97. <body>
  98.         <main>
  99.                 <div></div>
  100.                 <div></div>
  101.                 <div></div>
  102.                 <div></div>
  103.         </main>
  104. </body>
  105. </html>

代码示例

播放状态

　　使用 animation-play-state 可以控制动画的暂停与运行。

选项 说明
paused 鼠标放上时暂停
running 鼠标放上时运行

轮播图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <title>Document</title>
  7.         <style>
  8.             * {
  9.                 padding: 0;
  10.                 margin: 0;
  11.             }
  12.  
  13.             body {
  14.                 width: 100vw;
  15.                 height: 100vh;
  16.                 display: flex;
  17.                 justify-content: center;
  18.                 align-items: center;
  19.                 background: #2c3e50;
  20.             }
  21.  
  22.             main {
  23.                 width: 400px;
  24.                 border: solid 5px #ddd;
  25.                 border-width: 5px 0 5px 0;
  26.                 overflow: hidden;
  27.                 position: relative;
  28.             }
  29.  
  30.             main:hover section {
  31.                 animation-play-state: paused;
  32.             }
  33.  
  34.             main:hover ul::before {
  35.                 animation-play-state: paused;
  36.             }
  37.  
  38.             section {
  39.                 width: 1600px;
  40.                 height: 200px;
  41.                 display: flex;
  42.                 flex-direction: row;
  43.                 animation-name: slide;
  44.                 animation-duration: 4s;
  45.                 animation-iteration-count: infinite;
  46.                 animation-timing-function: steps(4, end);
  47.             }
  48.  
  49.             section div {
  50.                 width: 400px;
  51.                 height: 200px;
  52.                 overflow: hidden;
  53.             }
  54.  
  55.             section div img {
  56.                 width: 100%;
  57.             }
  58.  
  59.             ul {
  60.                 width: 200px;
  61.                 position: absolute;
  62.                 list-style: none;
  63.                 display: flex;
  64.                 justify-content: center;
  65.                 align-items: center;
  66.                 z-index: 3;
  67.                 bottom: 20px;
  68.                 left: 50%;
  69.                 transform: translateX(-50%);
  70.             }
  71.  
  72.             ul li {
  73.                 font-size: 2em;
  74.                 font-weight: bold;
  75.                 color: white;
  76.                 width: 50px;
  77.                 height: 50px;
  78.                 border-radius: 50%;
  79.                 border: solid 3px transparent;
  80.                 box-sizing: border-box;
  81.                 display: flex;
  82.                 justify-content: center;
  83.                 align-items: center;
  84.                 z-index: 2;
  85.                 background: rgba(0, 0, 0, .3);
  86.                 box-shadow: 0 0 3px rgba(0, 0, 0, 1);
  87.             }
  88.  
  89.             ul::before {
  90.                 content: '';
  91.                 width: 50px;
  92.                 height: 50px;
  93.                 border-radius: 50%;
  94.                 position: absolute;
  95.                 background: #e74c3c;
  96.                 left: 0;
  97.                 animation-name: num;
  98.                 animation-duration: 4s;
  99.                 animation-iteration-count: infinite;
  100.                 animation-timing-function: steps(4, end);
  101.                 z-index: 1;
  102.             }
  103.  
  104.             @keyframes slide {
  105.                 from {
  106.                     transform: translateX(0px);
  107.                 }
  108.  
  109.                 to {
  110.                     transform: translateX(-100%);
  111.                 }
  112.             }
  113.  
  114.             @keyframes num {
  115.                 100% {
  116.                     transform: translateX(200px);
  117.                 }
  118.             }
  119.         </style>
  120. </head>
  121. <body>
  122.         <main>
  123.                 <section>
  124.                     <div>
  125.                         <img src="1.jpg" alt="">
  126.                     </div>
  127.                     <div>
  128.                         <img src="2.jpg" alt="">
  129.                     </div>
  130.                     <div>
  131.                         <img src="3.jpg" alt="">
  132.                     </div>
  133.                     <div>
  134.                         <img src="4.jpg" alt="">
  135.                     </div>
  136.                 </section>
  137.                 <ul>
  138.                     <li>1</li>
  139.                     <li>2</li>
  140.                     <li>3</li>
  141.                     <li>4</li>
  142.                 </ul>
  143.             </main>
  144. </body>
  145. </html>

代码示例

填充模式

　　animation-fill-mode 用于定义动画播放结束后的处理模式，是回到原来状态还是停止在动画结束状态。

选项 说明
none 需要等延迟结束，起始帧属性才应用
backwards 动画效果在起始帧，不等延迟结束
forwards 结束后停留动画的最后一帧
both 包含backwards与forwards规则，即动画效果在起始帧，不等延迟结束，并且在结束后停止在最后一帧

效果对比

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <title>Document</title>
  8.         <style>
  9.                 * {
  10.                         margin: 0;
  11.                         padding: 0;
  12.                         box-sizing: content-box;
  13.                 }
  14.                 body{
  15.                         display: flex;
  16.                         justify-content: center;
  17.                         align-items: center;
  18.                         height: 100vh;
  19.                         width: 100vw;
  20.                 }
  21.                 main{
  22.                         display: flex;
  23.                         justify-content: space-evenly;
  24.                         align-items: center;
  25.                         height: 200px;
  26.                         width: 800px;
  27.                         border: 1px solid #ddd;
  28.                 }
  29.                 div{
  30.                         height: 80px;
  31.                         width: 200px;
  32.                         background: #000 content-box;
  33.                         padding: 10px;
  34.  
  35.                         display: flex;
  36.                         justify-content: space-evenly;
  37.                         align-items: center;
  38.  
  39.                         color: #fff;
  40.  
  41.                         position: relative;
  42.                 }
  43.  
  44.                 main:hover div{
  45.                         /* 添加一组帧动画 */
  46.                         animation-name: background;
  47.                         /* 运行时间 */
  48.                         animation-duration: 3s;
  49.                         /* 延迟时间 */
  50.                         animation-delay: 2s;
  51.  
  52.                 }
  53.  
  54.                 main div:nth-child(1)::before{
  55.                         content: "等待延迟 不停留最后一帧";
  56.                         display: flex;
  57.                         justify-content: space-evenly;
  58.                         align-items: center;
  59.  
  60.                         color: red;
  61.                         font-weight: bolder;
  62.                         position: absolute;
  63.  
  64.                         top: -20px;
  65.  
  66.                 }
  67.  
  68.                 main div:nth-child(2)::before{
  69.                         content: "不等待延迟 不停留最后一帧 ";
  70.                         display: flex;
  71.                         justify-content: space-evenly;
  72.                         align-items: center;
  73.  
  74.                         color: red;
  75.                         font-weight: bolder;
  76.                         position: absolute;
  77.  
  78.                         top: -20px;
  79.  
  80.                 }
  81.  
  82.                 main div:nth-child(3)::before{
  83.                         content: "等待延迟 停留最后一帧 ";
  84.                         display: flex;
  85.                         justify-content: space-evenly;
  86.                         align-items: center;
  87.  
  88.                         color: red;
  89.                         font-weight: bolder;
  90.                         position: absolute;
  91.  
  92.                         top: -20px;
  93.  
  94.                 }
  95.  
  96.                 main div:nth-child(4)::before{
  97.                         content: "不等待延迟 停留最后一帧 ";
  98.                         display: flex;
  99.                         justify-content: space-evenly;
  100.                         align-items: center;
  101.  
  102.                         color: red;
  103.                         font-weight: bolder;
  104.                         position: absolute;
  105.  
  106.                         top: -20px;
  107.  
  108.                 }
  109.  
  110.                 main:hover div:nth-child(1){
  111.                         animation-fill-mode: none;
  112.                 }
  113.  
  114.                 main:hover div:nth-child(2){
  115.                         animation-fill-mode: backwards;
  116.                 }
  117.  
  118.                 main:hover div:nth-child(3){
  119.                         animation-fill-mode: forwards;
  120.                 }
  121.  
  122.                 main:hover div:nth-child(4){
  123.                         animation-fill-mode: both;
  124.                 }
  125.  
  126.                 @keyframes background{
  127.                         from{
  128.                                 background-color: #ff6348;
  129.                         }
  130.                         30%{
  131.                                 background-color: #ffa502;
  132.                         }
  133.                         60%{
  134.                                 background-color: #eccc68;
  135.                         }
  136.                         to{
  137.                                 background-color: #2ed573;
  138.                         }
  139.                 }
  140.  
  141.         </style>
  142. </head>
  143.  
  144. <body>
  145.         <main>
  146.  
  147.                 <div>none</div>
  148.                 <div>backwards</div>
  149.                 <div>forwards</div>
  150.                 <div>both</div>
  151.  
  152.         </main>
  153.  
  154. </body>
  155.  
  156. </html>

代码示例

简写模式

　　和CSS中的其他属性一样，可以使用animation组合定义帧动画。animation 属性是一个简写属性，用于设置六个动画属性：

    • animation-name 帧动画名字

    • animation-duration 帧动画运行时间

    • animation-timing-function 帧动画速率

    • animation-delay 帧动画播放状态（暂停/运行）

    • animation-iteration-count 帧动画循环次数

    • animation-direction 延迟时间

　　必须存在 animation-duration属性，否则过渡时间为0没有动画效果。

CSS帧动画的更多相关文章

  1. 使用javascript和css模拟帧动画的几种方法浅析

    我们平时在开发前端页面的时候,经常会播放一段帧序列.这段帧序列就像gif图片那样,反复循环播放.那大家可能会说,直接用gif图片就好了,干嘛还去模拟呢?那是因为要做得更加灵活,我们要做到以下几点: 1 ...

  2. CSS技巧：逐帧动画抖动解决方案

    笔者所在的前端团队主要从事移动端的H5页面开发,而团队使用的适配方案是: viewport units + rem.具体可以参见凹凸实验室的文章 – 利用视口单位实现适配布局 . 笔者目前(2017. ...

  3. CSS动画-step()帧动画

    Twitter使用了一种新的动画形式,使用一系列的图片来创建帧动画. 下面是一个❤动画,鼠标移动到上面开始绽放. .heart { width: 100px; height: 100px; backg ...

  4. 深入理解CSS3 Animation 帧动画

    CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...

  5. 3d图片切换（css3帧动画）

    效果带抖动翻转隐藏,使用帧动画 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  6. css3 实现逐帧动画

    css3 实现逐帧动画 实现逐帧动画需要使用到的是Animation动画,该CSS3的Animation有八个属性:分别是如下:1: animation-name2: animation-durati ...

  7. 深入理解CSS3 Animation 帧动画 ( steps )

    作者:Aaron的博客 网址:http://www.cnblogs.com/aaronjs/p/4642015.html --------------------------------------- ...

  8. 利用css3-animation来制作逐帧动画

    前言 趁着还没有元旦之前先码一篇文章,不然到时候估计又被各种虐了,所以趁现在还有力气先来一篇.今天来聊聊css3中的动画属性animation,对这个属性懵懂是在很早的时候有前辈用这个 animati ...

  9. 深入理解CSS3 Animation 帧动画（转）

    CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...

随机推荐

  1. LQR要点

    新的“A”变成着了这样:Ac = A - KB 基于对象:状态空间形式的系统 能量函数J:也称之为目标函数 Q:半正定矩阵,对角阵(允许对角元素出现0) R:正定矩阵,QR其实就是权重 下面这段话可能 ...

  2. caffe的python接口学习（5）生成deploy文件

    如果要把训练好的模型拿来测试新的图片,那必须得要一个deploy.prototxt文件,这个文件实际上和test.prototxt文件差不多,只是头尾不相同而也.deploy文件没有第一层数据输入层, ...

  3. Java使用IO流读取TXT文件

    通过BufferedReader读取TXT文件window系统默认的编码是GBK,而IDE的编码多数为UTF-8,如果没有规定new InputStreamReader(new FileInputSt ...

  4. Nginx使用upstream实现负载均衡

    如果Nginx没有仅仅只能代理一台服务器的话,那它也不可能像今天这么火,Nginx可以配置代理多台服务器,当一台服务器宕机之后,仍能保持系统可用.具体配置过程如下: 1. 在http节点下,添加ups ...

  5. 在Ubuntu 16.04上编译OpenJDK8的源代码

    本文将详细介绍在Ubuntu16.04上对OpenJDK8进行编译. 1.准备编译环境 使用的操作系统为Ubuntu16.04,如果读者没有安装Ubuntu,可以在Windows上使用虚拟机的方式进行 ...

  6. Tornado之异步非阻塞

    同步模式:同步模式下,只有处理完前一个任务下一个才会执行 class MainHandler(tornado.web.RequestHandler): def get(self): time.slee ...

  7. Spring Boot -- 启动流程分析之ApplicationContext 中

    上一节我们已经分析到AbsractApplicationContext类refresh方法中的postProcessBeanFactory方法,在分析registerBeanPostProcessor ...

  8. 相邻元素之间的margin合并问题

    任何元素都可以设置border 设置宽高可能无效 行内元素设置padding,margin上下是无效的,左右是有效的 外边距合并:指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距 ...

  9. sun.reflect.generics.reflectiveObjects.TypeVariableImpl cannot be cast to java.lang.Class

    1.首先,问题出现的点是在泛型 我出现问题的原因是,和泛型有关系,要调整泛型 2.我把问题出现的过程描述一哈子 1.基础类 @tk.mybatis.mapper.annotation.Register ...

  10. Pop!_OS安装与配置（三）：系统美化

    Pop!_OS系统美化 首先上效果图,美化完是这样的: 那么接下来就一步步进行美化吧 主要参考:Ubuntu 18.04 美化配置--leo.rd 1.安装tweak sudo apt install ...