0

I have some CSS animation with keyframes on my page for fadein/out elements. The problem is that the fadeout animations are shown when i load the page.

HTML:

<button class="toggle-good">Toggle display</button>
<p class="box">I move nicely!</p>

CSS:

.box {
  height: 0;
  opacity: 0;
  animation: FadeOut 1s ease-in-out;
}
.box.active {
  height: initial;
  opacity: 1;
  animation: FadeIn 1s ease-in-out;
}
@keyframes FadeIn {
  0% {
    opacity: 0;
    height: initial;
  }
  100% {
    opacity: 1;
    height: initial;
  }
}
@keyframes FadeOut {
  0% {
    opacity: 1;
    height: initial;
  }
  99% {
    opacity: 0;
    height: initial;
  }
  100% {
    height: 0;
    opacity: 0;
    height: 0;
  }
}

JS:

$('button').on('click', function(e) {
  $(this).siblings('.box').toggleClass('active');
})

Working example: http://codepen.io/MickL/pen/LkvWaA

Mick
  • 8,203
  • 10
  • 44
  • 66

2 Answers2

3

All you should need to do is: animation-play-state: paused;

However, having a look at your codepen, keyframe animations probably aren't your best best. It looks like you're just using the keyframes to ensure some of your properties only change at the end of the animation. Luckily, there's actually a transition timing function for this!

  1. Use transition property, using step-end and step-start for visibility and pointer-events.
  2. Pointer events used to prevent interaction with a hidden element.
  3. Max-height used to remove the object from document flow when hidden.

I've spun together a quick code pen to show an example.

http://codepen.io/SudoCat/pen/LkvyEJ?editors=0100

Robin Neal
  • 509
  • 5
  • 21
  • Thanks for your answer. I can't use pointer events because im toggling the animation on scroll. I just used a button for this example to keep it simple. – Mick Aug 19 '16 at 09:38
  • The pointer events property will just prevent people from interacting with the block while it's hidden - it shouldn't impact toggling the animation on scroll. – Robin Neal Aug 19 '16 at 09:42
  • Upon some reflection, I realised the display:none technique I originally mentioned wouldn't work. Instead, I have added a max-height property onto the transition to remove the object from the document flow. – Robin Neal Aug 19 '16 at 09:45
  • This pointer-events:none made the deal! I just used transition instead of keyframes, and pointer-events:none to initial state without changing the height. Also i was not sure how to use animation-play-state: paused;. I used it on initial state with no effect. – Mick Aug 19 '16 at 09:53
  • Glad you got it working! The transition method is a lot more appropriate for this situation, and uses less code which is always a plus! Don't forget to mark the answer as correct if it helped you, hopefully it can help others too. – Robin Neal Aug 19 '16 at 09:55
  • Maybe you could additionally explain how to use animation-play-state:paused ? In my case its good to use transition instead. But someone else maybe needs to keep animation with keyframes which dont play on page load. – Mick Aug 19 '16 at 10:01
  • Here's a very simple example of how animation-play-state works. Only using hover as I unfortunately need to actually do some real work today, but demonstrates how it can be used. http://codepen.io/SudoCat/pen/YWrVdP – Robin Neal Aug 19 '16 at 10:31
0

I tried out different possibilities. Only one which was working was to hide it by JS using a timeout and absolute positioning.

Problem would be if the animation is longer than the set timeout. Or the animation needs to be shown before the timeout runs.

$('.box').css({
    'position': 'absolute',
    'top': '-9999px',
    'left': '-9999px'
});

setTimeout(function() {
    $('.box').css({
        'position': 'relative',
        'top': 'auto',
        'left': 'auto'
    });
}, 500);
Mick
  • 8,203
  • 10
  • 44
  • 66