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

Using `vertical-align` on a `span` inside a flexbox container may not produce the desired result

Activate the overflow feature within native-base cards

The jQuery script designed to verify the page height doesn't appear to be functioning as intended

Ensuring the footer stays anchored at the bottom using Material-UI Expansion Drawers

Adding an image to a two-column layout with text

I'm having trouble getting the font to display properly on Safari (mac) similar to how it appears on

What is the best way to eliminate all styles from an element with jQuery?

Challenges arising from CSS position: fixed on iPhone 6+ in landscape orientation running iOS 9

Randomly swap images in HTML when a button is clicked

What is the best way to embed an image into HTML code?

When using equal-width columns in Bootstrap, the columns will be stacked one on top of the other

Strategies for aligning a link on top of another div with absolute positioning

Looking to dynamically set a background image using data fetched from an API in a ReactJS project

The CSS animation is functioning smoothly in Chrome, but unfortunately, it is not working in Firefox

Tips for styling your Angular Material Card on mobile devices

Steps for resetting the HTML5 meter element

What steps can I take to create a responsive jQuery UI buttonset?

Title: How to Build a Dynamic Logo Carousel with React and CSS without External Dependencies

Fascinating CSS quandary: does the transparency of a parent element impact the transparency of a child element that is absolutely positioned, but not in relation

To style the input box, apply the CSS properties "filter: alpha(opacity=70);" and "background-image: url(image.png);"