为什么动画填充模式不适用于此特定元素？答案

【问题标题】：Why is animation-fill-mode not working for this specific element?为什么动画填充模式不适用于此特定元素？
【发布时间】：2015-09-01 17:59:31
【问题描述】：

我正在使用 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);

  }
}

【问题讨论】：

标签： css animation css-animations

【解决方案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

【讨论】：