采坑：时钟表盘中关键帧@keyframes命名相同导致多个动画用上一种效果

问题描述：

 多个div设置不同效果的关键帧 @keyframes后，显示的效果却是一样的

非理想效果：

错误代码（精简版）：

      .pointer1 {
        animation: pointermove 3s;
        @keyframes pointermove {
          from {
            transform: rotate(300deg);
          }
          to {
            transform: rotate(300deg+10deg);
          }
        }
      }
      .pointer2 {
        animation: pointermove 3s;
        @keyframes pointermove {
          from {
            transform: rotate(300deg);
          }
          to {
            transform: rotate(300deg+300deg);
          }
        }
      }

原因：

@keyframes命名重复，一个keyframes设置后属于全局的效果，此处不仅没有重新命名，每个animation还引用了同样的关键帧@keyframes

解决：

为不同的@keyframes设置不同的名字，animation应引用不同的关键帧

最终效果：