【CSS】safariでアニメーション（rotate3d）が効かない時の対処法
以前にjavascriptでサイコロを作る方法を紹介しました。HTML, CSS,javascriptは以下を参考にしてください。今回は関係する部分だけを紹介します。
【Javascript】画像をランダム表示させ、ボードゲーム用のサイコロを作る
【javascript】サイコロを３Dアニメーションさせる方法
safariでアニメーションが効かない？
下に二つのサイコロがあります。safariで開いた場合、右のサイコロは２Dでアニメーションできていません。
対処法
以下の書き方では動きません
@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はちょっと気難しいブラウザですね。
