CSS3过渡

最新推荐文章于 2022-10-25 11:32:46 发布

Gckkoo

最新推荐文章于 2022-10-25 11:32:46 发布

阅读量523

点赞数

文章标签： css3 动画

本文链接：https://blog.csdn.net/gckkoo/article/details/78408103

版权

CSS3过渡

特点

（1）本质上是一帧动画，一帧结束后，就没有然后了

（2）过渡的效果的实现，必须通过用户的行为，可能触发的行为：hover 、focus、click。或者通过JS代码

1、 transition的属性

transition-property：指定元素的过渡属性
transition-duration:规定了过渡的时间
transition-timming-function:规定以何种方式过渡
ease：表示的是快速的：默认值
ease-in：先慢后快
ease-out：先快后慢
linear：表示的是线性平缓的变化
steps(X):表示的是过渡分几步完成，X只能为正数

2、缩写

transition: property duration function depay
transition :指定过渡的属性过渡的时间过渡的方式过渡的延迟

3、触发过渡

只有当用户触发事件，过渡事件才能进行，比如用户点击、鼠标移入移除等等，这是他的一个局限性

4、局限性

    <style>
        #box{
            height: 100px;
            width: 100px;
            background:skyblue;
            position: absolute;
            left:0;
            transition-property: left width;
            transition-duration: 2s;
        }
        body:hover #box{
            left: 800px;
            width: 200px;
        }
        body{
            height: 500px;
        }
    </style>
</head>
<body>
<div id="box"></div>
</body>