CSS3 animation not working in safari

by

Found the solution. In Safari when you use Keyframes you need to use the whole percentage:

this won’t work: 

@-webkit-keyframes keyarm {
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(-14deg); }
    10% { -webkit-transform: rotate(0deg); }
}

this will: 

@-webkit-keyframes keyarm {
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(-14deg); }
    10% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(0deg); }
}

Don’t know why but that’s the way Safari works! 🙂

More Related Contents:

  1. Animate text for landing page
  2. Use CSS3 transitions with gradient backgrounds
  3. Maintaining the final state at end of a CSS3 animation
  4. Stopping a CSS3 Animation on last frame
  5. is there a css hack for safari only NOT chrome?
  6. How to remove the border highlight on an input text element
  7. Play multiple CSS animations at the same time
  8. :not() selector not behaving the same between Safari and Chrome/Firefox
  9. How can I transition width of content with width: auto?
  10. Passing parameters to css animation
  11. Is there a CSS hack to affect Safari only NOT Chrome?
  12. Webkit CSS Animation issue – persisting the end state of the animation? [duplicate]
  13. Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)
  14. Why can’t I animate custom properties (aka CSS variables)?
  15. CSS: Animation vs. Transition
  16. Bug in CSS3 rotateY transition on Safari?
  17. How to detect if the OS is in dark mode in browsers?
  18. Some font-size’s rendered larger on Safari (iPhone)
  19. How to make radial gradients work in Safari?
  20. Font weight turns lighter on Mac/Safari
  21. How to add animated gradient to an svg path?
  22. iOS 7 iPad Safari Landscape innerHeight/outerHeight layout issue
  23. WebKit CSS content Unicode bug?
  24. CSS Animation property stays after animating
  25. Chrome & Safari Error::Not allowed to load local resource: file:///D:/CSS/Style.css
  26. Row Wrap in flex-box not wrapping in Safari
  27. Google Font not working on Safari
  28. Why is filter(drop-shadow) causing my SVG to disappear in Safari?
  29. Disable CSS animation on pseudo element inherited from parent
  30. (Really) Long Background Image Does Not Render on iPad Safari

Leave a Comment