css3 transition过度属性

transition属性是四个单独属性的简写,四个分别如下:
1,transition-property:值是一个盒子改变的属性
2,transition-duration:设置这个盒子改变的时间
3,transition-timing-function: 设置盒子属性被改变的速度,主要的值有linear,ease,ease-in,ease-out,ease-in-out以及使用cubic-bezier()自定义
4,transition-delay:设置这个改变的过程多久之后开始
例子:
先定义body,box1

<body>
    <div class="box1"></div>
</body>
<style>
    body {
        border: 1px darkred solid;
        width: 100%;
        height: 1000px;
    }
    .box1 {
        background-color: pink;
        width: 100px;
        height: 100px;
    }
</style>

改变box1的height

   .box1:hover{
        height: 400px;
        transition: height 2s linear 1s;
    }

transition中,height代表要box1改变的属性,既box1的高,2s,表示height从100px变成400px这个过程需要2s,linear表示改变的速度呈线性,1s表示1秒后开始这个改变的过程

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容