Firefox忽略了第一个动画(cursorfadein
)的声明,同时显示了处理移动和淡出的动画。我尝试过使用0s
和0ms
代码等单位。
@-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。