Несколько анимаций подряд css

Play multiple CSS animations at the same time

http://jsfiddle.net/Ugc5g/3388/ — only one animation (the last one declared) plays.

Should the image scale while it is rotating? The answer I have provided doesn’t but if that is what you need then it can be tweaked to do that

6 Answers 6

You can specify multiple animations—each with their own properties—with a comma.

animation: rotate 1s, spin 3s; 

@little-tiny-man delays can be specified as part of animation shorthand form, e.g. rotate 1s 0.5s, spin 3s 10s for 0.5 and 10s delays respectively.

No, this doesn’t work. Two animations are running serially not parallely. Here it looks like working because delays are very small if you increase the duration you will see the difference.

@sgrpwr Do you have an example somewhere? When multiple animations have been defined for a single element, those should apply in parallel, not in sequence (or serial). Note that if multiple animations modify the same property in parallel it may appear to behave incorrectly because only the last effect will stay.

TL;DR

With a comma, you can specify multiple animations each with their own properties as stated in the CriticalError answer below.

animation: rotate 1s, spin 3s; 

Original answer

There are two issues here:

-webkit-animation:spin 2s linear infinite; -webkit-animation:scale 4s linear infinite; 

The second line replaces the first one. So, has no effect.

Both keyframes applies on the same property transform

As an alternative you could to wrap the image in a and animate each one separately and at different speeds.

.scaler < position: absolute; top: 100%; left: 50%; width: 120px; height: 120px; margin:-60px 0 0 -60px; animation: scale 4s infinite linear; >.spinner < position: relative; top: 150px; animation: spin 2s infinite linear; >@keyframes spin < 100% < transform: rotate(180deg); >> @keyframes scale < 100% < transform: scaleX(2) scaleY(2); >>

Can you add a delay between the two animations in your example? animation: rotate 1s, spin 3s; . So rotate runs, then pause for X seconds, then run spin animation.

animation: rotate 1s forward 5s, spin 3s forward 4s; In this, 5s is the delay for rotate animation and 4s is the delay for spin animation. @wharfdale

You can indeed run multiple animations simultaneously, but your example has two problems. First, the syntax you use only specifies one animation. The second style rule hides the first. You can specify two animations using syntax like this:

-webkit-animation-name: spin, scale -webkit-animation-duration: 2s, 4s 

Источник

animation-composition

The animation-composition CSS property specifies the composite operation to use when multiple animations affect the same property simultaneously.

Syntax

/* Single animation */ animation-composition: replace; animation-composition: add; animation-composition: accumulate; /* Multiple animations */ animation-composition: replace, add; animation-composition: add, accumulate; animation-composition: replace, add, accumulate; /* Global values */ animation-composition: inherit; animation-composition: initial; animation-composition: revert; animation-composition: revert-layer; animation-composition: unset; 

Note: When you specify multiple comma-separated values on an animation-* property, they will be applied to the animations in the order in which the animation-name s appear. If the number of animations and compositions differ, the values listed in the animation-composition property will cycle from the first to the last animation-name , looping until all the animations have an assigned animation-composition value. For more information, see Setting multiple animation property values.

Values

The effect value overrides the underlying value of the property. This is the default value.

The effect value builds on the underlying value of the property. This operation produces an additive effect. For animation types where the addition operation is not commutative, the order of the operands is the underlying value followed by the effect value.

The effect and underlying values are combined. For animation types where the addition operation is not commutative, the order of the operands is the underlying value followed by the effect value.

Description

Each property that is targeted by the @keyframes at-rule is associated with an effect stack. The value of the effect stack is calculated by combining the underlying value of a property in a CSS style rule with the effect value of that property in the keyframe. The animation-composition property helps to specify how to combine the underlying value with the effect value.

For example, in the CSS below, blur(5px) is the underlying value, and blur(10px) is the effect value. The animation-composition property specifies the operation to perform to produce the final effect value after compositing the effect of the underlying value and the effect value.

.icon:hover  filter: blur(5px); animation: 3s infinite pulse; animation-composition: add; > @keyframes pulse  0%  filter: blur(10px); > 100%  filter: blur(20px); > > 

Consider different values for the animation-composition property in the above example. The final effect value in each of those cases will be calculated as explained below:

• With replace , blur(10px) will replace blur(5px) in the 0% keyframe. This is the default behavior of the property.
• With add , the composite effect value in the 0% keyframe will be blur(5px) blur(10px) .
• With accumulate , the composite effect value in 0% keyframe will be blur(15px) .

Note: A composite operation can also be specified in a keyframe. In that case, the specified composite operation is used for each property first within that keyframe and then on each property in the next keyframe.

Formal definition

Formal syntax

Examples

Understanding the animation-composition values

The example below shows the effect of different animation-composition values side-by-side.

HTML

div class="container"> replace div id="replace" class="target">div> div> div class="container"> add div id="add" class="target">div> div> div class="container"> accumulate div id="accumulate" class="target">div> div> 

CSS

Here the underlying value is translateX(50px) rotate(45deg) .

.container  width: 230px; height: 200px; background: cyan; display: inline-block; text-align: center; > .target  width: 20px; height: 50px; background: green; border-radius: 10px; margin: 20px 0; > 

