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