CSS 小结笔记之变形、过渡与动画
程序员文章站
2022-10-04 21:27:52
1、过渡 transition 过渡属性用法： transition :ransition-property transition-duration transition-timing-function transition-delay 可以一起指定也可以分别单独指定 transition-prop ......
1、过渡 transition
过渡属性用法： transition :ransition-property transition-duration transition-timing-function transition-delay
可以一起指定也可以分别单独指定
- transition-property: 是要过渡的属性（如width，height），all是所有都改变。
- transition-duration：花费的时间，单位为s或ms
- transition-timing-function：是指定动画类型（运动区曲线），运动曲线有以下几种
ease=>逐渐慢下来（默认值） linear=>匀速 ease-in=>加速 ease-out=>减速 ease-in-out=>先加速在减速
- transition-delay 延迟时间，单位为s或ms
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
<style>
div {
width: 100px;
height: 200px;
background-color: aqua;
transition: width 2s ease-in-out 0.5s;
}
div:hover {
width: 500px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果如下，当鼠标上上去后变化不再是瞬间完成，而是过渡完成。
2、变形 transform
(1)、2d变形
（a）移动 translate(x,y)
移动可以指定像素值也可以指定百分比，注意：指定百分比是自身大小的百分比，因此可以用于设置盒子定位时的居中对齐（在设置left：50%后再移动自身的-50%即可）。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: aqua;
transition: all 2s;
}
div:active {
transform: translate(200px, 200px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
点击之后盒子进行了移动。用于让定位的盒子居中的代码入下
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
<style>
.fa {
width: 300px;
height: 300px;
background-color: aqua;
transition: all 0.5s;
position: relative;
}
.son {
background-color: red;
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="fa">
<div class="son"></div>
</div>
</body>
</html>
结果为
（b）缩放 scale（x，y）
x,y设置大于1 是放大，小于1 是缩小。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: aqua;
margin: 200px auto;
transition: all 2s;
}
div:hover {
transform: scale(0.5, 2);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
（c）旋转
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
<style>
div {
width: 200px;
height: 100px;
background-color: aqua;
margin: 200px auto;
transition: all 2s;
transform-origin: bottom left;
}
div:hover {
transform: rotate(120deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
（d）倾斜 skew（x deg ,y deg）
x,y分别指定倾斜在x，y方向上的角度，可以为负数。y值不写默认为0。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: aqua;
border: 1px solid red;
transition: all 1s;
margin: 200px auto;
}
div:hover {
transform: skew(30deg, 20deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
（2）3d变形
（a）旋转（rotatex,rotatey,rotatez）
3d旋转与2d类似，只不过一个是基于二位坐标一个是基于三维坐标。三个值可以同时指定也可以单独指定。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
<style>
div {
width: 200px;
height: 100px;
background-color: aqua;
margin: 200px auto;
transition: all 2s;
transform-origin: bottom left;
}
div:hover {
transform: rotatex(120deg);
/* transform: rotatey(120deg); */
/* transform: rotatez(120deg); */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
（b）移动（translatex，translatey，translatez）
3d移动对于xy方向上的移动与2d移动一致。只有z方向上的移动不一样。z方向上的移动在现实生活中是距离变远，距离变近。因此在网页中显示结果是变近则变大，变远则变小。
要使z方向上移动生效首先要设置perspective（眼睛距离屏幕的距离）;
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
<style>
body {
perspective: 1000px;
/* 数值越小说明眼睛离的越近 */
}
div {
width: 200px;
height: 200px;
background-color: aqua;
transition: all 0.5s;
margin: 200px auto;
}
div:hover {
transform: translate3d(0, 0, 200px);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
3、动画 animation
（1）、animation: animation-name ||animation-duration|| animation-timing-function ||animation-delay ||animation-iteration-count|| animation-direction|| animation-fill-mode;
animation-name:动画名称（自己使用@keyframes 定义的动画）
animation-duration：持续时间
animation-timing-function：运动曲线，与过渡的运动曲线类似。
animation-delay：延迟时间
animation-iteration-count：循环次数 （infinite 是无限循环）
animation-direction ：是否反向（动画是否是由结尾倒开是倒着放的）
animation-fill-mode：设置在动画播放之外的状态（结束时的状态）none | forwards（设为结束时的状态）| backwards(设为开始时的状态)|both（设为开始或结束时的状态）
animation-play-state：设置动画状态 running 开始|paused 暂停
（2）、@keyframes 自定义动画
格式如下
@keyframes 动画名称 {
from{ 开始} 0%
to{ 结束 } 100%
}
可以用 from...to 来指定动画过程，也可以用0%~100%指定动画过程。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: aqua;
/* animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向 */
animation: move 5s linear 3;
}
@keyframes move {
0% {
transform: translate3d(0, 0, 0);
}
25% {
transform: translate3d(400px, 0, 0);
}
50% {
transform: translate3d(400px, 300px, 0);
}
75% {
transform: translate3d(0, 300px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>