You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
713
-
714
-
<div class="example">
715
-
<p style="display:none">
716
-
Example(s):
717
-
718
-
<pre>
719
-
@keyframes 'border-bloat' {
720
-
from {
721
-
border-width: 0;
722
-
}
723
-
to {
724
-
border-width: 10px;
725
-
}
726
-
}
727
-
728
-
@keyframes 'border-diet' {
729
-
from {
730
-
border-width: 4px;
731
-
}
732
-
to {
733
-
border-width: 2px;
734
-
}
735
-
}
736
-
737
-
div {
738
-
animation-name: 'border-bloat', 'border-diet';
739
-
animation-duration: 10s, 4s;
740
-
}
741
-
</pre>
742
-
<p>
743
-
The above example has two animations executing on the same property, 'border-width'. The animations are additive. That is, the
744
-
resulting value for the property will be the addition of the values from the
745
-
two animations.
746
-
747
-
<p>
748
-
At time '0s' the element's border will be 4px wide (0px from 'border-bloat' plus 4px from 'border-diet').
749
-
At time '4s' the element's border will be 6px wide (4px from 'border-bloat' plus 2px from 'border-diet').
750
-
At time '10s' the element's border will be 10px wide (10px from 'border-bloat' and no addition from
751
-
'border-diet' as it is no longer executing).
752
-
753
-
</div>
754
-
-->
715
+
<p>
716
+
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.
717
+
718
+
<div class="example">
719
+
<p style="display:none">
720
+
Example(s):
721
+
722
+
<pre>
723
+
@keyframes 'border-bloat' {
724
+
from {
725
+
border-width: 0;
726
+
}
727
+
to {
728
+
border-width: 10px;
729
+
}
730
+
}
731
+
732
+
@keyframes 'border-diet' {
733
+
from {
734
+
border-width: 4px;
735
+
}
736
+
to {
737
+
border-width: 2px;
738
+
}
739
+
}
740
+
741
+
div {
742
+
animation-name: 'border-bloat', 'border-diet';
743
+
animation-duration: 10s, 4s;
744
+
}
745
+
</pre>
746
+
<p>
747
+
The above example has two animations executing on the same property, 'border-width'. The animations are additive. That is, the
748
+
resulting value for the property will be the addition of the values from the
749
+
two animations.
750
+
751
+
<p>
752
+
At time '0s' the element's border will be 4px wide (0px from 'border-bloat' plus 4px from 'border-diet').
753
+
At time '4s' the element's border will be 6px wide (4px from 'border-bloat' plus 2px from 'border-diet').
754
+
At time '10s' the element's border will be 10px wide (10px from 'border-bloat' and no addition from
755
+
'border-diet' as it is no longer executing).
756
+
757
+
</div>
758
+
-->
755
759
756
760
<h3id=animation-duration-property><spanclass=secno>4.3. </span> The ‘<a
0 commit comments