代碼是這樣子的，

因為有動畫需求大概是，需要同一個動作做兩次，但是第二個會延遲1s執行

PC端是可以順利進行的，就是會有執行兩個動作

但是到了ios，就會發現，動畫只執行第二個，第一個不執行了(即是：動畫只出現了延遲1S，以.6s的速度完成的情況)。

除非分開寫兩個動畫，然后彼此之間變化的值還不能一樣。。

即： test_2動畫這樣，100%的時候，原本是rotate(-180deg), 改成rotate(-180.1deg)

有沒有人遇到過這個問題呢？

動畫

.test{

width: 100px;

height: 100px;

background: #fd6e3b;

-webkit-animation: test_1 .6s ease-in-out 1 forwards ,

test_1 .6s 1s ease-in-out 1 forwards;

}

@-webkit-keyframes test_1

{

0% {

-webkit-transform: rotate(0);

}

100% {

-webkit-transform: rotate(-180deg);

}

}

@-webkit-keyframes test_2

{

0% {

-webkit-transform: rotate(0);

}

100% {

-webkit-transform: rotate(-180.1deg);

}

}

總結

以上是生活随笔為你收集整理的android 动画多次使用,IOS使用animation引用同一个动画多次没反应，安卓可以的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。