为什么关键帧适用于Firefox而不适用于Chrome？

Question

我添加了一些航点，以便在向下滚动时激活动画。将不透明度从0更改为1的动画效果很好，但旋转动画仅适用于Firefox。为什么？

    .icon-animate{
        opacity: 1;
        animation: icon-rotation 750ms linear;
    }

    @-webkit-keyframes icon-rotation{
        0% {
            -webkit-transform: rotate(-90deg);
        }
        100% {
            -webkit-transform: rotate(0deg);
        }
    }
    @-moz-keyframes icon-rotation{
        0% {
            -moz-transform: rotate(-90deg);
        }
        100% {
            -moz-transform: rotate(0deg);
        }
    }

Answer 1

您还需要为animation添加前缀，请参阅以下内容。

.icon-animate{
    opacity: 1;
    -webkit-animation: icon-rotation 750ms linear;
    -moz-animation: icon-rotation 750ms linear;
    animation: icon-rotation 750ms linear;
}

.icon-animate{
    opacity: 1;
    -webkit-animation: icon-rotation 750ms linear;
    -moz-animation: icon-rotation 750ms linear;
    animation: icon-rotation 750ms linear;
}
@-webkit-keyframes icon-rotation{
    0% {
        -webkit-transform: rotate(-90deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}
@-moz-keyframes icon-rotation{
    0% {
        -moz-transform: rotate(-90deg);
    }
    100% {
        -moz-transform: rotate(0deg);
    }
}

<div class="icon-animate">demo</div>

小提琴演示： http://jsfiddle.net/mpu08kwx/