888678 - animation and animation-fill-mode in same css class results in animation not detected

Status: RESOLVED INVALID

(Firefox :: Untriaged, defect)

Description

[adrianmoya]

Attachment: aem.css contains css for the animation (perroagato y gatoaperro)

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/28.0.1500.52 Chrome/28.0.1500.52 Safari/537.36

Steps to reproduce:

http://adrianmoya.com/presentaciones/bdd-php-phpcolombia-12062013/#/2/8
This slide has an image with css: 
.gatoaperro {
	animation: gatoaperro 5s ease 0 1 normal;
	-webkit-animation: gatoaperro 5s ease 0 1 normal;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
}
When you press the down key, the image should rotate


Actual results:

Dev tools shows that the class is picked up but only the animation-fill-mode property is detected, so it doesn't fire the animation. 


Expected results:

The animation css property should be detected and the image should rotate when pressing down key (and rotate back when pressing up, see results in chrome browser)

Comment 1

[Alice0775 White]

CSS Values and Units, <time> unit identifier is required for zero(0).

animation: gatoaperro 5s ease 0s 1 normal;