滚动并到达定义的像素时开始动画或过渡(CSS)

塞尔吉奥·文托(Sergio Vento)

看到元素时如何激活转场或动画?动画或过渡在CSS中。代码是这样的:

.primo {
    -webkit-animation: mysecond 6s; /* Chrome, Safari, Opera */
    animation: mysecond 6s;
}
满山树

演示

 $(document).ready(function () {
        slider();
    });

    $(window).scroll(function () {
        slider();
    });

    function slider() {
        if (document.body.scrollTop > 300)
                $('#hidden').stop().animate({"margin-left": '0'});
    }

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

用#hidden替换div,将要更改的属性应放在动画中

在上面的示例中#hidden具有margin-left:-200px; 在CSS

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

当用户滚动并到达 div 时使数字动画

来自分类Dev

CSS过渡-动画在开始时无法正常工作

来自分类Dev

动画-文字开始滚动时变得模糊

来自分类Dev

过渡开始时触发JavaScript CSS过渡结束

来自分类Dev

为什么当ViewPager向左滚动时颜色过渡动画是错误的?

来自分类Dev

滚动条通过CSS动画/过渡出现

来自分类Dev

滚动条通过CSS动画/过渡出现

来自分类Dev

定义 CSS 过渡效果(开始和结束定位)

来自分类Dev

CSS过渡和动画在开始的动画完成后消失

来自分类Dev

jQuery CSS过渡动画

来自分类Dev

CSS Toggle过渡动画

来自分类Dev

CSS动画和过渡

来自分类Dev

动画过渡 css 属性

来自分类Dev

滚动到自定义CSS3过渡

来自分类Dev

CSS跨像素距离的过渡

来自分类Dev

悬停时CSS过渡动画无法在Firefox中唤醒

来自分类Dev

CSS3:动画精灵+悬停过渡时

来自分类Dev

取消悬停元素时更改CSS中动画的过渡速度

来自分类Dev

我该如何开始触摸动画,直到到达精灵表的结尾时停止?

来自分类Dev

如何在以 1600 分辨率开始滚动时到达页脚部分时停止固定部分

来自分类Dev

当您到达屏幕底部时,页脚会设置动画效果,但是当您向上滚动时,动画效果会降低

来自分类Dev

当滚动条到达特定位置时对div进行动画处理

来自分类Dev

当用户向下滚动并到达数据集末尾时,更新数据集的最佳方法是什么?

来自分类Dev

当您在react-spring中滚动查看某个块的动画时,如何开始动画?

来自分类Dev

SVG会更改大小,但不会在滚动过渡时设置动画

来自分类Dev

如何确保CSS过渡动画

来自分类Dev

动画结束后的CSS过渡

来自分类Dev

CSS过渡动画不显示

来自分类Dev

CSS3-动画过渡?

Related 相关文章

热门标签

归档