transition过渡动画的自述

1、transition过渡动画的自述hi,大家好！我是transition，常常有小伙伴把我和隔壁animation搞混，下面我就好好的介绍一下自己，让大家能明了我到底是干啥的。看看我身上的属性吧：大家总是叫我transition，其实我有四个重要的部分组成，下面一一听我介绍：transition-property:需要参加过渡的属性，例如：width、height、backgroundtransition-duration:过渡动画的持续时光，单位秒s或毫秒mstransition-delay：延迟过渡的时光，单位秒s或毫秒mstransition-timing-function：动画过渡的动

2、画类型我可以以属性的形式被定义divwidth:100px;height:100px;background:blue;transition-property: width;/* 需要参加过渡的属性 */transition-duration: 1s;/* 过渡动画的持续时光 */transition-delay: 1s;/* 延迟过渡的时光，单位秒s或毫秒ms */transition-timing-function: ease-out;/* 动画过渡的动画类型 */div:hoverwidth:300px;效果图效果出来了我是不是很厉害？可是上面的我因为属性太多有点不招新手学生待见 o（）o

3、其实平常的我是下面这种形式浮现在代码中的：这样瘦身的我是不是就很可爱了呢？ （）下面这样写，效果一样哟divwidth:100px;height:100px;background:blue;transition:width 1s 1s ease-out ;div:hoverwidth:300px;我还可以更厉害呢！ （••）通常状况下，我会让一些元素在变幻时产生动画效果，但是我得和好搭档hover（鼠标悬停）一起干活，先来看一段代码：divwidth:100px;height:500px;background:teal;/* 而且我还能多个属性逐个显示过渡动画效果哦&mda

4、sh;—*/transition:width .5s linear,height .5s ease .5s,background 1s ease-in 1s;/* 鼠标悬停，转变div的样式 */div:hoverwidth:500px;height:100px;background:hotpink;！（https:/vnode-1253495453.cos.ap-那大家明了这种写法吗？试一试？这里就是应用过渡动画实现的效果，多个属性是依次执行动画效果的，其实就是巧妙应用了过渡延迟属性，让上一个属性执行完了再接着下面一个，是不是很好玩鸭。看我的特技 transition-timin

5、g-functiontransition-timing-function是动画运动的曲线，它一共有6个值。ease - 指定一个缓慢开头，然后迅速，然后渐渐结束的过渡效果（这是默认值）linear - 指定从开头到结束以相同速度的转换效果ease-in - 指定缓慢启动的过渡效果ease-out - 指定一个缓慢结束的过渡效果ease-in-out - 指定开头和结束缓慢的过渡效果cubic-bezier（n,n,n,n） - 在一个三次贝塞尔函数中定义您自己的值div1 transition-timing-function: linear;div2 transition-timing-fun

6、ction: ease;div3 transition-timing-function: ease-in;div4 transition-timing-function: ease-out;div5 transition-timing-function: ease-in-out;看看我都能干什么吧！（°∇°） 复杂一点的例子下面我们再来做一个更好看的效果，类似于弹钢琴的效果，代码如下：html:首页首页首页首页cssul list-style: none;width: 600px;height: 60px;background: skyblue;li float:

7、left;/* 参照物 */position: relative;a display: block;width: 150px;height: 60px;line-height: 60px;text-align: center;color: 333;text-decoration: none;/* 提升层级，解决被span遮住 */position: relative;z-index: 1;span position: absolute;bottom: 0;width: 150px;height: 4px;background: pink;/* 过渡 */transition: height .5s linear;li:hover span height: 60px;请看效果图：这个效果还不错吧，运用了过渡动画结合了定位相关的综合应用。最后再次提示，你想要