CSS-transition过渡动画【看这一篇就够了！！】

是洋洋a

于 2024-09-03 16:55:20 发布

阅读量419

点赞数 13

分类专栏：前端 CSS HTML 文章标签： css 前端

本文链接：https://blog.csdn.net/zheshiyangyang/article/details/141859860

版权

前端同时被 3 个专栏收录

45 篇文章 0 订阅

订阅专栏

CSS

24 篇文章 1 订阅

订阅专栏

HTML

9 篇文章 0 订阅

订阅专栏

transition过渡动画

什么是过渡动画？

一个元素由A状态经过一段时间变化成B状态，我们只需要定义其开始和结束的状态，而他的中间的状态会自己添加“补间动画”，如下所示：

在以前，网页的特效基本都是由JS定时器实现的，现在逐步改为使用CSS3过渡
有点：动画更细腻，内存开销小
兼容性：移动PC都兼容，但是需要加上对应的浏览器前缀

transition基本语法

/* 
	[] 表示这个值，可以省略不写
	css属性名  过渡时间   时间函数  延迟时间 
*/
transition: transition-property transition-duration [transition-timing-function]
  [transition-delay];

属性	描述
`transition-property`	指定 CSS 属性的 name，哪些属性要过渡
`transition-duration`	transition 效果需要指定多少秒或毫秒才能完成，动画时间
`transition-timing-function`	指定 transition 效果的转速曲线，变化曲线
`transition-delay`	定义 transition 效果开始的时候（延迟时间）

用法

/* 
    width : 过渡属性为width
    1s : 动画时长1秒
    linear : 直线匀速动动
    0s : 延迟时间,不延迟
*/
transition: width 1s linear 0s;
transition: width 1s;
transition: width 1s linear;
transition: width 1s 2s;

实际应用

<style type="text/css">
  div {
    width: 100px;
    height: 100px;
    background: tomato;
    /* 
            transition：定义过渡动画
            border-radius：过渡的css属性
            1s ：动画过渡时间
            ease： 速度慢快慢
            0s ：延迟时间0s 
        */
    transition: border-radius 1s ease 0s;
    margin: 50px 10px;
  }
  .box:hover {
    border-radius: 50%;
  }
</style>
<body>
  <div class="box"></div>
</body>

效果：

可参与过渡的属性

所有数值类型的属性，都可以参与过渡
比如：width、height、left、top、border-radius、font-size、opacity
背景颜色和文字都可以被过渡
所有的变形(2D、3D)都能被过渡，在CSS中90%的属性都可以被过渡

不能参与过渡的属性

float和position不能
display不能
font-size不能

all特殊属性

需要所有属性参与过渡，即定义为all
all属性不要随意使用，会引发效率问题，如果只需要某一个属性过渡，还是要指定特定的属性

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: salmon;
    border-radius: 0;
    /* 
            all: 所有能过的渡的属性，发生改变时，都会发生过渡效果
            1s: 动画过渡时间为1s
            linear: 动画习速运动
            0s: 延迟时间
        */
    transition: all 1s linear 0s;
  }
  .box:hover {
    /* 宽、高、背景颜色、圆角都是可过渡属性，所以鼠标滑动后，都能呈现过渡变化效果 */
    width: 200px;
    height: 300px;
    background-color: skyblue;
    border-radius: 50%;
  }
</style>
<body>
  <div class="box"></div>
</body>

效果：

定义多个过渡动画

多个过渡动画之间用“逗号”隔开

transition: 属性 过渡时间 时间函数 延迟时间, 属性 过渡时间 时间函数 延迟时间,
  属性 过渡时间 时间函数 延迟时间;

应用

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    opacity: 1;
    /* 
            动画1： 宽度变化
            动画2：延迟1s后，高度发生变化
            动画3：延吃2s后，透明度发生变化
        */
    transition: width 1s linear 0s, height 1s ease 1s, opacity 1s linear 2s;
  }
  /* 鼠标滑动后，改变宽，高，透明度 */
  .box:hover {
    width: 200px;
    height: 200px;
    opacity: 0.2;
  }
</style>
<body>
  <div class="box"></div>
</body>

效果：

注：

虽然上面的width、height、opacity属性可以用一个all来代替，但是all与它们单独写出动画具有根本区别！
如果用all来代替，那么三项属性会同时发生改变
而如果时多段动画，则会“从左到右”的“执行完上一个才播放下一个”的顺序进行播放动画

如果把把上面的属性改为all，效果如下：
transition: all 1s linear 0s;

过渡的四个小属性

transition本质上是四个小属性的复合写法

`transition-property`	指定 CSS 属性的 name，哪些属性要过渡
`transition-duration`	指定动画多少秒或毫秒才能完成，动画执行时间
`transition-timing-function`	时间函数，指定动画转速曲线，即变化的速度
`transition-delay`	指定动画开始前，需要的延迟时间

