CODEWITHSUNDEEP
cssanimationcss-animations
Andrew Richardson
Andrew Richardson

Reputation: 299

Why is animation-fill-mode not working for this specific element?

I'm using CSS keyframe animations to create some simple animated text and animation-fill-mode:forward is working for most of it to keep the properties after the animation fires except for the video element. It goes back to it's previous state. I cannot find anything that would be causing it.

Here's a codepen.

HTML:

    <div class="fade-in first">
<h1 class="shrink first">Take a sigh of relief</h1></div>
                    <div class="fade-in second"><h1 class="shrink second">Bluebeam is not your typical software company</h1></div>
                    <div class="fade-in animation third">
                        <h1>Why? Well we often have conversations like this</h1>
                    </div>
                        <div class="row zoom-in">
                            <div class="col-md-10 col-md-offset-1">
                                <div class="flex-video widescreen">
                                    <iframe width="560" height="315" src="//www.youtube.com/embed/brWPoUWUCJs" frameborder="0" allowfullscreen></iframe>
                                </div>
                                <a href="#" class="pull-right all-caps small">See more of these<i class="icon-caret-right"></i></a>
                            </div>
                        </div>

SASS:

.home-animation {
    padding-top:60px;
}

.fade-in {
    animation-name: fadeInUp;
    animation-iteration-count: once;
    animation-duration: 2s;
    &.first {
        max-height: 10px;
    }
}
.fade-in.second {
    max-height: 30px;
    opacity:0;
    animation-delay:3s;
    animation-fill-mode: forwards;
}
.fade-in.third {
    opacity:0;
    animation-duration: 3s;
    animation-delay:7s;
    animation-fill-mode: forwards;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.shrink {
    animation-name: zoomOut;
    animation-iteration-count: once;
    animation-duration: 2s;
}
.shrink.first {
    animation-delay:3s;
    animation-fill-mode: forwards;
}
.shrink.second {
    animation-delay:7s;
    animation-fill-mode: forwards;
}

@keyframes zoomOut {
  0% {
    transform: scale(1) translateY(0);
    color: $black;
  }

  100% {
    transform: scale(.5) translateY(-100px);
    color: $gray;
  }

}
.zoom-in {

    animation-name: zoomIn;
    animation-iteration-count: once;
    opacity:0;
    animation-delay:10s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale3d(.8, .8, .8);
  }

  50% {
    opacity: 1;
    transform: scale3d(1, 1, 1);

  }
}

Upvotes: 0

Views: 4942

Answers (1)

connexo
connexo

Reputation: 56783

It's because you defined only 0% and 50% in your zoomIn animation. Using 100% instead works.

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale3d(.8, .8, .8);
  }

  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

http://codepen.io/anon/pen/jPLKRp

Upvotes: 3

Related Questions