CSS过渡

2023-10-17 60

CSS过渡,是一种在更改CSS属性时控制动画速度的方法,可以让属性变化成为一个持续一段时间的,而不是立即生效的过程。例如,将一个元素的颜色从白色改为黑色,通常这个改变是立即生效的,但如果使用CSS过渡后该元素的颜色将按照一定的曲线进行变化。

一、过渡属性

transition 过渡动画主要通过控制元素的属性变化来实现动画效果,用于设置以下个转换属性的简写属性:

1、transition-delay:表示过渡效果开始前的延迟时间,如果未设定此部分,过渡会立即开始,因为默认值为0。

2、transition-duration:定义过渡效果的持续时间,即属性从初始状态过渡到最终状态所需的时间。如果未设定此部分,过渡不会有效果,因为默认值为0。

3、transition-property:用于指定使用过渡效果CSS 属性的名称,比如背景颜色、宽度、高度等,如果不设置这个属性,那么默认会对所有的属性进行过渡效果处理。

4、transition-timing-function : 规定过渡速度的变化曲线,比如线性(linear)、加速(ease)、减速(ease-in)、缓入(ease-out)和缓出(ease-in-out)等。

二、创建动画

要使用CSS过渡创建动画,我们需要指定两个值:

  • 更改的CSS属性;
  • 效果持续时间。

以下代码为width属性添加了一个过渡效果,持续时间为2秒。首先设置目标属性和持续时间:

div {
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}

如果未指定持续时间部分,则默认值为0,并且不会有转换。接下来需要触发属性变化,以下代码使用鼠标悬停事件触发元素上的动画:

div:hover {
width: 300px;
}

这里是完整的源代码:

<html>
<head>
<style> 
div {
width: 100px;
height: 100px;
background: black;
-webkit-transition: width 2s;
transition: width 2s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<div>Hi</div>
</body>
</html>

三、多项改变

可以通过用逗号分隔属性来为多个CSS属性添加过渡效果:

<html>
<head>
<style> 
div {
width: 100px;
height: 100px;
background: black;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
</style>
</head>
<body>
<div>Hover me to see the transition effect!</div>
</body>
</html>

四、浏览器兼容

以下表格列出各浏览器兼容的版本:

IE

Edge Firefox Chrome Safari Opera ios android

9+

12+ 28+ 4+ 6.1+ 12.1+ 7+

4.4

  • 广告合作

  • QQ群号:707632017

温馨提示:
1、本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。邮箱:2942802716#qq.com(#改为@)。 2、本站原创内容未经允许不得转裁,转载请注明出处“站长百科”和原文地址。
CSS过渡
上一篇: TeamViewer macOS部署
CSS过渡
下一篇: CSS动画