ConnorAtherton / loaders.css

Delightful, performance-focused pure css loading animations.
https://connoratherton.com/loaders
10.22k stars 1.22k forks source link

Animation declaration dropped by Firefox #6

Closed octycs closed 9 years ago

octycs commented 9 years ago

Firefox can't parse this (example):
animation: line-scale-pulse-out-rapid 0.9s 0 infinite cubic-bezier(.11,.49,.38,.78);

After changing it to
animation: line-scale-pulse-out-rapid 0.9s 0s infinite cubic-bezier(.11,.49,.38,.78);
it works.

J3RN commented 9 years ago

After seeing the demo, I came here to open this issue, and looks like you beat me to it! Let me know if you guys need any help with this.

octycs commented 9 years ago

Thanks for fixing, @mixxorz.

octycs commented 9 years ago

Sorry, that was too early. Some animations still don't work:

  1. Firefox can't parse animation name in quotes: $animations: "ball-triangle-path-1" "ball-triangle-path-2" "ball-triangle-path-3"; Instead it should be $animations: ball-triangle-path-1 ball-triangle-path-2 ball-triangle-path-3; 2.animation-delay: 0; should be animation-delay: 0s;.
ConnorAtherton commented 9 years ago

Ah, my bad. Do you want to fix this and just tell me when you think it is ready to be merged? The ball-triangle-trace animation seems to be the only one that isn't working correctly in firefox.

octycs commented 9 years ago

It's ready to be merged: #9 , but I have to correct myself: You don't need to replace animation-delay: 0; because it is always overwritten.