css 动画

css中动画的书写

.map3 {
    width: 7.075rem;
    height: 7.075rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(../images/jt.png) 100% 100% no-repeat;
    animation: rotate2 10s linear infinite;
    opacity: 0.9;
  }
  @keyframes rotate2 {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }

主要语句 是

animation: rotate2 10s linear infinite;

rotate2 是动作的名称
10s 是时间
linear 是动作的速度状态
infinite 无限运动

 @keyframes rotate2 {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }