我正在为我的网站使用 CSS 和动画，并且非常喜欢 Drawception 网站使用的加载 CSS 的外观。他们的代码只做一个 90 度的动画然后重置。我想让我的做一个完整的 360 度旋转，因为我的里面也会有一个图像旋转。 这是我正在使用的代码:
<style>
.loading-box2{
width: 35px;
height: 35px;
margin: 0px auto;
}
.loading-box2:before{
content: '';
width: 35px;
height: 5px;
background: #000;
opacity: 0.1;
position: absolute;
top: 44px;
right: 42%;
margin-left: -15px;
border-radius: 50%;
animation: shadow360 2s linear infinite;
}
.loading-box2:after{
content: ':o)';
line-height: 35px;
text-align: center;
font-size: 12px;
width: 35px;
height: 35px;
background: #fffdc9;
animation: boxbounce360 2s linear infinite;
position: absolute;
top: 0;
right: 42%;
margin-left: -15px;
border-radius: 3px;
border: 1px solid #c0c0c0;
/* colours here added while testing */
border-right: 1px solid #f00;
border-top: 1px solid #0f0;
border-left: 1px solid #ff0;
border-bottom: 1px solid #f0f;
}
@keyframes boxbounce360{
3.25%,24.25%,28.25%,49.25%,55.25%,74.25%,78.25%,99.25%{border-radius: 3px; border-bottom-right-radius: 3px;}
0%{transform:translateY(0) rotate(0deg)}
7.84375%{transform: translateY(9px) rotate(22.5deg)}
13.5625%{transform: translateY(18px) scale(1, .9) rotate(45deg);border-bottom-right-radius: 40px}
19.25125%{transform: translateY(9px) rotate(67.5deg)}
25%{transform: translateY(0) rotate(90deg)}
32.84375%{transform: translateY(9px) rotate(112.5deg)}
38.5625%{transform: translateY(18px) scale(1, .9) rotate(135deg);border-top-right-radius: 40px}
44.28125%{transform: translateY(9px) rotate(157.5deg)}
50%{transform: translateY(0) rotate(180deg)}
59.84375%{transform: translateY(9px) rotate(202.5deg)}
64.5625%{transform: translateY(18px) scale(1, .9) rotate(225deg);border-top-left-radius: 40px}
69.28125%{transform: translateY(9px) rotate(247.5deg)}
75%{transform: translateY(0) rotate(270deg)}
82.84375%{transform: translateY(9px) rotate(292.5deg)}
88.5625%{transform: translateY(18px) scale(1, .9) rotate(315deg);border-bottom-left-radius: 40px}
94.28125%{transform: translateY(9px) rotate(337.5deg)}
100%{transform: translateY(0) rotate(360deg)}
}
@keyframes shadow360{
0%,25%,50%,75%,100%{transform: scale(1, 1)}
13.5625%,38.5625%,64.5625%,88.5625%{transform: scale(1.2, 1)}
}
</style>
<body>
<div class="loading-box2">
</body>
还有一个 jsfiddle 的东西 here .
在 Chrome 中，动画运行完美，始终向同一方向旋转。但在 Internet Explorer 11 中，它达到 180 度然后旋转回 0! 关于如何为 IE 修复它的任何想法，最好不需要任何 Javascript，但我不介意它是否需要它。
最佳答案
我设法破解了一个修复...我添加了一个额外的关键帧:
50%{transform: translateY(0) rotate(180deg)}
50.1%{transform: rotate(180.5deg)} <---- this one
59.84375%{transform: translateY(9px) rotate(202.5deg)}
现在它不再看起来像是在 IE 上的动画中途向后旋转，即使它仍在旋转!
关于CSS3 360º 连续旋转在 Chrome 中有效，但在 IE 中旋转回来，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43307204/