Question

我正在使用CSS关键帧动画来创建一些简单的动画文本和动画填充模式：转发正在大部分工作，以便在动画触发后保持属性，视频元素除外。它可以追溯到以前的状态。我找不到任何会导致它的东西。

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

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

1 个答案: