首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >css3动画代替js脚本实现欢迎页面动画

css3动画代替js脚本实现欢迎页面动画

作者头像
天天_哥
发布2018-09-29 14:47:52
4.1K0
发布2018-09-29 14:47:52
举报
文章被收录于专栏:天天天天
1.使用脚本操作dom元素

在页面加载时,使用js控制dom的animation

    setTimeout(function() {
        $('.welcome').fadeOut(1000)
    }, 5000)

    setTimeout(function() {
        $('.painted-scroll').css({
            'display': 'block'
        })
        $('.painted-scroll').find('span').animate({
            'left': '820px'
        })
    }, 5000)

    setTimeout(function() {
        $('.painted-scroll').fadeOut(1000)
    }, 13000)
2.使用css3的animation实现

两个动画通过动画延时属性,实现连续加载

    /*小鱼*/
    .welcome {
        background: rgba(255, 255, 255, 1);
        -webkit-animation: welcomeAnimation 5s linear;
        -moz-animation: welcomeAnimation 5s linear;
        -o-animation: welcomeAnimation 5s linear;
        -ms-animation: welcomeAnimation 5s linear;
        animation: welcomeAnimation 5s linear;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }
    
    @keyframes welcomeAnimation {
        0% {
            opacity: 1;
            visibility: visible;
            -webkit-animation-timing-function: ease-in;
        }
        50% {
            opacity: 1;
            visibility: visible;
            -webkit-animation-timing-function: ease-in;
        }
        98% {
            opacity: 1;
            visibility: visible;
            -webkit-animation-timing-function: ease-in;
        }
        100% {
            opacity: 0;
            visibility: hidden;
            -webkit-animation-timing-function: ease-in;
        }
    }


    /*画轴*/
    span {
        position: absolute;
        left: 80px;
        top: -13px;
        display: block;
        width: 800px;
        height: 540px;
        background: #ebe5d9 url('../img/scroll-right.jpg') no-repeat center left;
        -webkit-animation: imageAnimation 5s linear 6s;
        -moz-animation: imageAnimation 5s linear 6s;
        -o-animation: imageAnimation 5s linear 6s;
        -ms-animation: imageAnimation 5s linear 6s;
        animation: imageAnimation 5s linear 6s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }
    
    @keyframes imageAnimation {
        0% {
            left: 80px;
            -webkit-animation-timing-function: ease-in-out;
        }
        50% {
            left: 410px;
            -webkit-animation-timing-function: ease-in-out;
        }
        100% {
            left: 820px;
            -webkit-animation-timing-function: ease-in-out;
        }
    }

gif转换有点问题,效果不是很柔和

3.比较

两者都能实现类似效果,但是在css3动画中可以实现跟多的细节,通过transition-timing-function是不是可以做跟多的改变呢,现在流行的趋势中,mvvm的思想都是尽量不用dom操作,所以说将来的css3动画会右更多的发展空间 在现在流行的js库中,实现动画更多的使用的是css3的animation实现,还有浏览器对css3的支持度越来越高,在对比中提现css3将来的地位还是举足轻重的,

3.1swiper

3.2 bootstrap

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.08.09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.使用脚本操作dom元素
  • 2.使用css3的animation实现
  • 3.比较
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档