animation: ;
关键针动画 简写属性
需要配合@keyframes 使用
animation：
animation-name：执行动画名
animation-duration：执行动画的总时间 假设为4秒 设置的4帧的动画 没针执行的时间为 总时间/多少帧 4/4 也就是1秒
animation-timing-function：动画速度曲线

  1.                                     ease（默认值） 慢-》 快-》慢<br />                                        linear   匀速的<br />                                        ease-in   慢速开始  慢-》快<br />                                        ease-out  慢速结束   快-》慢<br />                                        ease-in-out:  慢-》快-》慢<br />     cubic-bezier() 也可以设置贝塞尔曲线<br />steps() 会取消过度效果<br />edn 保留当前帧状态，直到这段动画时间结束<br />start 保留下一帧状态，直到这段动画时间结束<br />                <br />                animation-delay  动画的延迟时间<br />                                可以为负值  负值代表的是动画立即触发 并且跳过多少秒执行<br />                animation-iteration-count : 动画执行的次数<br />                                infinite  无休止的运动<br />                animation-direction 动画运动的方向 是否做往返运动<br />                                 normal正常的0% - 100%<br />                                 reverse  反向的运动 100% - 0%<br />                                 alternate  正常的往返运动<br />                                 alternate-reverse  反向的往返运动<br />                animation-fill-mode 动画在静止状态的样式<br />                                forwards: 动画停止在最后一个关键帧的位置 假设动画开始前背景色为红色，最后一帧的动画让其颜色为黑色，默认情况下动画执行完成回复原来的样子，设置这个属性会让其保留在最后一帧的样式<br />                                backwards: 代表动画第一个关键帧立即作用 假设动画没开始前背景色为红色，第一帧的动画让其颜色变为黑色，这个属性会直接让其元素保留在第一帧动画的样式，也就背景色提前变为黑色<br />                                both: 代表的是动画第一个关键帧立即作用并且动画停止在最后一个关键帧的位置<br />                animation: 关键帧动画  设置了就会立即的去执行   不关注子属性顺序的 <br />                 但是其中的动画执行时间和动画延迟时间相对顺序是不能变得<br />   可以设置多个动画同时执行用“,”隔开

@keyframes

@keyframes里有两种写法 一种是百分数 另一种使用from代替0% to代替100% 除此之外没有其他写法

  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.         @keyframes move{
  9.             0%{
  10.                 left: 0;
  11.                 top: 0;
  13.             }
  14.             25%{
  15.                 left: 100px;
  16.                 top: 0;
  17.             }
  18.             50%{
  19.                 left: 100px;
  20.                 top: 100px;
  21.             }
  22.             75%{
  23.                 left: 0;
  24.                 top: 100px;
  25.             }
  26.             100%{
  27.                 left: 0;
  28.                 top: 0;
  29.             }
  30.         }
  31.         @keyframes cor{
  32.             from{
  33.                 background: black;
  34.             }
  35.             50%{
  36.                 background: blue;
  37.             }
  38.             to{
  39.                 background: blueviolet;
  40.             }
  41.         }
  42.         div{
  43.             position: absolute;
  44.             width: 100px;
  45.             height: 100px;
  46.             background: red;
  47.             animation: move 4s linear 5s infinite , cor 3s linear infinite;
  49.         }
  50.     </style>
  51. </head>
  52. <body>
  53.     <div></div>
  54. </body>
  55. </html>

step练习

