Can't Stop CSS Animation Disappearing After Last Key Frame

Can't stop css animation disappearing after last key frame

You need animation-fill-mode: forwards to prevent this from happening.

Additionally, you need to end with an opacity of 1, therefore the last frame must have an opacity of 1.

jsFiddle example - it works as expected now.

You can also shorten your keyframe by removing 0%, as this is already given in the initial state.

@keyframes santaappear {
    96% {
        opacity:1;
    }
    100% {
        opacity:1;
    }
}

You could also combine 96% and 100%.

@keyframes santaappear {
    96%, 100% {
        opacity:1;
    }
}

Since you are using multiple animation properties, use the animation shorthand:

<single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>`

Which would be:

animation: santaappear 13s 2s forwards;
-moz-animation: santaappear 13s 2s forwards;
-webkit-animation: santaappear 13s 2s forwards;

In the demo, I added vendor prefixes for -moz/-webkit. In addition to these you should have one written without a prefix. Same goes for the keyframes.

CSS3 disappears after keyframe animation

By default elements return to their original state after an animation is completed. You can keep the state in which the element is in at end of animation by applying animation-fill-mode: forwards;

http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp

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»

CSS animation to disappear toward right and reappear from left

The movement in the example site is characterised as: start off screen, come in from the left fast to a point slightly more than midway, move a short distance slowly, then shoot offscreen to the right.

This snippet achieves this by first keeping the element off screen to the left with a negative translateX, then moving to the right of center within the first 10% of the animation, so that's within 1second, then moving just 5% of the width of the screen for the next 80% of the animation (ie 8seconds) and then shooting off to the right in the remainder of the animation.

Change the animation's %s to get the timing you want.

Note that the element being animated had been given a fixed width of 2em which was not wide enough to accommodate the text so for this demo that has been removed, otherwise little bits of the text peep out from the left at the start.

.arrow {
  position: absolute;
  height: 2em;
  color: white;
  animation-duration: 10s;
  animation-timing-function: ease;
  animation-delay: 1.5s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-play-state: running;
  animation-name: arrows_animation;
  transform: translateX(-100%);
}

@keyframes arrows_animation {
  0% {
    animation-timing-function: ease-out;
  }
  10% {
    animation-timing-function: ease-in;
    transform: translateX(60vw);
  }
  90% {
    animation-timing-function: ease-out;
    transform: translateX(65vw);
  }
  100% {
    transform: translateX(100vw);
  }
}

<div style="background-color: black; overflow: hidden; height: 200px; width: 100%;">
  <div class="arrow">
    SOME TEXT
  </div>
</div>

CSS animation on hover stay at last keyframe when using transform: rotate

For those of you with a similar problem, first make sure you are using animation-fill-mode: forwards. See this related question.

In this specific case, the following is relevant:

CSS Transforms Module Level 1

A transformable element is an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption.

Since the .circle element is a span, it is inline by default, therefore the property transform: rotate() won't have an effect on it after the animation ends. Changing the display of it to either inline-block or block will solve the problem.

You should also be using the animation shorthand. In addition, add in other vendor prefixes:

Updated Example Here

.circle:hover .spin {
    display:inline-block;
    -webkit-animation: drop 1s 1 alternate ease-out forwards;
    -moz-animation: drop 1s 1 alternate ease-out forwards;
    animation: drop 1s 1 alternate ease-out forwards;
}

Element is disappearing when i use zoomIn animation

Describe properties for 100%, just copy properties from 50% and it will probably work.

    @-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }

100% {
        opacity: 1;
      }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }

100% {
        opacity: 1;
      }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

#box {
   height:400px;
   width:400px;
   background: red;
   -webkit-animation: zoomIn 2s ease .5s forwards;
   opacity:0;
}

Remove/Hide div from DOM after animation completes using CSS?

Use the animation-fill-mode option. Set it to forwards and the animation ends at it's final state and stay like that.

Altered based upon comments Set opacity fade to just last 1% of animation... simplified keyframes. Added a jquery option to literally remove the div from the DOM. CSS alone won't alter the markup, where jQuery will.

Although you can't animate the display property. If you want the div totally gone, after the opacity fades to zero, you can then add the display property to remove the div. If you don't wait for opacity to end, the div will just vanish without any transition.

/* 

This jquery is added to really remove 

the div. But it'll essentially be 

VISUALLY gone at the end of the 

animation. You can not use, or 

delete the jquery, and you really 

won't see any difference unless 

you inspect the DOM after the animation.

This function is bound to animation 

and will fire when animation ends. 

No need to "guess" at timeout settings. 

This REMOVES the div opposed to merely 

setting it's style to display: none;  

*/

$('.slide-box').bind('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(e) { $(this).remove(); });

.slide-box {

  display: block;

  position: relative;

   left: 0%;

  opacity: 1;

  width: 100px;

  height: 100px;

  background: #a00;

  animation: slide 1s 1 linear forwards;

  

  /*

 animation-name: slide;

 animation-duration: 1s;

 animation-iteration-count: 1;

 animation-timing-function: linear;

 animation-fill-mode: forwards;

 */

}

@keyframes slide {

  0% {

   left: 0%;

  opacity: 1;

  }

  99% {

    left: 99%;

    opacity: 1;

  }

  100% {

    left: 100%;

    opacity: 0;

    display: none;

  }

}

@-webkit-keyframes slide {

  0% {

    left: 0%;

  opacity: 1;

  }

  99% {

    left: 99%;

    opacity: 1;

  }

  100% {

    left: 100%;

    opacity: 0;

    display: none;

  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">

    <div class="slide-box" id="slide-box"></div>

  </div>

---

Related Topics