我似乎在 iphone 上遇到了保持动画结束状态的问题,我的标题中的文本淡入似乎并没有保持它的结束状态,即使在添加转发时也是如此。对此有何见解?
这是CSS:
#headerwrap h1 {
color: white;
font-size: 70px;
font-weight: 300;
margin: 0;
opacity: 1;
letter-spacing: 3px;
z-index: 9999;
animation: fadeInDown 3s forwards;
-moz-animation: fadeInDown 3s forwards; /* Firefox */
-webkit-animation: fadeInDown 3s forwards; /* Safari and Chrome */
-o-animation: fadeInDown 3s forwards; /* Opera */
}
这是动画关键帧
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
-ms-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
它解决了桌面上的问题,但是当我检查我的 iphone 时,它们出现动画,然后当它们完成时文本消失。
谢谢!
最佳答案
我似乎已经通过删除 transform:none 修复了它;在 100% 帧上。
关于css 动画转发不坚持在 iphone 上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25229865/