animation-timing-function：规定动画的速度曲线，默认是 “ease”

值 描述
linear 动画从头到尾的速度是相同的。匀速
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
steps() 指定了时间函数中的间隔数量(步长)

steps()的例子

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  10.   <style>
  11.     * {
  12.       margin: 0;
  13.       padding: 0;
  14.     }
  16.     div {
  17.       overflow: hidden;
  18.       width: 0;
  19.       height: 20px;
  20.       line-height: 20px;
  21.       font-size: 20px;
  22.       animation: w 4s steps(6) forwards;
  23.     }
  25.     @keyframes w {
  26.       0% {}
  28.       100% {
  29.         width: 140px;
  30.       }
  31.     }
  32.   </style>
  33. </head>
  35. <body>
  36.   <div>冰，生日快乐!</div>
  37. </body>
  39. </html>