使用 css 开启和关闭动画 - 动画效果更好

Question

我正在玩here 的开/关监视器效果，虽然我的动画不是在开关上，而是在窗口滚动上。我是这样设置的：

$(window).on('scroll', function () {
    var sctop = $(this).scrollTop();
    var element_top = $('.image_animation').offset().top;
    if (sctop > element_top) {
        $('.image_animation').addClass('off');
    } else {
        $('.image_animation').removeClass('off');
    }
});

.before_content {
    height: 300px;
}
.after_content {
    height: 800px;
}
.container {
    position: relative;
}
.image_animation {
    display: inline-block;
    position: relative;
}
.image_animation img {
    z-index: 100;
}
.image_animation .background_image {
    width: 94%;
    height: 73%;
    z-index: -1;
    position: absolute;
    top: 4%;
    left: 3%;
    -webkit-background-size: cover!important;
    background-size: cover!important;
    background-repeat: no-repeat!important;
    animation: imac 10s linear 2s infinite;
}
@keyframes turn-off {
    0% {
        transform: scale(1, 1.3) translate3d(0, 0, 0);
        -webkit-filter: brightness(1);
        filter: brightness(1);
        opacity: 1;
    }
    60% {
        transform: scale(1, 0.001) translate3d(0, 0, 0);
        -webkit-filter: brightness(10);
        filter: brightness(10);
    }
    100% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: scale(0, 0.0001) translate3d(0, 0, 0);
        -webkit-filter: brightness(50);
        filter: brightness(50);
    }
}
.image_animation.off > .background_image {
    animation: turn-off 0.55s cubic-bezier(0.23, 1, 0.32, 1);
    animation-fill-mode: forwards;
}
.image_animation:before {
    content:"";
    width: 94%;
    height: 73%;
    z-index: -1;
    position: absolute;
    top: 4%;
    left: 3%;
    background: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="before_content"></div>
<div class="container">
    <div class="image_animation">
        <img src="http://i.imgur.com/DL7AUy3.png" alt="">
        <div class="background_image" style="background:url(http://i.imgur.com/VRcQKtY.jpg);"></div>
    </div>
</div>
<div class="after_content"></div>

关闭动画效果很好，但打开动画有问题。我不需要像原始代码笔那样花哨的东西，淡入就足够了。我尝试添加类on，然后用它来启动某种css更改，但没有运气。我也尝试过动画，但效果不佳。目前我的图片刚刚出现，有点蹩脚。

知道如何在重新滚动时进行这种转换吗？

Answer 1

为要添加的.on 类添加额外样式

.image_animation.on > .background_image {
    animation: turn-off 0.55s cubic-bezier(0.23, 1, 0.32, 1) reverse;
    animation-fill-mode: backwards;
}

并将您的 javascript 更改为

 $(window).on('scroll', function () {
     var sctop = $(this).scrollTop();
     var $image_animation = $('.image_animation');
     var element_top = $image_animation.offset().top;
     if (sctop > element_top) {
         $image_animation.removeClass('on');
         $image_animation[0].offsetWidth = $image_animation[0].offsetWidth;
         $image_animation.addClass('off');
     } else {
         $image_animation.removeClass('off');
         $image_animation[0].offsetWidth = $image_animation[0].offsetWidth;
         $image_animation.addClass('on');
     }
 });

我还更改了0% 关键帧以使动画看起来更好

0% {
    transform: scale(1, 1) translate3d(0, 0, 0); 
    -webkit-filter: brightness(1);
    filter: brightness(1);
    opacity: 1;
}

请注意，现在比例为 (1, 1)，因此反向看起来更好。

offsetWidth 行是刷新动画的小技巧，因此它们不会出现更改问题。

去看看

https://jsfiddle.net/hh7r4jes/1/