过渡元素transition的那些事儿

偏执的太偏执、 2022-06-13 07:58 226阅读 0赞

之前看了一些教程，虽然会用，但是总感觉哪里没有太弄清楚，这次终于弄清楚了，来分享一下，其实简单的不行。不知道有些人为什么写的那么复杂

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    	div{
    		width: 200px;
    		height:200px;
    		border:1px solid red;
    		float: left;
    		margin:20px;
    		text-align: center;
    		line-height: 200px;
    	}
    	/*transion前面是需要改变的样式，后面是持续的时间*/
    	.div1{
    		color: blue;
    		background:orange;
    		transition: background 1s,color 1s;
    	/*如果想有很多的样式需要过渡，一个一个写也太累的，那么就采用transition:all 0.5s*/
    	}
    	/*改变后的效果*/
    	.div1:hover{
    		color: red;
    		background:green;
    	}
    	</style>
    </head>
    <body>
    	<div class="div1">hello world</div>
    </body>
    </html>

transion后面其实只需要两个值就可以，一个是想要变化的样式，一个是持续的时间。如果你需要改变的样式太多，那么就可以通过all来实现。这样的变换其实可以满足50%的需求。

下面在进行一点简单的补充，就是变换时候变换速度的控制：

ease-in-out：刚开始速度慢，然后加速，最后慢下来

linear:速度一直恒定

ease-in：过渡开始慢，然后以恒定的速度运行

ease-out：速度刚开始恒定，后面慢下来

cubic-bezier:贝塞尔曲线（感兴趣的可以研究）

使用方法如下：

transition:all 0.5s ease-in;

上面的大概可以满足80%的需求了，最后还有一点就是为这个动画添加延时，也就是在等待多久以后才执行，代码如下：

transition:all 0.5s ease-in 0.2s

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关 transition过渡动画的自述

Hi,大家好！我是`transition`，经常有小伙伴把我和隔壁`animation`搞混，下面我就好好的介绍一下自己，让大家能明白我到底是干啥的。看看我身上的属性吧：

旧城等待，/ 2023年10月06日 15:43/ 0 赞/ 29 阅读

相关 transition:过渡

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

墨蓝/ 2023年07月10日 08:47/ 0 赞/ 25 阅读

相关 css3 过渡transition的语法

css3 过渡transition的语法 transition：众所周知，css效率极高，其变化的过程往往都是在一瞬间完成，速度极快。 CSS transition

àì夳堔傛蜴生んèń/ 2023年07月03日 04:34/ 0 赞/ 25 阅读

相关 Vue之过渡transition

前言 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：在 CSS 过渡和动画中自动应用 class

﹏ヽ暗。殇╰゛Y/ 2023年06月11日 15:30/ 0 赞/ 11 阅读

相关 Vue的过渡&动画效果-transition

![20210727104234223.gif][] / 可以设置不同的进入和离开动画 / / 设置持续时间和动画函数 / .fade-

我不是女神ヾ/ 2022年09月01日 08:12/ 0 赞/ 270 阅读

相关过渡元素transition的那些事儿

之前看了一些教程，虽然会用，但是总感觉哪里没有太弄清楚，这次终于弄清楚了，来分享一下，其实简单的不行。不知道有些人为什么写的那么复杂 <!DOCTYPE h

偏执的太偏执、/ 2022年06月13日 07:58/ 0 赞/ 227 阅读

相关变换元素transform和过渡元素transition混合使用

通过变换元素transform和过渡元素的混合使用，可以做出许多好看的动画效果。下面我们通过一个简单的例子来介绍一下。在看下面的例子之前，强烈建议看一下我的下面两个文章。过

谁践踏了优雅/ 2022年06月12日 03:09/ 0 赞/ 149 阅读

相关变换元素transform的那些事儿

老习惯，直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=

淡淡的烟草味﹌/ 2022年06月12日 03:08/ 0 赞/ 186 阅读

相关过渡 - transition

过渡 - `transition` 是变形`transfrom`其中一种效果，定义为一种状态过渡到另一种状态的过程，今天学习到css3动画，特此记录下过渡的使用和一些效果。

我会带着你远行/ 2022年01月12日 04:37/ 0 赞/ 290 阅读

相关 CSS3过渡——transition

　　让CSS属性值在一定时间内平滑过渡 transition属性值 1.property 　　检索/设置对象中参与过渡的属性　　可设置none（不设置过渡）、

矫情吗；*/ 2021年10月19日 11:52/ 0 赞/ 434 阅读