题外话：这节课非常有意思哦~可以让元素动起来啦
文章内容输出来源：拉勾教育大前端就业集训营
1.概述
- CSS3出现之前，前端一般使用Flash动画或JavaScript制作动画。
- flash采用帧动画的形式制作动画，通过一帧一帧的画面按照固定的顺序和速度播放，比如说老式胶片电影。
老式胶卷电影的经典开头。
2.过渡属性
-
概述：在不使用Flash和js的情况下，使用过度属性可自动实现动画效果。
当前元素只要有“属性”发生变化时，即存在A和B两种状态，使用过渡属性，即可实现A和B之间的平滑过渡动画效果。 -
属性写法：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{
width: 100px;
height: 100px;
background-color: pink;
transition: width 0.2s linear 0s;
}
.box:hover{
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
说明：transition设置的意思是：“当该元素的width属性发生变化时，使变化过渡0.2s实现，使用线性的变化方式，延迟0s开始过渡。
因为transition属性没有监视height属性，所以就算height变化了，也是直接变化而没有过渡动画。
单一属性
transition-property过渡的属性
-
属性值：
- none：表示没有属性过渡；
- all：表示所有变化的属性都过渡；
- 属性名：使用具体属性名，多个属性名用逗号隔开。
transition-duration和transition-delay
- 概述：duration是过渡的时间长度，delay是在过渡前的延迟时间。
- 属性值：以s为单位的时间长度，就算是0也要加单位s。
transition-timing-function时间曲线
- 概述：动画在播放时遵循的时间曲线。
- 属性值：
| 属性值 | 描述 |
|---|---|
| linear | 规定以恒定的速度实现从开始到结束的效果 |
| ease | 规定慢速开始，然后变快，然后慢速结束的效果 |
| ease-in | 规定以慢速开始，逐渐加速的效果 |
| ease-out | 规定以快速开始，逐渐减速的效果 |
| ease-in-out | 规定以慢速开始和结束的效果 |
| cubic-bezier(x1,y1,x2,y2) | 用两个点的坐标值，计算出一条贝塞尔曲线，作为动画的时间曲线 |
说明：如图所示，贝塞尔曲线是由两个点计算得到的一条时间曲线，所以在cubic-bezier()中，只需要提供两个点，就可以指定一条你自定义的时间曲线。
兼容性：IE10、Firefox、Chrome以及Opera浏览器支持transition属性。Safari需要加前缀-webkit-。
3.2D转换
- 概述：对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和即将学习的动画知识，几乎可以完全取代Flash。
- 属性名：transform
- 属性值：根据不同的属性值，实现不同的2D转换。
注意！ transform是一个独立的属性，并不需要搭配transition才能生效。我只是为了例子更加直观所以才一起写的，不要被误导哦~
位移 translate()
- 概述：对元素进行水平&垂直方向上的移动。
- 书写语法：
| 属性值 | 说明 |
|---|---|
| translate(x,y) | x,y分别是水平和垂直方向的距离，可以为px也可以为% |
| translate(x) | 只有一个数值，表示水平方向的位移 |
<!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>
div{
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;
transition: all 0.5s linear 0s;
}
div:hover{
/* 位移属性 */
transform: translate(100px,100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
说明：利用伪类选择器hover，实现鼠标移动至盒子上方时，盒子向右向下各位移100像素。
缩放 scale()
- 概述：在元素的宽高两个维度对元素进行缩放。
- 书写语法：
| 属性值 | 说明 |
|---|---|
| scale(x,y) | x,y分别是改变宽度和高度的倍数 |
| scale(n) | 只有一个数值，表示宽高同时缩放n倍 |
| scaleX(n) | 改变元素的宽度 |
| scaleY(n) | 改变元素的高度 |
<!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>
div{
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;
transition: all 0.5s linear 0s;
}
div:hover{
/* 缩放 */
transform: scale(0.5,1.5);
}
</style>
</head>
<body>
<br>
<br>
<br>
<div></div>
</body>
</html>
说明：如图所示，缩放盒子的宽度为50%，缩放盒子的高度为150%。
旋转 rotate()
- 概述：在元素的宽高两个维度对元素进行缩放。
-
书写语法：transform: rotate(数字deg)
- 说明：deg为度数单位，正数为顺时针旋转，负数为逆时针旋转。
- 注意：元素旋转后坐标轴也会发生变化！
<!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>
div{
width: 100px;
height: 100px;
position: relative;
left: 50px;
top: 50px;
transition: all 0.5s linear 0s;
}
.box2{
background-color: pink;
}
.box2:hover{
transform: rotate(45deg) translate(100px);
}
.box1{
background-color: red;
}
.box1:hover{
transform: translate(100px) rotate(45deg) ;
}
</style>
</head>
<body>
<div class="box1"></div>
<br>
<div class="box2"></div>
</body>
</html>
说明：因为旋转后，元素的坐标轴也会跟着旋转，所以旋转后的位移会以新的坐标轴为基准进行旋转，就导致了粉色盒子的情况。而同比红色的盒子，是先位移后旋转，位移时坐标轴没有受到影响，所以符合我们的预期。
倾斜 skew()
- 概述：在元素的水平方向和垂直方向上进行2D倾斜。
- 书写语法：transform: skew(数字deg,数字deg);
- 注意：两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个数值不写默认为0。
<!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>
div{
width: 150px;
height: 100px;
background-color: pink;
transition: all 0.5s linear 0s;
position: relative;
top: 50px;
left: 50px;
}
div:hover{
transform: skew(30deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
说明：此处以“在水平方向的倾斜”为例，注意，虽然倾斜了，但是坐标轴并没有发生变化。
transform-origin属性
- 概述：调整元素的水平和垂直方向基准点的位置。
- 作用：主要用于旋转，旋转是以元素的基准点进行变换的，基准点的位置不同，旋转的效果也不同。
- 书写方式：transform-origin: 水平方向 垂直方向;
-
属性值：
- 水平方向：可以使用关键字left、center、right以及像素值和百分比。
- 垂直方向：可以使用关键字top、center、bottom以及像素值和百分比。
<!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>
div{
width: 150px;
height: 100px;
position: relative;
transition: all 0.5s linear 0s;
margin: 50px auto;
}
.box1{
background-color: pink;
transform-origin: center center;
}
.box1:hover{
transform: rotate(45deg);
}
.box2{
background-color: red;
transform-origin: left top;
margin: 0px auto;
}
.box2:hover{
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box1"></div>
<br>
<div class="box2"></div>
</body>
</html>
说明：粉色盒子的基准点是盒子的正中心，所以旋转起来是以中心为基准顺时针旋转45°；而红色盒子的基准点是左上顶点，所以旋转起来是以左上顶点为中心顺时针旋转45°，两者效果因基准点位置不同而大相径庭。
前端文章汇总目录
https://www.jianshu.com/p/6d80dd616ff4
结束语：一花一世界，一木一浮生，愿与诸君共勉
网友评论