CSS:transition 过渡效果

div{ height:300px; weight:400px; transition:width 0.5s easy-in 0s,height 0.3s easy 0s;}

div:hover{ height:400px;weight:500px;} /*鼠标经过盒子,变换高度、宽度*/

width:元素的要过渡的属性

0.5s:花费时间

easy-in:加速

0s:何时开始

transition-property: 过渡用在元素的什么属性上

transition-delay:花费时间 (s或者ms)

transition-timing-function:规定过渡效果的时间曲线 (linear匀速、 ease逐渐慢下来、 ease-in加速、 ease-out减速、 ease-in-out

                                        先加速后减速)

transition-duration:何时开始(默认是0s,立刻开始)

注意:

如果有多个要规定过渡元素的属性,用逗号隔开。

transition是写在div中,不是hover中。(若写在hover中,进入有过渡,退出无过渡) 【哪个元素有动画效果,哪个元素里面加过渡

若有属性都要变化的话,直接transition:all 0.6s; (这里的all是已经写的hover里面的宽和高)

发布了70 篇原创文章 · 获赞 23 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/tiandaochouqin_1/article/details/88309949