問題描述

我正在為我正在進行的項目編寫自定義動畫.這個想法是，動畫的目的是類似于一個感嘆號，從基線上脫臼，擺動片刻，然后完全從基線上掉下來.

I'm writing a custom animation for a project I'm working on. The idea is that the animation is meant to resemble an exclamation mark becoming unhinged from the baseline, swinging for a moment, and then falling off the baseline entirely.

由于某種原因，只有 Safari(OSX 和 iOS)拒絕將第一個動畫關鍵幀渲染為我制作的 CSS 動畫中的順時針旋轉.相反，它將關鍵幀渲染為逆時針動畫，但隨后可以正常處理以下動畫關鍵幀.

For some reason, only Safari (OSX and iOS) refuses to render the first animation keyframe as a clockwise rotation in a CSS animation I've made. Instead, it renders the keyframe as a counter-clockwise animation, but then works just fine for the following animation keyframes.

工作 CodePen 示例:http://codepen.io/michaelmarcialis/pen/obPYPO

Working CodePen example: http://codepen.io/michaelmarcialis/pen/obPYPO

@keyframes unhinged {
  0% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(240deg);
  }
  30% {
    transform: rotate(125deg);
  }
  45% {
    transform: rotate(220deg);
  }
  60% {
    transform: rotate(145deg);
  }
  75% {
    opacity: 1;
    transform: rotate(200deg);
  }
  90% {
    opacity: 0;
    transform: translate(-0.5rem, 8.57142857142857rem) rotate(215deg);
  }
  95% {
    opacity: 0;
    transform: translate(0) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}

所有其他瀏覽器按預期呈現動畫，第一個動畫關鍵幀順時針旋轉.Safari 是唯一在初始關鍵幀中應用逆時針旋轉的設備.我假設 Safari 這樣做是因為逆時針旋轉時旋轉的距離更短，但如果是這種情況，它就不能正確地遵守 CSS 規范.

All other browsers render the animation as intended, with the first animation keyframe rotating clockwise. Safari is the only one that applies a counter-clockwise rotation in the initial keyframe. I'm assuming Safari is doing this because the distance to travel the rotation is shorter when going counter-clockwise, but it's not honoring the CSS spec properly if that's the case.

有誰知道解決這個問題的方法嗎?

Does anyone know a remedy for this?

推薦答案

問題是，如果您嘗試在 safari 中為大于 180 度的旋轉設置動畫，它將改為以其他方式旋轉.因此，如果您嘗試旋轉 +270 度，Safari 將動畫旋轉 -90 度.

The problem is that if you try to animate a rotate in safari greater than 180 degrees, it will instead rotate the other way. So if you try to rotate +270 degrees, Safari will animate a rotation of -90 degrees.

Safari 的解決方法是在任一方向上都不要旋轉超過 179，然后在另一段中完成剩余的旋轉.

The workaround for Safari is to never rotate more than 179 in either direction, then complete the rest of the rotation in another segment.

這篇關于Safari CSS Bug:動畫旋轉方向不正確?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！