CSS的transition属性怎么使用

我们先来看一下transition过渡属性是什么？

transition属性是在表现时间经过的变化时使用，具体来说，你可以通过点击光标逐渐更改背景颜色等，还有其他的animation 属性，但过渡属性用于进行相对简单的变化时使用。

下面我们就来具体看看transition属性的用法

-webkit-transition-property: 变化的属性(background属性等); -webkit-transition-duration: 变化的秒数; -webkit-transition-timing-function: 变化的方法;

-webkit-transition-timing-function的有以下的值

default linear: 匀速 ease-in: 逐渐加速 ease-out: 逐渐减速 ease-in-out: 逐渐加速和逐渐加速 cubic-bezier: 自定义

-webkit-transition: 变化的属性 変化的秒数 変化的方法;

我们来看具体的示例

代码如下

<div id="demo"></div> <br> <div id="demo2"></div>

CSS代码

#demo {   height: 100px;   width: 200px;   background: rgb(255, 100, 100);   -webkit-transition-property: background;   -webkit-transition-duration: 1s;   -webkit-transition-timing-function: linear; } #demo:hover {   background: rgb(100, 255, 100); } #demo2 {   height: 100px;   width: 200px;   background: rgb(255, 100, 100);   -webkit-transition: background 2s ease-in-out; } #demo2:hover {   background: rgb(100, 100, 255); }

运行结果

执行上述代码，将显示如下效果

将鼠标光标放在两个红色的框上，颜色将会逐渐改变

本篇文章到这里就全部结束了，更多有关于transition属性的内容大家可以移步到PHP中文网的CSS3视频教程栏目中进一步的学习！！！

以上就是CSS的transition属性怎么使用的详细内容，更多内容请关注技术你好其它相关文章！