CSS Animation property stays after animating

by

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»

More Related Contents:

  1. Animate text for landing page
  2. Use CSS3 transitions with gradient backgrounds
  3. Maintaining the final state at end of a CSS3 animation
  4. Stopping a CSS3 Animation on last frame
  5. css3 transition animation on load?
  6. Changing Background Image with CSS3 Animations
  7. Play multiple CSS animations at the same time
  8. CSS3 animation not working in safari
  9. How to animate a radial-gradient using CSS?
  10. CSS animation delay in repeating
  11. How can I transition width of content with width: auto?
  12. Passing parameters to css animation
  13. Background-image in keyframe does not display in Firefox or Internet Explorer
  14. CSS3 Spin Animation
  15. Webkit CSS Animation issue – persisting the end state of the animation? [duplicate]
  16. Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)
  17. Why can’t I animate custom properties (aka CSS variables)?
  18. CSS: Animation vs. Transition
  19. Animating max-height with CSS transitions
  20. Changing :hover to touch/click for mobile devices
  21. How to prevent a CSS keyframe animation from running on page load?
  22. Maintaining the final state at end of a CSS animation
  23. How to add animated gradient to an svg path?
  24. Filling water animation
  25. Reuse CSS animation in reversed direction (by resetting the state?)
  26. Pure CSS animation visibility with delay
  27. Looping Animation of text color change using CSS3
  28. How can I delay the start of a CSS animation?
  29. Disable CSS animation on pseudo element inherited from parent
  30. Continuous CSS rotation animation on hover, animated back to 0deg on hover out

Leave a Comment