0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Safariでkeyframeアニメーションが動かなくなった

Posted at

事象

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製品は作り込みが甘くてこういう厄介な問題を起こしがちなのが嫌なんだよなー。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?