1. 涉及動畫的元素最好用塊級標籤，如div ，嚴禁用span i 等行類標籤，用行類標籤導致動畫在ios中不執行而在安卓正常，

如下圖的藍色行，最好用div。

2. ios中，父級設定border-radius和overflow：hidden之後，子級如有動畫，且動畫軌跡超出父級，則ios手機上會發現overflow：hidden失效，動畫元素在圓角區域可見，解決辦法是在父級加如下屬性

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

mask-image:   url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)
 

動畫卡頓：

-webkit-backface-visibility: hidden;

backface-visibility:hidden;

-webkit-perspective: 1000;

perspective: 1000;

骨架圖動畫

.lazy-ani01 {
  -webkit-animation: lazy-ani 2s linear infinite;
  animation: lazy-ani 2s linear infinite;
  -webkit-transform-origin:0 0;
  transform-origin:0 0;
}
.lazy-ani02 {
  -webkit-animation
 
: lazy-ani 2s 1s linear infinite;
  animation: lazy-ani 2s 1s linear infinite;
  -webkit-transform-origin:0 0;
  transform-origin:0 0;
}
@-webkit-keyframes lazy-ani {
  0%,100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  50% {
    -webkit-transform: scaleX(.5);
    transform: scaleX(.5)
 
;
  }
}
@keyframes lazy-ani {
  0%,100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  50% {
    -webkit-transform: scaleX(.5);
    transform: scaleX(.5);
  }
}