Ensuring the CSS animation reaches its ultimate state by the end

Question

Ensuring the CSS animation reaches its ultimate state by the end

I am currently implementing an animation on specific elements that have their opacity set to 0 in the CSS. The animation is triggered onClick, and via keyframes, it transitions the opacity from 0 to 1, among other things.

However, once the animation completes, the elements revert back to opacity: 0 (across both Firefox and Chrome). I had assumed that animated elements would retain their final state, thus overriding their initial properties. Is my understanding incorrect? If so, what approach can be taken to ensure the element maintains its final appearance?

The code snippet (prefixed versions excluded):

@keyframes bubble {
    0%   { transform:scale(0.5); opacity:0.0; }
    50%  { transform:scale(1.2); opacity:0.5; }
    100% { transform:scale(1.0); opacity:1.0; }
}

css css-animations

Answer 1

Answer №1

Consider trying to include the animation-fill-mode: forwards; property in your CSS code. Here is an example of how you can use the shorthand version:

animation: bubble 1.0s forwards;

Visit this link for more information on animation-fill-mode

Answer 2

Consider trying to include the animation-fill-mode: forwards; property in your CSS code. Here is an example of how you can use the shorthand version:

animation: bubble 1.0s forwards;

Visit this link for more information on animation-fill-mode

Answer 3

Answer №2

To streamline multiple animation attributes, use the following shorthand:

animation: bubble 2s linear 0.5s 1 normal forwards;

This shorthand represents:

bubble as the animation name
2s for duration
linear for timing function
0.5s for delay
1 for iteration count (can also be set to 'infinite')
normal for direction
forwards for fill mode (use 'backwards' for end position as final state [supporting browsers with animations off]{responding only to title, not specific case})

Available Timing Functions:

ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end

Available Directions:

normal | reverse | alternate | alternate-reverse

Answer 4

To streamline multiple animation attributes, use the following shorthand:

animation: bubble 2s linear 0.5s 1 normal forwards;

This shorthand represents:

bubble as the animation name
2s for duration
linear for timing function
0.5s for delay
1 for iteration count (can also be set to 'infinite')
normal for direction
forwards for fill mode (use 'backwards' for end position as final state [supporting browsers with animations off]{responding only to title, not specific case})

Available Timing Functions:

ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end

Available Directions:

normal | reverse | alternate | alternate-reverse

Answer 5

Answer №3

When NOT USING THE ABBREVIATED VERSION: Ensure that the animation-fill-mode: forwards comes AFTER the animation declaration or it won't take effect...

animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;

vs

animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;

Answer 6

When NOT USING THE ABBREVIATED VERSION: Ensure that the animation-fill-mode: forwards comes AFTER the animation declaration or it won't take effect...

animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;

vs

animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;

Answer 7

Answer №4

Make sure to include the following CSS property:animation-fill-mode: forwards;

animation-fill-mode: forwards;

This will ensure that the element retains the style values set by the last keyframe, taking into account the animation-direction and animation-iteration-count.

Please note that the @keyframes rule is not supported in Internet Explorer 9 and earlier versions.

Check out this working example:

div {
  width: 100px;
  height: 100px;
  background: red;
  position :relative;
  -webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
  animation: bubble 3s forwards;
}

/* Safari */
@-webkit-keyframes bubble  {
  0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

/* Standard syntax */
@keyframes bubble  {
   0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

<h1>The keyframes </h1>
<div></div>

Answer 8

Make sure to include the following CSS property:animation-fill-mode: forwards;

animation-fill-mode: forwards;

This will ensure that the element retains the style values set by the last keyframe, taking into account the animation-direction and animation-iteration-count.

Please note that the @keyframes rule is not supported in Internet Explorer 9 and earlier versions.

Check out this working example:

div {
  width: 100px;
  height: 100px;
  background: red;
  position :relative;
  -webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
  animation: bubble 3s forwards;
}

/* Safari */
@-webkit-keyframes bubble  {
  0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

/* Standard syntax */
@keyframes bubble  {
   0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

<h1>The keyframes </h1>
<div></div>

Answer 9

Answer №5

When using the forwards property in Chrome, I encountered an issue where even after the animation had finished, the renderer continued to consume graphic resources, resulting in decreased application responsiveness.

To avoid this problem, a better approach is to utilize an EventListener.

CSS animations emit events, allowing you to utilize the animationend event to take action once the animation concludes.

CSS

.fade_in {
  animation: fadeIn 2s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
}

JavaScript

const element = document.getElementById("element-to-be-animated");

element.addEventListener("animationend", () => {
    // Define your desired final state here. For example:
    element.style["opacity"] = 1;
}, { once: true });

By setting once: true, the engine will automatically remove the event listener after it has executed, ensuring a clean and efficient application.

I have prepared a demonstration on JSFiddle to showcase how this solution works.

Answer 10

When using the forwards property in Chrome, I encountered an issue where even after the animation had finished, the renderer continued to consume graphic resources, resulting in decreased application responsiveness.

To avoid this problem, a better approach is to utilize an EventListener.

CSS animations emit events, allowing you to utilize the animationend event to take action once the animation concludes.

CSS

.fade_in {
  animation: fadeIn 2s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
}

JavaScript

const element = document.getElementById("element-to-be-animated");

element.addEventListener("animationend", () => {
    // Define your desired final state here. For example:
    element.style["opacity"] = 1;
}, { once: true });

By setting once: true, the engine will automatically remove the event listener after it has executed, ensuring a clean and efficient application.

I have prepared a demonstration on JSFiddle to showcase how this solution works.

Ensuring the CSS animation reaches its ultimate state by the end

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the best way to use CSS in conjunction with a Master Page and a new content page, ensuring that the new CSS does not interfere with

Creating consistently sized rows of Bootstrap columns - with either equal heights or equal spacing between each row

Searching for components in Python Selenium - a missing element

Tips for showcasing a drop-down menu using Jquery

Scrollable navigation bar at the bottom styled with Bootstrap

Ways to assign a default background shade to a webpage with a transparent background

Ways to display an icon with an underline effect upon hovering over text

Show a dynamic Swiper carousel upon selecting a thumbnail in an image gallery

What is the best way to extend the final column of a table across the entire width?

Using conditional CSS in React/Next.js

Eliminate the table background in a single cell

Is it necessary to only override the monospaced font?

Adjust the color of text as you scroll

Is it possible to apply border-radius to selections, similar to how it is done in vscode

Unable to display <div> elements from CSS within the Wordpress Text Widget

Utilizing CSS classes and IDs for unordered lists

Ways to change columns into rows with CSS

Eliminate any additional margin and padding on the floating div

Enable the set body to have certain sections that are scrollable by setting overflow=hidden

Using jQuery to update the input value when the mouse hovers over a div