0
IE11以外のブラウザでも正しく動作するアニメーションがあります。IE11でアニメーションが正しく機能しない
$(document).ready(function() {
$('.activate').click(function() {
$('.eight-box').toggleClass('animate')
});
}());.activate {
background: black;
color: red;
border: 2px solid red;
font-size: 16px;
position: absolute;
left: 10px;
text-align: center;
}
.eight-box {
position: relative;
display: block;
margin: 1em auto;
width: 16em;
height: 16em;
font-family: sans-serif;
font-size: 20px;
border: 1px solid;
border-radius: 50%;
}
.fig-8 {
display: block;
position: absolute;
color: red;
background: black;
width: 2em;
height: 2em;
line-height: 2;
text-align: center;
font-weight: bold;
font-smoothing: antialiased;
transition: all .2s linear;
overflow: hidden;
z-index: 5;
border: 2px solid red;
}
.rotate1,
.rotate2,
.rotate3,
.rotate4 {
position: absolute;
top: 50%;
left: 0;
height: 70px;
margin-top: -35px;
width: 100%;
z-index: 1;
}
.rotate1 .pos-4,
.rotate2 .pos-4,
.rotate3 .pos-4,
.rotate4 .pos-4 {
top: 0;
left: -35px;
position: relative;
transform: rotate(-19deg);
z-index: 2;
border-radius: 50%;
}
.rotate1,
.rotate2,
.rotate3,
.rotate4 {
transform: rotate(19deg);
}
.animate .rotate4 {
animation: circularAnimation-a 1s 1s 1 forwards;
}
.animate .rotate4 .pos-4 {
animation: positioning-a 1s 1s 1 both, pulse 1s 3s 1 alternate forwards;
}
.animate .rotate3 {
animation: circularAnimation-b 1s 1s 1 forwards;
}
.animate .rotate3 .pos-4 {
transform: rotate(-220deg);
animation: pulse 1s 3s 1 alternate forwards;
}
.animate .rotate2 {
animation: circularAnimation-c 1s 1s 1 forwards;
}
.animate .rotate2 .pos-4 {
transform: rotate(50deg);
animation: pulse 1s 3s 1 alternate forwards;
}
.animate .rotate1 .pos-4 {
animation: pulse 1s 3s 1 alternate forwards;
}
@keyframes positioning-a {
0% {
transform: rotate(-19deg);
}
100% {
transform: rotate(190deg);
}
}
@keyframes circularAnimation-a {
0% {
transform: rotate(19deg);
}
100% {
transform: rotate(-190deg);
}
}
@keyframes circularAnimation-b {
0% {
transform: rotate(19deg);
}
100% {
transform: rotate(-140deg);
}
}
@keyframes circularAnimation-c {
0% {
transform: rotate(19deg);
}
100% {
transform: rotate(-50deg);
}
}
@keyframes positioning-b {
0% {
transform: rotate(23deg);
}
100% {
transform: rotate(135deg);
}
}
@keyframes circularAnimation-d {
0% {
transform: rotate(23deg);
}
100% {
transform: rotate(-135deg);
}
}
@keyframes circularAnimation-e {
0% {
transform: rotate(23deg);
}
100% {
transform: rotate(-80deg);
}
}
@keyframes circularAnimation-f {
0% {
transform: rotate(23deg);
}
100% {
transform: rotate(-20deg);
}
}
@keyframes positioning-c {
0% {
transform: rotate(10deg);
}
100% {
transform: rotate(150deg);
}
}
@keyframes circularAnimation-g {
0% {
transform: rotate(-10deg);
}
100% {
transform: rotate(-150deg);
}
}
@keyframes circularAnimation-h {
0% {
transform: rotate(-10deg);
}
100% {
transform: rotate(-55deg);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="activate">Animate</button>
<div class="eight-box">
<div class="rotate1">
<div class="fig-8 col-1 pos-4">1</div>
</div>
<div class="rotate2">
<div class="fig-8 col-2 pos-4">2</div>
</div>
<div class="rotate3">
<div class="fig-8 col-3 pos-4">3</div>
</div>
<div class="rotate4">
<div class="fig-8 col-4 pos-4">4</div>
</div>
</div>そして、ここで私は私のプロジェクトで使用しています何であるSCSSである：https://codepen.io/maketroli/pen/NgBZZL
アニメーションはChromeとFirefoxの上で素晴らしい動作しますが、IE11は、いくつかの不具合を持っています2番目の試行でクラスのアニメーションを切り替えると同じように見えるかもしれません。
提案がありますか？