Why Isn't My CSS3 Animation Working in Safari?

CSS3 Animation Not Displaying Correctly in Safari

CSS3 animations typically work seamlessly across the majority of modern browsers. However, you may encounter issues when using them in Safari, resulting in lack of movement or incorrect rendering. One such case is demonstrated here, where a key arm animation fails to execute properly within Safari.

The Problem: CSS3 Animation Not Working in Safari

The provided code consists of CSS3 animation rules that are designed to rotate an element, but this animation is not recognized by Safari. Attempting to resize the screen reveals the presence of the element within the DOM, indicating that it is not the DOM structure causing the issue.

Safari's Specific Behavior with Keyframes

It has been discovered that Safari requires the use of full percentage values when defining Keyframes. In other browsers, it is acceptable to use abbreviated percentage values, such as "5%" or "10%". However, Safari necessitates the explicit usage of "5%" and "100%" in this context.

The Solution: Adding Full Percentage Values

By modifying the original CSS code to include full percentage values, the animation can now function correctly in Safari. The updated code below demonstrates this:

<br>@-webkit-keyframes keyarm {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">0% { -webkit-transform: rotate(0deg); }
5% { -webkit-transform: rotate(-14deg); }
10% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(0deg); }

Copy after login

}

Additional Note Regarding Safari 4

It is important to note that earlier versions of Safari, such as Safari 4, do not support the "@keyframes" syntax altogether. Consequently, it is necessary to use vendor-specific prefixes for animations in Safari 4.

The above is the detailed content of Why Isn't My CSS3 Animation Working in Safari?. For more information, please follow other related articles on the PHP Chinese website!