过渡的基本形式
元素→元素:hover(只要元素属性发生改变就可以使用过渡)。
元素原来变为hover状态都是干蹦。
过渡效果就是让元素以动画形式,平滑的完成。
语法: transition: all 2s linear 0s,参数解释:
第一个参数:参与过渡的属性,一般我们书写all。.
第二个参数:过渡完成的时间,单位是s,千万不能省略
第三个参数:缓冲描述(函数)
linear(匀速),ease非匀速(两头慢中间快),贝塞尔曲线(cubic-bezier(0, 0.33, 1,-0.35)) ;
第四个参数:延迟时间,单位也是s,不能省略。
还可以单独定义这四个单一属性:
transition-property (参与过渡属性), transition-duration (过渡时间)
transition- timing-function (缓存描述), transition -delay (延迟时间)
参与过渡的属性:只要是数值型的属性以及颜色都可以参与过渡。
比如: width,height,border-width。
<style>
.box{
width: 300px;
height: 333px;
background-color: red;
transition: all 2s ease 2s ;
}
.box:hover{
width: 555px;
height: 666px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>