6

Resume and pause animations in CSS

 1 year ago
source link: https://www.amitmerchant.com/run-and-pause-animations-in-css/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Resume and pause animations in CSS

July 29, 2023 · CSS

I have been working with CSS for like 10+ years now and I have worked with CSS animations for a fair amount of time. But I didn’t know that you can pause and resume animations in CSS until recently.

Essentially, you can pause and resume animations in CSS using the animation-play-state property. This property accepts two values: running and paused.

The running value is the default value and it lets the animation run as normal. The paused value pauses the animation.

This can help you build some interesting UIs. For instance, you can pause the animation when the user hovers over the element and resume it when the user hovers out of the element.

Or turn it off on a button click and turn it on again when the user clicks the button again.

Here’s an example of the same.

.container {
  display: flex;
  height: 100%;
  background: linear-gradient(
    to right,
    #7953cd 20%,
    #00affa 30%,
    #0190cd 70%,
    #764ada 80%
  );
  background-size: 500% auto;
  animation: animatedGradient 3s ease-in-out infinite;
  animation-play-state: running;
}

.container:hover {
  animation-play-state: paused;
}

@keyframes animatedGradient {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

As you can tell, the animatedGradient animation will be paused when the user hovers over the .container element and resumes when the user hovers out of the element.

Here’s a CodePen to play with.

Previous: An introduction to Laravel Folio Next: Mixing colors to create variants in CSS

Beep! Beep! I'm also running a YouTube channel which I hope you're going to love!

👋 Hi there! I'm Amit. I write articles about all things web development. If you like what I write and want me to continue doing the same, I would like you buy me some coffees. I'd highly appreciate that. Cheers!

Comments?


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK