CSS3关键帧铬不工作 [英] css3 keyframes not working in chrome

问题描述

由于某些原因如下code没有在Chrome的工作，但在Firefox它：

For some reason the following code doesn't work in Chrome but in Firefox it does:

p.subtitle{
    margin-top:9px;
    font-size:15px;
    font-family: 'din_mediumregular',Arial, Helvetica, sans-serif;
}

a:hover .option-wrapper p.subtitle{
    -webkit-animation: moveFromRight 600ms ease;
    -moz-animation: moveFromRight 600ms ease;   
    -o-animation: moveFromRight 600ms ease; 
    animation: moveFromRight 600ms ease;        
}


@-webkit-keyframes moveFromRight{
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0%);
    }
}

@-moz-keyframes moveFromRight{
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0%);
    }
}

@-o-keyframes moveFromRight{
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0%);
    }
}

@keyframes moveFromRight{
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0%);
    }
}

是不是有什么毛病code？正如你可以看到它包括-webkit-动画和@ -webkit-关键帧，所以我不能确定。

Is there something wrong with the code? As you can see it includes -webkit-animation and @-webkit-keyframes so I'm unsure.

推荐答案

这应该是

@-webkit-keyframes moveFromRight{
    from {
        -webkit-transform: translateX(100%);
    }
    to {
        -webkit-transform: translateX(0%);
    }
}

这篇关于CSS3关键帧铬不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！