码迷,mamicode.com
首页 > Web开发 > 详细

CSS3 过渡

时间:2019-11-26 15:03:37      阅读:87      评论:0      收藏:0      [点我收藏+]

标签:css3   -o   添加   多个   col   过渡效   linear   nbsp   指定   

过渡:执行一定操作后某属性从指定状态过渡到另一状态。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;

 

 

CSS3 过渡

标签:css3   -o   添加   多个   col   过渡效   linear   nbsp   指定   

原文地址:https://www.cnblogs.com/xihailong/p/11935488.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!