666464 - CSS transition and CSS animation conflict when both are used.

Status: RESOLVED INCOMPLETE

(Core :: CSS Parsing and Computation, defect)

Description

[Tyler Crompton]

User-Agent:       Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:6.0a2) Gecko/20110621 Firefox/6.0a2
Build Identifier: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:6.0a2) Gecko/20110621 Firefox/6.0a2

Firefox 4 supports CSS transitions but not CSS animations. Firefox 5+ supports both. However, when both are used on the same CSS property, it "breaks" the property. Both are fighting for control over the property and it's not very pretty. I particularly like how the latest versions of Chrome and Safari handle it. When CSS animations are present in conjunction with CSS transitions in these browsers, CSS transitions have no role on the page. CSS animations take full control of the property.

Reproducible: Always

Steps to Reproduce:
Just set up an HTML page with an element in which one of its CSS properties are modified by both animations and transitions.

Actual Results:  
The two CSS 3 properties fight for control of the property they are to modify.

Expected Results:  
CSS animation properties should be given full priority over CSS transitions when modifying the same properties.

Comment 1

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(In reply to comment #0)
> Just set up an HTML page with an element in which one of its CSS properties
> are modified by both animations and transitions.

Could you attach the page you made using the "Add an attachment" link above?

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Not enough information to do anything here, though it might end up being fixed by bug 960465.

Comment 3

[dmatei13]

If transition-property: all is used, the animation starts to fire again even if animation-fill-mode: forwards; is used for the animation. Specific property (eg. background-color) will avoid the conflict.