▲TOPへ戻る

【CSS】safariでアニメーション(rotate3d)が効かない時の対処法

checkbox

以前にjavascriptでサイコロを作る方法を紹介しました。HTML, CSS,javascriptは以下を参考にしてください。今回は関係する部分だけを紹介します。

js
【Javascript】画像をランダム表示させ、ボードゲーム用のサイコロを作る
js
【javascript】サイコロを3Dアニメーションさせる方法

safariでアニメーションが効かない?

下に二つのサイコロがあります。safariで開いた場合、右のサイコロは2Dでアニメーションできていません。

対処法

以下の書き方では動きません

  @keyframes rotate-animation1 {
    from {
      transform: rotate3d(1, 1, 1, 0deg);
    }
    to {
      transform: rotate3d(1, 1, 1, 360deg);
    }
  }

以下のように90degごとに区切って書くと動いてくれます。

  @keyframes rotate-animation {
    from {
      transform: rotate3d(1, 1, 1, 0deg);
    }
    25% {
      transform: rotate3d(1, 1, 1, 90deg);
    }
    50% {
      transform: rotate3d(1, 1, 1, 180deg);
    }
    75% {
      transform: rotate3d(1, 1, 1, 270deg);
    }
    to {
      transform: rotate3d(1, 1, 1, 360deg);
    }
  }

safariはちょっと気難しいブラウザですね。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。

パソコン

javascript

カメラ

ブログ