How to Keep Styles After Animation

How to keep styles after animation?

Try with:

#fadein {
  -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards;         /* When the spec is finished */
}

Maintaining the final state at end of a CSS animation

Try adding animation-fill-mode: forwards;. For example, the shorthand would be used like this:

-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;

CSS Animation property stays after animating

I think you're looking for animation-fill-mode CSS3 property

https://developer.mozilla.org/en/CSS/animation-fill-mode

The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.

for your purpose just try to set

h2 {
  animation: fadeIn 1s ease-in-out 3s;
  animation-fill-mode: forwards;  
}

Setting forwards value «the target will retain the computed values set by the last keyframe encountered during execution»

Apply style after CSS animation without JS

You do need to use animation-fill-mode:forwards as Devin suggests, but this only works for properties set in the animation. In order to set properties other than the ones you want actually animated, you must make them part of the animation by adding them to the very end like so:

@keyframes  {
  /* ... Your original keyframes (except the last) ... */
  99.99% { /* ... The properties of something you want to change ... */ }
  100% { /*... Your original end properties and the changed properties ...*/ }
}

for example:

@keyframes rotate {
    0% { transform:rotate(0deg); }
    99.999% { background:blue; }
    100% { transform:rotate(360deg); background:red; }
}

By having the difference between the two end keyframes as really small, it will jump to the new styles no matter what the animation-duration is.

Demo

The other, more common, way to get this effect is to use Javascript's animation-end

How can I keep element at last state of CSS animation?

You can maintain the last animation frame using:

animation-fill-mode:forwards;

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

const $btn = document.querySelector('button');
const $block = document.querySelector('.block-a');

$btn.addEventListener('click', function() {
  $block.classList.toggle("is-visible")
})

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

button {
  font-size: 32px;
  margin-bottom: 24px;
  cursor: pointer;
}

.block-a {
  width: 25vw;
  height: 50vh;
  background-color: red;
  padding: 20px;
  color: #fff;
  transform: translateY(150%);
  transition: all .25s linear;
}

.block-a.is-visible {
  transform: translateY(0);
  transition: all .1s ease-in;
}

.block-a-1 {
  font-size: 32px;
  font-weight: bold;
  color: white;
  background-color: blue;
  padding: 10px;
  opacity: 0;
}

.block-a.is-visible .block-a-1 {
  animation: fadeIn 2s linear 2s;
  animation-fill-mode:forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<button>Do Block 1</button>
<div class="block-a">
  <span class="block-a-1">Block A-1</span>
  <h1>Block A</h1>
</div>

How to make the last keyframe of your animation stay after animation is finished

Remove the dual declaration for animation-fill-mode is just forwards :

.fadein{    
  animation:fadein 1.5s;
  animation-timing-function:linear;
  animation-delay:1s;
  animation-fill-mode:forwards;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  -webkit-animation:fadein 1.5s;
  -webkit-animation-timing-function:linear;
  -webkit-animation-delay:1s;
  -webkit-animation-fill-mode: forwards;
}

The demo http://jsfiddle.net/DR9Lu/6/

How to prevent css3 animation reset when finished?

Add animation-fill-mode: forwards;

to your .go

The animation’s final keyframe continues to apply after the final iteration of the animation completes.

http://css-infos.net/property/-webkit-animation-fill-mode

How to prevent a CSS animation from rerunning after a second hover animation

• The animation-* properties (like animation:, animation-name:, animation-duration:, etc) are multi-valued properties, just like background-image.

• When the effective value of a multi-value property for an element changes (e.g. setting an entirely new background-image: or animation: when an element already has a multiple values for that property) then CSS will replace the entire list of values.

• So if one rule sets animation-name: foo; and another (temporarily applied) rule sets animation-name: bar; then that counts as removing foo and adding bar, rather than simply adding bar to the existing list of animations.

• And CSS animations (by default) start when they are added, and cannot be controlled after they have been removed.

• So in your case, the test1 animation restarts because your :hover rule removes the test1 animation from img's animation-list (and adds test2), and then when the :hover state is left the test1 animation is re-added, which makes it restart the test1 animation again.

The fix is to not remove the test1 animation from the :hover state, like so:

    img {
        animation-name: test1;
        animation-duration: 4s;
    }
    img:hover {
        animation-name: test1, test2;
        animation-duration: 4s, 4s;
    }

---

Demo:

• I've renamed test1 to onLoad and test2 to onHover and sped-up the animations to 1-2s (from 4s) for clarity.
• The image will rotate on-load, and will increase in size on hover.
• Notice that after you stop hovering the image, it won't rotate again.

img {
    height: 40px;
    width: auto;
    position: absolute;

    animation-name: onLoad;
    animation-duration: 1s;
}
img:hover {
    animation-name: onLoad, onHover;
    animation-duration: 1s, 2s;
}
@keyframes onLoad {
    from { transform: rotate(0deg); }
    to   { transform: rotate(179deg); }
}
@keyframes onHover {
    from { height: 40px; width: 40px; }
    to   { height: 80px; height: 80px; }
}

<img src="https://i.stack.imgur.com/pVgz6.png" alt="Sample Image">

---

Related Topics