Skip to content

Commit 6be0ea9

Browse files
author
Sylvain Galineau
committed
[css3-animations] Resolution: !important user and author rules override animations (bug 15249)
1 parent 89106d5 commit 6be0ea9

2 files changed

Lines changed: 55 additions & 54 deletions

File tree

‎css3-animations/Overview.html‎

Lines changed: 53 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@
77
<link href="http://purl.org/dc/terms/" rel=schema.DC>
88
<meta content="CSS Animations" name=DC.title>
99
<meta content=text name=DC.type>
10-
<meta content=2012-09-20 name=DC.issued>
10+
<meta content=2012-10-01 name=DC.issued>
1111
<meta content="http://dev.w3.org/csswg/css3-animations/" name=DC.creator>
1212
<meta content=W3C name=DC.publisher>
13-
<meta content="http://www.w3.org/TR/2012/ED-css3-animations-20120920/"
13+
<meta content="http://www.w3.org/TR/2012/ED-css3-animations-20121001/"
1414
name=DC.identifier>
1515
<link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
1616
rel=DC.rights>
@@ -19,8 +19,8 @@
1919
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
2020
type="text/css">
2121
<style type="text/css">
22-
div.prod { margin: 1em 2em; }
23-
</style>
22+
div.prod { margin: 1em 2em; }
23+
</style>
2424

2525
<body>
2626
<div class=head> <!--begin-logo-->
@@ -29,15 +29,14 @@
2929

3030
<h1>CSS Animations</h1>
3131

32-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 20 September
33-
2012</h2>
32+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 1 October 2012</h2>
3433

3534
<dl>
3635
<dt>This version:
3736

3837
<dd><a
39-
href="http://www.w3.org/TR/2012/ED-css3-animations-20120920/">http://dev.w3.org/csswg/css3-animations/</a>
40-
<!--http://www.w3.org/TR/2012/WD-css3-animations-20120920/-->
38+
href="http://www.w3.org/TR/2012/ED-css3-animations-20121001/">http://dev.w3.org/csswg/css3-animations/</a>
39+
<!--http://www.w3.org/TR/2012/WD-css3-animations-20121001/-->
4140

4241
<dt>Latest version:
4342

@@ -308,7 +307,8 @@ <h2 id=animations><span class=secno>2. </span> Animations</h2>
308307
<p> CSS Animations affect computed property values. During the execution of
309308
an animation, the computed value for a property is controlled by the
310309
animation. This overrides the value specified in the normal styling
311-
system.
310+
system. Animations override all normal rules, but are overriden by
311+
!important rules.
312312

313313
<p> If at one point in time there are multiple animations specifying
314314
behavior for the same property, the animation whose name occurs last in
@@ -657,50 +657,50 @@ <h3 id=animation-name-property><span class=secno>3.2. </span> The ‘<a
657657
id=single-animation-name>&lt;single-animation-name&gt;</dfn> = none |
658658
&lt;IDENT&gt;</div>
659659
<!--
660-
<p>
661-
It is possible for elements to have multiple animations running that change the same property or properties. In this case the animations combine in a manner defined by the property. For example, animations on 'opacity' will add together and animations on 'transform' will have their transformation matrices multiplied.
662-
663-
<div class="example">
664-
<p style="display:none">
665-
Example(s):
666-
667-
<pre>
668-
@keyframes 'border-bloat' {
669-
from {
670-
border-width: 0;
671-
}
672-
to {
673-
border-width: 10px;
674-
}
675-
}
676-
677-
@keyframes 'border-diet' {
678-
from {
679-
border-width: 4px;
680-
}
681-
to {
682-
border-width: 2px;
683-
}
684-
}
685-
686-
div {
687-
animation-name: 'border-bloat', 'border-diet';
688-
animation-duration: 10s, 4s;
689-
}
690-
</pre>
691-
<p>
692-
The above example has two animations executing on the same property, 'border-width'. The animations are additive. That is, the
693-
resulting value for the property will be the addition of the values from the
694-
two animations.
695-
696-
<p>
697-
At time '0s' the element's border will be 4px wide (0px from 'border-bloat' plus 4px from 'border-diet').
698-
At time '4s' the element's border will be 6px wide (4px from 'border-bloat' plus 2px from 'border-diet').
699-
At time '10s' the element's border will be 10px wide (10px from 'border-bloat' and no addition from
700-
'border-diet' as it is no longer executing).
701-
702-
</div>
703-
-->
660+
<p>
661+
It is possible for elements to have multiple animations running that change the same property or properties. In this case the animations combine in a manner defined by the property. For example, animations on 'opacity' will add together and animations on 'transform' will have their transformation matrices multiplied.
662+
663+
<div class="example">
664+
<p style="display:none">
665+
Example(s):
666+
667+
<pre>
668+
@keyframes 'border-bloat' {
669+
from {
670+
border-width: 0;
671+
}
672+
to {
673+
border-width: 10px;
674+
}
675+
}
676+
677+
@keyframes 'border-diet' {
678+
from {
679+
border-width: 4px;
680+
}
681+
to {
682+
border-width: 2px;
683+
}
684+
}
685+
686+
div {
687+
animation-name: 'border-bloat', 'border-diet';
688+
animation-duration: 10s, 4s;
689+
}
690+
</pre>
691+
<p>
692+
The above example has two animations executing on the same property, 'border-width'. The animations are additive. That is, the
693+
resulting value for the property will be the addition of the values from the
694+
two animations.
695+
696+
<p>
697+
At time '0s' the element's border will be 4px wide (0px from 'border-bloat' plus 4px from 'border-diet').
698+
At time '4s' the element's border will be 6px wide (4px from 'border-bloat' plus 2px from 'border-diet').
699+
At time '10s' the element's border will be 10px wide (10px from 'border-bloat' and no addition from
700+
'border-diet' as it is no longer executing).
701+
702+
</div>
703+
-->
704704

705705
<h3 id=animation-duration-property><span class=secno>3.3. </span> The ‘<a
706706
href="#animation-duration"><code

‎css3-animations/Overview.src.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,8 @@ <h2 id="animations">
120120
During the execution of an animation,
121121
the computed value for a property is controlled by the animation.
122122
This overrides the value specified in the normal styling system.
123-
123+
Animations override all normal rules, but are overriden by
124+
!important rules.
124125

125126
<p>
126127
If at one point in time there are multiple animations specifying behavior for the same property,

0 commit comments

Comments
 (0)