0

I have one question related to css3 animations, let's day I want to make a fade-in animation, so I animate from opacity: 0 to opacity: 1; so my primary state is opacity 0, and 100% is opacity 1.

So question is, after arriving to 100%; opacity state backs to 0, I want it to appear and stay, so opacity stay at 1 after animation is complete. how can I achieve this?

check my codepen: http://cdpn.io/qjKDlc

Best Regards!

andresmijares
  • 3,658
  • 4
  • 34
  • 40
  • 1
    possible duplicate of [Maintaining last state at end of CSS3 animation](http://stackoverflow.com/questions/12991164/maintaining-last-state-at-end-of-css3-animation) and [1](http://stackoverflow.com/questions/3273478/webkit-css-animation-issue-persisting-the-end-state-of-the-animation) [2](http://stackoverflow.com/questions/18457462/css3-animation-keep-reverting-to-original-state) [3](http://stackoverflow.com/questions/11122120/css-animations-persistent-end-state) [4](http://stackoverflow.com/questions/3087360/cant-stop-animation-at-end-of-one-cycle) – Zach Saucier Jan 17 '14 at 20:33

2 Answers2

0

Use animation-fill-mode with a value of forwards:

If the value for 'animation-fill-mode' is 'forwards', then the animation will apply the property values defined in its last executing keyframe after the final iteration of the animation, until the animation style is removed. The last executing keyframe is the ‘to’ or ‘100%’ keyframe, unless the animation has 'animation-direction' set to 'alternate' and both a finite and even iteration count, in which case it is the ‘from’ or ‘0%’ keyframe.

Example: http://jsfiddle.net/FvxVc/2/

Adrift
  • 58,167
  • 12
  • 92
  • 90
0

I got the answer using this property:

animation-fill-mode: forwards;

It also accepts others parameters like [forwards, backwards, both, none]

andresmijares
  • 3,658
  • 4
  • 34
  • 40