问答详情
源自：3-3 优化与扩展

那个文字 动画是怎么触发的

那个文字 动画是怎么触发的

提问者：Mr君 2016-08-31 15:56

个回答

  • Mr君
    2016-11-20 09:07:05

    谢谢哟

    0
  • stone310
    2016-09-06 19:31:18

    先将文字安排好初始样式（初始位置），再添加个结束样式（最终位置），再统一用css3的transition触发，

    我这里写了个小例子，只需要对class名进行更改就可以出现动画效果

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .div .a{margin-top:15px}
        .div .b{margin-top:40px}
        .div .a,
        .div .b{transition:all .8s}
        .div-end .a,
        .div-end .b{margin-top:0px;transition:all .8s}
    </style>
</head>
<body>
<div class="div">     //这里只需要改成div-end就会出现动画效果
<div class="a">HELLO</div>
<div class="b">HERE</div>
</div>
</body>
</html>


    0