css - 为什么 animation-fill-mode 不适用于这个特定元素？

Question

我正在使用 CSS 关键帧动画来创建一些简单的动画文本，并且 animation-fill-mode:forward 正在为其中的大部分工作以在动画触发后保留除视频元素之外的属性。它回到它以前的状态。我找不到任何会导致它的东西。

这是一个 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);

  }
}

Answer 1

这是因为您在 zoomIn 动画中只定义了 0% 和 50%。使用 100% 可以。

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

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

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