CSS动画在IOS中变得断断续续/延迟

CSS动画在IOS中变得断断续续/延迟,css,animation,Css,Animation,我在div中有一个按钮,单击该按钮时会出现勾号。勾号是使用after伪类添加的。但是,在iOS设备的浏览器(Chrome和Safari)中,动画似乎会在一段时间后停止并恢复。包含按钮的div外部也有:activepsedou类对其进行转换 //outer div contains the button div:active { transform: scale(0.95); } // add tick with after pseudo class

我在
div
中有一个按钮,单击该按钮时会出现勾号。勾号是使用after伪类添加的。但是,在iOS设备的浏览器(Chrome和Safari)中,动画似乎会在一段时间后停止并恢复。包含按钮的
div
外部也有
:active
psedou类对其进行转换

 //outer div contains the button 
    div:active {
      transform: scale(0.95);
    }

    // add tick with after pseudo class
    .draw:after {
      height: 60px;
      width: 30px
      content: '';
      left: 14px;
      top: 42px;
      position: absolute;
      transform-origin: left top;
      animation-duration: 300 ms;            // animation duration applied it
      transform: scaleX(-1) rotate(120deg);  // transform applied for the tick mark
      animation-name: animate-tick;
    }

    // keyframes for animation
    // animation height and width applied 
    @keyframes animate-tick {   
      0% {
        height: 0; width: 0;
      }
      40% {
        height: 0px; width: 30px;
      }
      100% {
        height: 60px; width: 30px;
      }
    }
您是否添加了@-webkit关键帧

  • 使用@-webkit keyframes规则在CSS中创建一组命名的关键帧。该集必须至少包含一个关键帧
  • 将-webkit animation duration属性设置为正值,非零值
  • 将-webkit animation name属性设置为关键帧集的名称