时间戳

首页 > 解决方案 > 为什么我的 CSS3 加载动画不能在移动设备上运行？

css - 为什么我的 CSS3 加载动画不能在移动设备上运行？

问题描述

它在桌面上运行良好，但在移动端即时获得静态而不是淡入淡出。

我把代码放在这里...

https://codepen.io/anon/pen/jvKZGW

@keyframes flickerAnimation {
0%   { opacity:1; }
50%  { opacity:0; }
100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
0%   { opacity:1; }
50%  { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
0%   { opacity:1; }
50%  { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
0%   { opacity:1; }
50%  { opacity:0; }
100% { opacity:1; }
}

.loading  {
-webkit-animation: flickerAnimation 1s infinite;
-moz-animation: flickerAnimation 1s infinite;
-o-animation: flickerAnimation 1s infinite;
animation: flickerAnimation 1s infinite;
background: #215c87;
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
top: 10px;
right: 10px;
}

标签： cssanimationmobile

解决方案

推荐阅读