欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS3 过渡

程序员文章站 2022-03-26 12:21:42
过渡:执行一定操作后某属性从指定状态过渡到另一状态。1.指定要添加效果的CSS属性。 2.指定效果的持续时间。 div{ transition: width 2s; -webkit-transition: width 2s; /* Safari */ } div:hover{ width:300px ......

过渡:执行一定操作后某属性从指定状态过渡到另一状态。1.指定要添加效果的css属性。 2.指定效果的持续时间。

div{
    transition: width 2s;
    -webkit-transition: width 2s; /* safari */
}

div:hover{
    width:300px;
}

也可以同时改变多个属性

div{
    transition: width 2s, height 2s, transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
transition的四个属性如下:
div{
    transition: 属性名 过渡时间 过渡效果的时间曲线 开始的延迟时间
    -webkit-transition:属性名 过渡时间 过渡效果的时间曲线 开始的延迟时间
}
属性名:width height background-color;
过渡时间:2s;
过渡效果的时间曲线: linear ease ease-in ease-out ease-in-out;
开始的延迟时间:2s;