189 8069 5689

transition怎么实现过渡动画

本篇内容主要讲解“transition怎么实现过渡动画”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“transition怎么实现过渡动画”吧!

创新互联是一家集网站建设,庆城企业网站建设,庆城品牌网站建设,网站定制,庆城网站建设报价,网络营销,网络优化,庆城网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

transition属性:

transition-property:需要参与过渡的属性,例如:width、height、background…

transition-duration:过渡动画的持续时间,单位秒s或毫秒ms

transition-delay:延迟过渡的时间,单位秒s或毫秒ms

transition-timing-function:动画过渡的动画类型

我可以以属性的形式被定义

div{

width:100px;

height:100px;

background:blue;

transition-property: width;/* 需要参与过渡的属性 */

transition-duration: 1s;/* 过渡动画的持续时间 */

transition-delay: 1s;/* 延迟过渡的时间,单位秒s或毫秒ms */

transition-timing-function: ease-out;/* 动画过渡的动画类型 */

}

div:hover{

width:300px;

}

效果图

效果出来了我是不是很厉害?可是上面的我由于属性太多有点不招新手同学待见 o(╥﹏╥)o

其实平时的我是下面这种形式出现在代码中的:

这样瘦身的我是不是就很可爱了呢? (╹▽╹)

下面这样写,效果一样哟

div{

width:100px;

height:100px;

background:blue;

transition:width 1s 1s ease-out ;

}

div:hover{

width:300px;

}

我还可以更厉害呢! ୧(๑•̀◡•́๑)૭

通常情况下,我会让一些元素在变化时产生动画效果,但是我得和好搭档hover(鼠标悬停)一起干活,先来看一段代码:

div{

width:100px;

height:500px;

background:teal;

/* 而且我还能多个属性逐个显示过渡动画效果哦——*/

transition:width .5s linear,height .5s ease .5s,background 1s ease-in 1s;

}

/* 鼠标悬停,改变div的样式 */

div:hover{

width:500px;

height:100px;

background:hotpink;

}

![](/upload/otherpic64/18101.jpg)

那大家明白这种写法吗?试一试?

这里就是应用过渡动画实现的效果,多个属性是依次执行动画效果的,其实就是巧妙应用了过渡延迟属性,让上一个属性执行完了再接着下面一个,是不是很有趣鸭。

看我的绝技 transition-timing-function

transition-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-function: ease;}

#div3 {transition-timing-function: ease-in;}

#div4 {transition-timing-function: ease-out;}

#div5 {transition-timing-function: ease-in-out;}

看看我都能干什么吧!ヾ(◍°∇°◍)ノ゙ 复杂一点的例子

下面我们再来做一个更好看的效果,类似于弹钢琴的效果,代码如下:

html:

css

到此,相信大家对“transition怎么实现过渡动画”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


本文标题:transition怎么实现过渡动画
分享地址:http://jkwzsj.com/article/jghsso.html

其他资讯