IE10 CSS动画

时间:2016-08-10 14:52:12

标签: css3 internet-explorer css-animations

我已经读过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 - 这是时间轴部分。您应该看到每个框之间绘制的线条。

0 个答案:

没有答案