码迷,mamicode.com
首页 > 其他好文 > 详细

【前端】过渡(transition)

时间:2019-09-23 10:22:31      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:delay   语法   property   header   function   宽度   head   前端   格式   

过渡(transition)

语法格式:

transition: 要过渡的属性  花费时间  运动曲线  何时开始;
如果有多组属性变化,还是用逗号隔开。
属性 描述 CSS
transition 简写属性,用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3
transition-delay 规定过渡效果何时开始。默认是 0。 3

如果想要所有的属性都变化过渡, 写一个all 就可以

transition-duration 花费时间 单位是 秒 s 比如 0.5s 这个s单位必须写 ms 毫秒

运动曲线 默认是 ease

何时开始 默认是 0s 立马开始

举个例子

div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 要过渡的属性  花费时间  运动曲线  何时开始; */
            transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
            /* transtion 过渡的意思  这句话写到div里面而不是 hover里面 */
  
            
}
div:hover {  /* 鼠标经过盒子,我们的宽度变为600 */

            width: 600px;
            height: 300px
}

transition: all 0.6s;  /* 所有属性都变化用all 就可以了  后面俩个属性可以省略 */

【前端】过渡(transition)

标签:delay   语法   property   header   function   宽度   head   前端   格式   

原文地址:https://www.cnblogs.com/Kighua/p/11570290.html

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