css3动画

最新推荐文章于 2022-12-15 14:38:50 发布

zoey-zhang

最新推荐文章于 2022-12-15 14:38:50 发布

阅读量207

点赞数

本文链接：https://blog.csdn.net/z15036826300z/article/details/52841165

版权

css3动画有两种：

(1)animation 与 @keyframes结合多用于循环动画

(2)transition 与transform结合多用于单一动画，也经常用于设置一种效果向另外一种效果的过渡效果。

eg:把div向上平移

<html>
<head>
<style>
    #a{
        position: absolute; 
        width: 100%; 
        height:600px;
        top: 0px; 
        left: 0px; 
        background-color:blue; 
        -webkit-transform:translateY(100%);  
        -webkit-transition:-webkit-transform 0s 0s;
        border:1px solid red;
    }
</style>
<script>
    $("#a").css({
     "-webkit-transform":"translateY(0%)",
     "-webkit-transition":"-webkit-transform 0.5s ease-out 1s",
 })
</script>
</head>
<body>
    <div id="a">
    </div>
</body>
</html>

从网上各个大神的博客总结看来：在移动端能用css3动画的就别用 jquery的动画