事象
keyframeアニメーションが、いつの間にかSafariで動かなくなっていた。
元々は要素にホバーすると要素が上に消えて下から出てくるアニメーションだったが、
0%の時点で、要素が消え、100%の時点で再度表示される点滅になってしまっていた。
@keyframes textRollUp {
0% { transform: translateY(0); }
30% { transform: translateY(-100%); opacity: 0; }
30.1%{ transform: translateY(50%); opacity: 0; }
100% { transform: translateY(0); }
}
.wrapper:hover .txt {
animation: textRollUp 0.5s linear;
}
対策
極小のdelayを追加すると問題が解消された。
.wrapper:hover .txt {
animation: textRollUp 0.5s linear 0.001s;
}
Apple製品は作り込みが甘くてこういう厄介な問題を起こしがちなのが嫌なんだよなー。