How to play multiple animations back-to-back in CSS?

css multiple animations
css animations examples
css animation shorthand
css animation multiple elements
css animation-delay
css animation keyframes
css animation loop
css multiple animations after each other

I can not play several animations one after the other with a "fluid" effect:

#circle {
    border-radius: 50%;
    background: red;
    animation: zoomIn 1s, pulse 0.5s ease 1s;
    height: 100px;
    width: 100px;
}

@keyframes zoomIn {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
		}

@keyframes pulse {
    from {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}
<div id="circle"></div>

You may need to consider forwards on the second one to keep its last state because actually when both animations ends your element get back to the inital value of the scale transform which is scale(1) (to be more precise it's transform:none)

#circle {
  border-radius: 50%;
  background: red;
  animation: zoomIn 1s, pulse 0.5s ease 1s forwards;
  height: 100px;
  width: 100px;
}

@keyframes zoomIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes pulse {
  from {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}
<div id="circle"></div>

Using Multi-Step Animations and Transitions, #Adding multiple steps to transitions. We can make things a little more interesting by chaining our transitions together using commas, then playing  Multi-step animations and transitions are fun little tricks we have at our disposal to create rich, dynamic movement in CSS. The example of an equalizer in this post is a practical application but there are many other ways that multi-step transitions can be used.

Your pulse animation ends at scale 1.1, and then your circle snaps back to scale 1. Maybe the pulse keyframes should be as follows:

@keyframes pulse {
        from {
            transform: scale(1);
        }
        50% {
            transform: scale(1.1);
        }
        100% {
            transform: scale(1);
        }
}

In the snippet below you see no snapping, but maybe this isn't the effect you were looking for?

#circle {
			border-radius: 50%;
			background: red;
			animation: zoomIn 1s, pulse 0.5s ease 1s;
			height: 100px;
			width: 100px;
		}

		@keyframes zoomIn {
			0% {
				transform: scale(0);
			}
			100% {
				transform: scale(1);
			}
		}

		@keyframes pulse {
			from {
				transform: scale(1);
			}
			50% {
				transform: scale(1.1);
			}
      100% {
         transform: scale(1);
      }
		}
<div id="circle"></div>

Restart CSS Animation, Then for some reason you want to have that animation run again, perhaps on a click Unfortunately you also cannot define multiple keyframe animation names in Notice how you have to watch for the AnimationEnd event to fire to set it back​  CSS background animation has been a hot topic for a long time, mostly because they look pretty sweet and don't require additional elements. I was recently asked if it was possible to have multiple background animations on a given element and the answer is yeswith concessions.

You need a short pulse at the end when your circle is scaled to 1, this is your fluid effect I presume. Rather than having to different animations, why don't we tweak the keyframes in the zoomIn animation a little bit.

HTML:

<div id="circle"></div>

CSS:

#circle {
    border-radius: 50%;
    background: red;
    animation: zoomIn 0.4s ease-out;
    height: 100px;
    width: 100px;
}

@keyframes zoomIn {
    0% {
        transform: scale(0);
    }
    60% {
        transform: scale(1);
    }
    80% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

Hope this helps.

Using CSS animations, Animations consist of two components, a style describing the CSS animation The animations run well, even under moderate system load. as it moves from right to left for a while, then to decrease back to its original size. CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.

the only animation is 'Transform', it is best to use a 'timing function' customization, I recommend utilities 'Cubic-bezier' go to this website http://cubic-bezier.com and practice. read before something about bezier curve.

#circle {
    border-radius: 50%;
    background: red;
    animation: zoomIn 1s cubic-bezier(.4,.17,.49,1.54);
    height: 100px;
    width: 100px;
}

@keyframes zoomIn {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
<div id="circle"></div>

animation-direction, The animation-direction CSS property sets whether an animation should play forwards, backwards, or alternating back and forth. animation-direction: alternate-reverse; /* Multiple animations */ animation-direction: normal,  How do I get these animations or any other animations to play back to back? anims[0] = SexLab.GetAnimationByName(Arrok Tricycle) anims[1] = SexLab.GetAnimationByName(Arrok Lesbian) This guide shows how to get another animation to play on an existing animations end, however forceanimation doesnt s

CSS Animation for Beginners, CSS animations are made up of two basic building blocks. At the final stage (​100%) , it scales down slightly and returns to its default size [animation-​direction] [animation-fill-mode] [animation-play-state]; On each cycle the animation resets to the beginning state (0%) and plays forward again (to 100%)  CSS animations do not affect an element before the first keyframe is played or after the last keyframe is played. The animation-fill-mode property can override this behavior. The animation-fill-mode property specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both).

CSS animation-fill-mode Property, The animation-fill-mode property specifies a style for the element when the animation is not playing (before it starts, after it ends, or both). CSS animations do not affect the element before the first keyframe is played or after the last keyframe is  Multiple backgrounds with CSS3 and a little of animation. In CSS3 appear new possibility to use multiple backgrounds for the objects, in our new article I will demonstrate how to do it. And, I going to add a bit of JS code for simple animation (to make it not so boring).

CSS animation-direction Property, Example. Play the animation forwards first, then backwards: div { animation-​direction: alternate; }. Try it Yourself ». More "Try it Yourself" examples below. Yo gang, in this tutorial, I'll show you how we can repeat our animations by using the animation-iteration-count property, which can take either an integer,

Comments
  • Define "fluid effect".
  • Please clarify how you want your code to behave and how it currently falls short of that.
  • The problem is the pause time between the two animations, even if the second animation is playing quickly, we see very briefly a stop between the two.