987777 - CSS3 animation parsing failed

Status: RESOLVED INVALID

(Firefox :: Untriaged, defect)

Description

[Nov_fr]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:28.0) Gecko/20100101 Firefox/28.0 (Beta/Release)
Build ID: 20140314220517

Steps to reproduce:

Tried to create an animation using the CSS3 animation keyword:

div#invitation { animation: animatedInvite 2s ease 0 1 normal forwards; }

I followed the syntax given in MDN:

<single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>

https://developer.mozilla.org/en-US/docs/Web/CSS/animation


Actual results:

Error in parsing value for 'animation'.  Declaration dropped.
div#invitation { animation: animatedInvite 2s ease 0 1 normal forwards;
--------------------------------------------------^

Firefox does not recognize animation-iteration-count anymore (worked with version 27 or 26, I don't remember exactly)


Expected results:

An animation :o

Animation works in Internet Explorer 11 and Chrome (using the -webkit-animation keyword)

If I use the following lines:
animation: animatedInvite 2s ease 0;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
It works as intended with Firefox 28.

Note: FireFox Nightly 30.0a1 and 31.0a1 failed to parse animation too.

Comment 1

[Nov_fr]

Fixed using "0s" instead of "0" for animation-delay.

div#invitation { animation: animatedInvite 2s ease 0s 1 normal forwards; }

Comment 2

[David Blayney]

(In reply to Nov_fr from comment #1)
> Fixed using "0s" instead of "0" for animation-delay.
> 
> div#invitation { animation: animatedInvite 2s ease 0s 1 normal forwards; }

Would you consider this matter closed? If so I will close the bug.

Comment 3

[Nov_fr]

Yes, it is closed :)

Comment 4

[maram_soft]

Thanks for adding this report can you give one example where the page is broken

Comment 5

[Nov_fr]

http://www.allstarmagicthegathering.fr/Accueil.html

In Design/divers.css line 249.