为什么关键帧在 Firefox 上有效但在 Chrome 上无效？

Question

我添加了一些 waypoints 以便在向下滚动时激活动画。将不透明度从 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>

Fiddle 演示： http://jsfiddle.net/mpu08kwx/

为什么关键帧在 Firefox 上有效但在 Chrome 上无效？

Why is keyframes working on Firefox but not on Chrome?

javascript

jquery

css