目录
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>效果：