打字效果

  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.         @keyframes cursor{
  9.             0%{
  10.                 border-left-color: rgba(0, 0, 0, 0);
  11.             }
  12.             50%{
  13.                 border-left-color: rgba(0, 0, 0, 1);
  15.             }
  16.             100%{
  17.                 border-left-color: rgba(0, 0, 0, 0);
  18.             }
  19.         }
  20.         @keyframes cover{
  21.             0%{
  22.                 left: 0;
  23.             }
  24.             100%{
  25.                 left: 100%;
  26.             }
  27.         }
  28.         div{
  29.             height: 100px;
  30.             display: inline-block;
  31.             font-size: 100px;
  32.             line-height: 100px;
  33.             font-family: monospace;
  34.             position: relative;
  35.             background-color: #f10;
  37.         }
  38.         div::after{
  39.             content: "";
  40.             position: absolute;
  41.             height: 90px;
  42.             width: 100%;
  43.             background: #fff;
  44.             left: 0;
  45.             top: 10px;
  46.             border-left: 2px solid #000;
  47.             animation: cursor 1s steps(1,end) infinite , cover 5s steps(5,end) forwards;
  48.         }
  49.     </style>
  50. </head>
  51. <body>
  52.     <div>asdff</div>
  53. </body>
  54. </html>

钟表效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.         @keyframes second {
  10.             0% {
  11.                 transform: rotate(180deg);
  12.             }
  14.             100% {
  15.                 transform: rotate(540deg);
  16.             }
  17.         }
  19.         @keyframes minute {
  20.             0% {
  21.                 transform: rotate(180deg);
  22.             }
  24.             100% {
  25.                 transform: rotate(540deg);
  26.             }
  28.         }
  30.         @keyframes hour {
  31.             0% {
  32.                 transform: rotate(180deg);
  33.             }
  35.             100% {
  36.                 transform: rotate(540deg);
  37.             }
  39.         }
  41.         .clock {
  42.             width: 512px;
  43.             height: 512px;
  44.             background: url(/img/clock.png);
  45.             background-size: cover;
  46.             background-repeat: no-repeat;
  47.             position: relative;
  48.         }
  50.         .second {
  51.             width: 16px;
  52.             height: 278px;
  53.             background: url(/img/second.png);
  54.             background-size: cover;
  55.             background-repeat: no-repeat;
  56.             position: absolute;
  57.             left: 247px;
  58.             top: 180px;
  59.             z-index: 3;
  60.             transform-origin: center 76px;
  61.             transform: rotate(180deg);
  62.             animation: second 60s steps(60, end) infinite;
  64.         }
  66.         .minute {
  67.             width: 32px;
  68.             height: 218px;
  69.             background: url(/img/minute.png);
  70.             background-size: cover;
  71.             background-repeat: no-repeat;
  72.             position: absolute;
  73.             left: 238px;
  74.             top: 240px;
  75.             z-index: 2;
  76.             transform-origin: center 16px;
  77.             transform: rotate(180deg);
  78.             animation: minute 3600s steps(60, end) infinite;
  80.         }
  82.         .hour {
  83.             width: 32px;
  84.             height: 148px;
  85.             background: url(/img/hour.png);
  86.             background-size: cover;
  87.             background-repeat: no-repeat;
  88.             position: absolute;
  89.             left: 238px;
  90.             top: 240px;
  91.             z-index: 1;
  92.             transform-origin: center 16px;
  93.             transform: rotate(180deg);
  94.             animation: hour 43200s steps(12,end) infinite;
  97.         }
  98.     </style>
  99. </head>
  101. <body>
  102.     <section class="clock">
  103.         <div class="second"></div>
  104.         <div class="minute"></div>
  105.         <div class="hour"></div>
  106.     </section>
  107. </body>
  109. </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.     <style>
  8.         @keyframes run{
  9.             0%{
  10.                 background-position: 0 0;
  11.             }
  12.             100%{
  13.                 background-position: -2400px 0;
  14.             }
  15.         }
  16.         .horse{
  17.             width: 200px;
  18.             height: 100px;
  19.             background: url(/img/horse.png);
  20.             background-position: 0 0;
  21.             background-repeat: no-repeat;
  22.             animation: run .5s steps(12,end) infinite;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div class="horse">
  29.     </div>
  30. </body>
  31. </html>

stop所需的图片资源 ⬇
img.rar