解决css transform和animation不能同时生效的问题「建议收藏」

在同一个类上同时使用transform和animation是不能生效的，解决方法是给该类外面再包一层，在外面的类上添加animation效果，在里面的类上添加transform效果

<div class="jiant">
<div> <i class="jaintou"></i></div>
<div> <i class="jaintou"></i></div>
</div>

 .jiant { 
   
 display: flex;
 justify-content: center;
 align-items: center;
 margin-top: -0.85rem; > div { 
   
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          animation: animatebig1 2s infinite linear;
        }
        .jaintou { 
   
          width: 1.025rem;
          height: 2.15rem;
          background: url('./img/water/jiantou.png') no-repeat;
          background-size: 100% 100%;
          transform: rotate(-90deg);
        }
      }
     @keyframes animatebig1 { 
   
    0% { 
   
      transform: scale(1);
    }
    25% { 
   
      transform: scale(1.2);
    }
    50% { 
   
      transform: scale(1);
    }
    75% { 
   
      transform: scale(1.2);
    }
    100% { 
   
      transform: scale(1);
    }
  }

实现效果如下：

今天的文章解决css transform和animation不能同时生效的问题「建议收藏」分享到此就结束了，感谢您的阅读。