cover-image 再真机上不能执行动画操作,开发者工具是可以的?

代码片段:

    .square {

      position: absolute;

      top: 0;

      left: 0;

      width: 124rpx;

      height: 120rpx;

      backface-visibility:hidden;

      animation: roatate1 800ms linear infinite;

      -webkit-animation: roatate1 800ms linear infinite;

      transition: all 1s;

    }

@keyframes roatate1 {

  0% {

    -webkit-transform: rotateY(0);

    -ms-transform: rotateY(0);

    -o-transform: rotateY(0);

    transform: rotateY(0);

  }

  100% {

    -webkit-transform: rotateY(360deg);

    -ms-transform: rotateY(360deg);

    -o-transform: rotateY(360deg);

    transform: rotateY(360deg);

  }

}

//wxml

   <!– 动画图  –>

    <cover-view class=“icon”>

      <cover-image

        src=“https://cmspic-10004025.image.myqcloud.com/770329f0-0cc8-11ea-a23b-61ccb1018642\_size\_124x120”

        class=“box”

      ></cover-image>

      <cover-image

        src=“https://cmspic-10004025.image.myqcloud.com/9694ad20-0cc8-11ea-a23b-61ccb1018642\_size\_124x120”

        class=“square”

      />

      <cover-image

        src=“https://cmspic-10004025.image.myqcloud.com/cd250790-0cc8-11ea-a23b-61ccb1018642\_size\_124x120”

        class=“kw”

      ></cover-image>

    </cover-view>