首页新闻找找看学习计划

使用translateY实现css3 loading动画为什么需要设置bottom:0

0
悬赏园豆:15 [已解决问题] 解决于 2016-05-10 16:49
  <div id="preloader_1">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
* {
        margin: 0;
        padding: 0;
    }
    
    html,
    body {
        height: 100%;
    }
    
    #preloader_1 {
        background-color: yellow;
    }
    
    #preloader_1 span {
        display: block;
        width: 9px;
        height: 10px;
        margin-top: 500px;
        margin-left: 200px;
        top: 0;
        text-align: center;
        background: #9b59b6;
        position: absolute;
        animation: preloader_1 1.5s infinite ease-in-out;
    }
    
    #preloader_1 span:nth-child(1) {
        left: 0;
    }
    
    #preloader_1 span:nth-child(2) {
        left: 11px;
        animation-delay: .2s;
    }
    
    #preloader_1 span:nth-child(3) {
        left: 22px;
        animation-delay: .4s;
    }
    
    #preloader_1 span:nth-child(4) {
        left: 33px;
        animation-delay: .6s;
    }
    
    #preloader_1 span:nth-child(5) {
        left: 44px;
        animation-delay: .8s;
    }
    /*使用这种方式进行Y轴变换时需要设置bottom为0才会显示双向延伸的效果*/
    
    @keyframes preloader_1 {
        0% {
            height: 5px;
            transform: translateY(0px);
            background: #9b59b6;
        }
        25% {
            height: 40px;
            transform: translateY(20px);
            background: #3498db;
        }
        50% {
            height: 5px;
            transform: translateY(0px);
            background: #9b59b6;
        }
        100% {
            height: 5px;
            transform: translateY(0px);
            background: #9b59b6;
        }
    }

示例代码:http://codepen.io/xiaokk06/pen/jqdeXy

希望知道的人解释一下,想了好久没想通

小kk06的主页 小kk06 | 初学一级 | 园豆:56
提问于:2016-05-09 23:54
< >
分享
最佳答案
0

bottom为0的时候,height变大(向上),translateY为正(向下),正好可以保持动画的基线恒定不变,如果不要bottom为0,那么translateY为负,同时top改大点也是一样的效果。

收获园豆:15
上帝之城 | 老鸟四级 |园豆:2442 | 2016-05-10 13:01

嗯嗯 测试了一下发现真的可以 原来是这个原因 不过还是先接着问一下height变化的时候向上变化是固定的是吗?

小kk06 | 园豆:56 (初学一级) | 2016-05-10 16:45

@小kk06: 这个不一定,看基线,如果基线在中间,就往上下两头长

上帝之城 | 园豆:2442 (老鸟四级) | 2016-05-10 22:38

@上帝之城: 然后基线什么的得看vertical-align吧?

小kk06 | 园豆:56 (初学一级) | 2016-05-11 19:09

@小kk06: 嗯

上帝之城 | 园豆:2442 (老鸟四级) | 2016-05-11 20:33

@上帝之城: 知道了 谢啦

小kk06 | 园豆:56 (初学一级) | 2016-05-11 20:37
其他回答(1)
0

其实我不太明白你哪个位置需要设置bottom:0,目前的效果挺好的呀,

前端学步 | 园豆:211 (菜鸟二级) | 2016-05-10 10:48

在线的demo上span有设置bottom为0才有那个效果 上面的代码测试一下就会知道并不是这个效果

支持(0) 反对(0) 小kk06 | 园豆:56 (初学一级) | 2016-05-10 16:42
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册