Firefox在逗号分隔的声明中忽略了一个动画

时间:2014-12-15 18:16:58

标签: css3 firefox css-animations

Firefox忽略了第一个动画(cursorfadein)的声明,同时显示了处理移动和淡出的动画。我尝试过使用0s0ms代码等单位。

@-moz-keyframes cursorfadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@-moz-keyframes cursormover {
    0% {
        top: 300px;
        right: 90px;
    }
    50%, 60% {
        top: 204px;
        right: 234px;
    }
    100% {
        top: 300px;
        right: 290px;
    }
}
@-moz-keyframes cursorhider {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
.cursor {
    position: absolute;
    background: url(https://cdn.mediacru.sh/A/AhRlh9cYN5sf.png) no-repeat;
    background-size: contain;
    display: block;
    height: 20px;
    width: 20px;
    -webkit-animation: cursorfadein 3s ease 0s, cursormover 3s ease-in-out 2s both, cursorhider 1s linear 6s both;
    -moz-animation: cursorfadein 3s ease 0s, cursormover 3s ease-in-out 2s both, cursorhider 1s linear 6s both;
    animation: cursorfadein 3s ease 0s, cursormovein 3s ease-in-out 2s both, cursorhider 1s linear 6s both;
}

我也有-webkit-和非前缀的@keyframes(包含在Codepen中),只是想在这里简要介绍一下

Codepen here

0 个答案:

没有答案