我已经读过IE10支持动画,但是我的动画似乎不起作用。
我已经在IE11和其他浏览器中测试过,似乎工作正常。
我的代码:
div {
height: 4px;
width: 4px;
background-color: $white;
position: absolute;
-webkit-animation-name: line; /* Chrome, Safari, Opera */
-webkit-animation-duration: 2.5s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
animation-name: line;
animation-duration: 2.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
@-webkit-keyframes line {
0% {left:0px; top:0px;}
100% {left:0px; top:0px; height: 85px;}
}
@keyframes line {
0% {left:0px; top:0px;}
100% {left:0px; top:0px; height: 85px;}
}
Live URL - 这是时间轴部分。您应该看到每个框之间绘制的线条。