@keyframes slide  20%, 40%  transform: translateX(100px); background: yellow; > 80%, 100%  transform: translateX(150px); background: orange; > > .target  transform: translateX(30px) rotate(45deg); animation: slide 5s linear infinite; > .target:hover  animation-play-state: paused; > #replace  animation-composition: replace; > #add  animation-composition: add; > #accumulate  animation-composition: accumulate; > 

Result

• With replace , the final effect value for the transform property in the 0%, 20% keyframe is translateX(100px) (completely replacing the underlying value translateX(30px) rotate(45deg) ). In this case, the element rotates from 45deg to 0deg as it animates from the default value set on the element itself to the non-rotated value set at the 0% mark. This is the default behavior.
• With add , the final effect value for the transform property in the 0%, 20% keyframe is translateX(30px) rotate(45deg) followed by translateX(100px) . So the element is moved 30px to the right, rotated 45deg , then translated 100px more along the redirected X axis.
• With accumulate , the final effect value in the 0%, 20% keyframe is translateX(130px) rotate(45deg) . This means that the two X-axis translation values of 30px and 100px are combined or «accumulated».

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jun 26, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Combining multiple CSS animations into one overall animation

I have a set of animations that I queue up one after the other to create a bigger overall animation. For the sake of simplicity, I’ve created a simple fiddle to demo what I mean, but it’s a simplified version of what I’m trying to achieve (code on bottom). http://jsfiddle.net/UnsungHero97/qgvrs/5/ What I want to do is combine all of these into one animation instead of several. Currently, I add a class to trigger the different stages of the animation, but what I would like to do is add a class only once to start the animation, and then it’ll just go. I don’t see how to combine the animations into one since they work on different elements. I’m still fairly new to CSS3 animations, so is it possible to do this? Any thoughts?

The Code

.outside < border: 1px solid magenta; height: 100px; width: 100px; position: relative; >.inside < border: 1px solid skyblue; height: 60px; width: 60px; margin-top: -31px; margin-left: -31px; position: absolute; top: 50%; left: 50%; >@-webkit-keyframes scale-in < 0% < -webkit-transform: scale(0); >100% < -webkit-transform: scale(1); >> @-webkit-keyframes bounce < 0% < -webkit-transform: scale(1); >25% < -webkit-transform: scale(.8); >50% < -webkit-transform: scale(1); >75% < -webkit-transform: scale(.9); >100% < -webkit-transform: scale(1); >> @-webkit-keyframes rotate < 0% < -webkit-transform: rotate(0deg); >100% < -webkit-transform: rotate(360deg); >> .bounce < -webkit-animation-duration: 500ms; -webkit-animation-name: bounce; >.animate < -webkit-animation-delay: 0s; -webkit-animation-fill-mode: forwards; -webkit-animation-timing-function: ease; -webkit-transform: translateZ(0); >.click < border: 1px solid skyblue; -webkit-animation-duration: 1000ms; -webkit-animation-name: rotate; >.click .inside < border: 1px solid magenta; -webkit-animation-duration: 1000ms; -webkit-animation-name: rotate; >.clicked < border: 1px solid magenta; >.clicked .inside

$(document).ready(function() < $(document).click(function() < var jqElement = $('.outside'); jqElement .off() .addClass('animate') .addClass('bounce'); jqElement.on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(event) < event.stopPropagation(); jqElement .removeClass('bounce') .removeClass('animate') .off() .addClass('animate') .addClass('click'); jqElement.on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(event) < event.stopPropagation(); jqElement .removeClass('click') .removeClass('animate') .off() .addClass('clicked'); setTimeout(function() < jqElement.removeClass('clicked'); >, 500); >); >); >); >); 

Источник

Using two animations on one element, CSS

The slide-up animation runs once the element is loaded, and rotate runs when element is hovered. However, now the element slides up on mouse leave and I don’t know how to prevent this. So I’d like to turn off slide-up animation on hover. The rotate animation uses transform property, and slide-up just changes margins .

tl;dr of the answer by @Harry (go upvote it) — Make sure that the animation is never removed from the element.

3 Answers 3

The slide-up animation executes once again when you move the mouse out of the element because of the following reasons:

• On load, the element has only one animation (which is slide-up ). The browser executes this.
• On hover, the animation property again specifies only one animation (which is rotate ). This makes the browser remove the slide-up animation from the element. Removing the animation makes the browser also forget about the execution state or the execution count of it.
• On hover out, the default div selector becomes applicable for the element and so the browser again removes the rotate animation and attaches the slide-up animation. Since it is being re-attached, the browser thinks it must execute it again.

You can make the slide-up animation run only once by making sure that the animation is actually never removed from the element even when :hover is on and animation-iteration-count is 1.

In the below snippet, you’d note how I have retained the slide-up animation definition within :hover selector also. This makes the browser see this animation as ever present and since this animation is already executed once on load, it won’t execute it again (because of iteration count).

(Note: Just to avoid any confusions — the default value for animation-iteration-count is 1 but I had made it explicit for the purpose of explanation. It is not the primary reason but is just an extra step to make sure that its value doesn’t mess up the solution.)

div < height: 100px; width: 100px; border: 1px solid; animation: slide-up 2s 1; >div:hover < animation: slide-up 2s 1, rotate 2s forwards; >@keyframes slide-up < from < margin-top: 100px; >to < margin-top: 0px; >> @keyframes rotate < from < transform: rotate(0deg); >to

Источник