CSS使用transition属性来做动画


关键词

CSS transition 动画

摘要

CSS中可以使用transition属性来设置动画,结合hover伪类即可。

transition是CSS3中用来设置场景过渡的效果的,完整的语法是:

transition: [property] [duration] [timing-function] [delay];

transition-property:规定设置过渡效果的 CSS 属性的名称。
transition-duration:规定完成过渡效果需要多少秒或毫秒。
transition-timing-function:规定速度效果的速度曲线。
transition-delay:定义过渡效果何时开始

如果我们设置:transition: 2s;表示它的过渡场景执行时长为2秒。一般要配合hover之类的伪类来操作。比如下面的例子。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>transition动画</title>
</head>
<body>

<style type="text/css" media="screen" id="test">
.d1{ width: 200px; height:10px; background-color: #ccc; border-radius: 5px; overflow: hidden;}
.d2{ width: 10px; height: 10px; background-color: #f80; transition: 3s;}
.d2:hover{ width: 200px; }
</style>

<div class="d1">
    <div class="d2"></div>
</div>

</body>
</html>


鼠标移动到d2上时,d2会在3秒内宽度变成200px。当鼠标移走,它又会花3s将宽度重置为10px。

关于CSS使用transition属性来做动画,本文就介绍这么多,希望对您有所帮助。

 

要饭二维码

洪哥写文章很苦逼,如果本文对您略有帮助,可以扫描下方二维码支持洪哥!金额随意,先行谢过!大家的支持是我前进的动力!

文章的版权

本文属于“洪哥笔记”原创文章,转载请注明来源地址:CSS使用transition属性来做动画:http://www.splaybow.com/post/css-transition-donghua-09099.html

如果您在服务器运维、网络管理、网站或系统开发过程有需要提供收费服务,请加QQ:115085382!十年运维经验,帮您省钱、让您放心!
亲,如果有需要,先存起来,方便以后再看啊!加入收藏夹的话,按Ctrl+D

« JavaScript中的isNaN方法判断不了空字符串 正则表达式的零宽度前置断言和后置断言 »