多个值之间用“逗号”隔开，没有指定的值，以属性的第一个值为准

transition-property: width, height;
transition-duration: 1s, 2s;
transition-timing-function: linear;
transition-delay: 0s, 1s;

小属性主要用来层叠大属性

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    opacity: 1;
    /* 
            all: 所有能参于过渡的属性，都可参与过渡动画
            1s: 过渡时间1s
        */
    transition: all 1s;
    /* 过渡属性: 宽,高，不透明度 */
    transition-property: width, height, opacity;
    /* 过渡时间：
        	width 1s 
        	height 2s 
        	opacity 1s 
        */
    transition-duration: 1s, 2s;
    /* 
        	过渡延迟时间：
            0s：width宽过渡时间
            1s：height高过渡时间 
            2s：opacity不透明度过渡时间
        */
    transition-delay: 0s, 1s, 2s;
  }
  .box:hover {
    width: 200px;
    height: 200px;
    opacity: 0.2;
  }
</style>
<body>
  <div class="box"></div>
</body>

效果：

时间函数

时间函数（transition-timing-function），管理着动画在单位帧内播放的速度曲线

时间函数的预设值

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

常用参数

横轴表示时间，纵轴表示变化量，越斗表示运动速度越快

贝塞尔曲线

官方地址：cubic-bezier.com 可以在线生成贝塞尔曲线，可以自定义动画时间函数

transition过渡动画实战案例

鼠标滑动，背景从透明到半透明的效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box {
			position: relative;
			width: 200px;
			height: 200px;
			margin: 100px auto 0px;
		}
		.box img {
			width: 200px;
			height: 200px;
			object-fit: cover;
		}
		.box::after {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: rgba(0,0,0,0);
			transition: background-color 1s ease;
		}
		.box:hover::after {
			background-color: rgba(0,0,0,0.5);
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="/static/jjy.png" alt="">
	</div>
</body>
</html>

效果：

鼠标滑动文字从下往上滑动效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		p {
			margin: 0px;
		}
		.box {
			position: relative;
			width: 200px;
			height: 200px;
			margin: 100px auto 0px;
		}
		.box img {
			width: 200px;
			height: 200px;
			object-fit: cover;
		}
		.box p {
			position: absolute;
			width: 100%;
			height: 30px;
			line-height: 30px;
			text-align: center;
			background-color: rgb(0,0,0,0.5);
			color: #fff;
			bottom: -30px;
			left: 0px;
		}
		.box:hover p {
			bottom: 0px;
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="/static/jjy.png" alt="">
		<p>我是鞠婧祎~</p>
	</div>
</body>
</html>

效果：

商城右侧通栏导航

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="/myicon/iconfont.css">
	<style>
		ul {
			margin: 0px;
			padding: 0px;
			list-style: none;
		}
		.siderbar {
			position: fixed;
			width: 5px;
			height: 100%;
			top: 0;
			right: 0;
			background-color: #666;
		}
		.siderbar ul{
			width: 50px;
			height: 300px;
			position: absolute;
			left: -50px;
			top: 50%;
			margin-top: -150px;
		}
		.siderbar ul li{
			width: 50px;
			height: 50px;
			position: relative;
		}
		.siderbar ul li i {
			display: block;
			width: 50px;
			height: 50px;
			background-color: #666;
			position: absolute;
			top: 0;
			left: 0;
			font-size: 24px;
			text-align: center;
			line-height: 50px;
			color: #fff;
		}
		.siderbar ul li span{
			display: block;
			width: 0px;
			height: 50px;
			overflow: hidden;
			position: absolute;
			top: 0;
			right: 50px;
			background-color: #666;
			columns: #fff;
			text-align: center;
			line-height: 50px;
			transition: width 1s;
		}
		.siderbar ul li:hover i {
			background-color: red;
		}
		.siderbar ul li:hover span {
			width: 100px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="siderbar">
		<ul>
			<li>
				<i class="iconfont icon-gerenzhongxin-zhihui"></i>
				<span>个人信息</span>
			</li>
			<li>
				<i class="iconfont icon-xiaoxi-zhihui"></i>
				<span>消息</span>
			</li>
			<li>
				<i class="iconfont icon-kuaijiezhifu"></i>
				<span>支付</span>
			</li>
			<li>
				<i class="iconfont icon-fanhui"></i>
				<span>返回</span>
			</li>
		</ul>
	</div>
</body>
</html>

效果：

是洋洋a

关注

13
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS-transition过渡动画【看这一篇就够了！！】

多个过渡动画之间用“逗号”隔开transition: 属性过渡时间时间函数延迟时间, 属性过渡时间时间函数延迟时间,属性过渡时间时间函数延迟时间;应用.box {opacity: 1;
复制链接

扫一扫