alternate关键字与钟摆运动示意实例页面

展示

代码

• HTML：

  <div class="clock-pendulum"></div>

• CSS：

  .clock-pendulum {
      width: 20px; height: 100px;
      background: radial-gradient(10px at left 50% bottom 10px, deepskyblue 100%, transparent 0) no-repeat center,
      radial-gradient(4px at 50% 4px, deepskyblue 100%, transparent 0) no-repeat center,
      linear-gradient(to right, currentColor, currentColor) no-repeat center;
      background-size: 100%, 100%, 2px 100%;
      margin: auto;
  }
  /* 动画相关 */
  .clock-pendulum {
      transform-origin: center 4px;
      animation: pendulum 1s infinite alternate ease-in-out;
  }
  @keyframes pendulum {
      0%   { transform: rotate(-10deg); }
      100% { transform: rotate(10deg); }
  }