这篇文章，主要介绍CSS动画效果（2d、3d）之渐变色、过渡、变换、平移、缩放、旋转、倾斜、关键帧动画。
目录
一、2d动画
1.1、渐变色
（1）线性渐变色
（2）径向渐变色
（3）重复渐变色
1.2、过渡
1.3、平移
1.4、缩放
1.5、旋转
1.6、倾斜
二、关键帧动画
2.1、关键帧动画使用
2.2、animate动画库
三、3d动画
3.1、平移
3.2、旋转
3.3、缩放
一、2d动画
1.1、渐变色
（1）线性渐变色
线性渐变色，是指从一个方向到另一个方向发送颜色的深浅变化，语法格式：
/**
方向：默认从左到右
to left：从右到左
to right：从左到右
to top：从下到上
to bottom：从上到下
to right bottom：从左上到右下
to left top：从右下到左上
to right top：从左下到右上
to left bottom：从右上到左下
*/
background:linear-gradient(设置方向，颜色1，颜色2[可以多个]...);案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐变色</title>
<style>
body>div {
overflow: hidden;
margin-bottom: 20px;
}
div>div {
width: 100px;
height: 100px;
float: left;
margin-right: 20px;
}
.box1>div:nth-child(1) {
background:linear-gradient(to right, red, yellow, green);
}
.box1>div:nth-child(2) {
background:linear-gradient(to left, red, yellow, green);
}
.box1>div:nth-child(3) {
background:linear-gradient(to bottom, red, yellow, green);
}
.box1>div:nth-child(4) {
background:linear-gradient(to top, red, yellow, green);
}
.box2>div:nth-child(1) {
background:linear-gradient(to right bottom, red, yellow, green);
}
.box2>div:nth-child(2) {
background:linear-gradient(to left top, red, yellow, green);
}
.box2>div:nth-child(3) {
background:linear-gradient(to right top, red, yellow, green);
}
.box2>div:nth-child(4) {
background:linear-gradient(to left bottom, red, yellow, green);
}
</style>
</head>
<body>
<div class="box1">
<div>to right</div>
<div>to left</div>
<div>to bottom</div>
<div>to top</div>
</div>
<div class="box2">
<div>to right bottom</div>
<div>to left top</div>
<div>to right top</div>
<div>to left bottom</div>
</div>
</body>
</html>运行效果：
（2）径向渐变色
径向渐变是指：以某个点为圆心，依次向外发生颜色的深浅变化，语法格式：
/**
1、默认是以容器的中心位置为原点，即：50% 50%，可以设置百分比。
2、渐变形式：circle圆形、ellipse椭圆形（默认）
3、渐变尺寸：closet-side 最近边；farthest-side 最远边；closet-corner：最近角；farthest-corner：最远角
*/
background: radial-gradient(原点位置，渐变形状，渐变尺寸，开始颜色，颜色2，颜色3......结束颜色);
/**
颜色后面的百分比表示渐变的范围
*/
background: radial-gradient(开始颜色 百分比，颜色2 百分比，颜色3 百分比......结束颜色 百分比);案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐变色</title>
<style>
body>div {
overflow: hidden;
margin-bottom: 20px;
}
div>div {
width: 100px;
height: 100px;
float: left;
margin-right: 20px;
}
.box1>div:nth-child(1) {
background:radial-gradient(red, yellow, green);
}
.box1>div:nth-child(2) {
/**
0到40是红色
40到80是黄色
80到100是绿色
*/
background:radial-gradient(red 0%, yellow 40%, green 80%);
}
.box1>div:nth-child(3) {
background:radial-gradient(red 30%, green 30%);
}
.box1>div:nth-child(4) {
background:radial-gradient(red 30%, blue 30%);
}
</style>
</head>
<body>
<div class="box1">
<div>to right</div>
<div>to left</div>
<div>to bottom</div>
<div>to top</div>
</div>
</body>
</html>运行效果：
（3）重复渐变色
重复渐变色有两种，分别是：重复线性渐变色、重复径向渐变色，语法格式：
/**
重复线性渐变色
*/
background:repeating-linear-gradient();
/**
重复径向渐变色
*/
background:repeating-radial-gradient();案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐变色</title>
<style>
body>div {
overflow: hidden;
margin-bottom: 20px;
}
div>div {
width: 200px;
height: 200px;
float: left;
margin-right: 20px;
}
.box1>div:nth-child(1) {
background:repeating-linear-gradient(to right, red 0%, yellow 10%, green 20%);
}
.box1>div:nth-child(2) {
background:repeating-radial-gradient(red 0%, yellow 10%, green 20%);
}
</style>
</head>
<body>
<div class="box1">
<div>to right</div>
<div>to left</div>
</div>
</body>
</html>运行效果：
1.2、过渡
CSS3中提供了【transition】属性，可以设置属性变化时候的过渡效果，语法格式：
/**
过渡效果：transition: 属性 过渡时间 延迟时间 动画类型；
1、属性：可以指定特定的属性，例如：height、width等，使用 all 表示使用属性
2、过渡时间：单位是秒、毫秒，例如：2s、3s、5000ms
3、延迟时间：单位是秒、毫秒，例如：2s、3s、5000ms
4、动画类型：linear匀速过渡、也可以设置贝塞尔曲线过渡效果
*/
transition: all 2s 0.1s;
transition: all 2s 0.1s linear;案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡</title>
<style>
.box {
width: 200px;
height: 200px;
background: pink;
/**
过渡效果：transition: 属性 过渡时间 延迟时间 动画类型；
1、属性：可以指定特定的属性，例如：height、width等，使用 all 表示使用属性
2、过渡时间：单位是秒、毫秒，例如：2s、3s、5000ms
3、延迟时间：单位是秒、毫秒，例如：2s、3s、5000ms
4、动画类型：linear匀速过渡、也可以设置贝塞尔曲线过渡效果
*/
transition: all 2s 0.1s linear;
}
.box:hover {
width: 300px;
height: 400px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>运行效果：
1.3、平移
CSS3中可以设置元素平移效果，可以沿着X轴或者Y轴方向偏移，也可以设置两个轴同时偏移，语法格式：
transform: translateX(平移距离);
transform: translateY(平移距离);
transform: translate(X平移距离,Y平移距离);案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>平移效果</title>
<style>
body{
background: skyblue;
}
.box,.box1,.box2 {
width: 100px;
height: 100px;
background: pink;
margin-bottom: 20px;
transition: all 2s;
}
.box:hover {
transform: translateX(200px);
}
.box1:hover {
transform: translateY(50px);
}
.box2:hover {
transform: translate(150px, 100px);
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>运行效果：
1.4、缩放
CSS3提供了【scale()】方法，用于缩放元素，语法格式：
transform: scaleX(沿着X轴缩放);
transform: scaleY(沿着Y轴缩放);
transform: scale(沿着X、Y轴缩放);案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缩放效果</title>
<style>
body>div {
width: 600px;
margin: 0 auto;
}
.box,.box1,.box2 {
width: 100px;
height: 100px;
background: pink;
margin-bottom: 20px;
transition: all 2s;
}
body{
background: skyblue;
}
.box:hover {
transform: scaleX(1.2);
}
.box1:hover {
transform: scaleY(-0.5);
}
.box2:hover {
transform: scale(2);
}
</style>
</head>
<body>
<div>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>运行效果：
1.5、旋转
CSS3提供了【rotate()】方法用于设置旋转度数，语法格式：
transform: rotateX(以X轴旋转);
transform: rotateY(以Y轴旋转);
transform: rotate(以中心点进行旋转);案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转效果</title>
<style>
body>div {
width: 600px;
margin: 0 auto;
}
.box,.box1,.box2 {
width: 100px;
height: 100px;
background: pink;
margin-bottom: 20px;
transition: all 2s;
}
body{
background: skyblue;
}
.box:hover {
transform: rotateX(45deg);
}
.box1:hover {
transform: rotateY(-60deg);
}
.box2:hover {
/**
以中心点为圆心进行旋转
*/
transform: rotate(75deg);
}
</style>
</head>
<body>
<div>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>运行效果：
1.6、倾斜
CSS3提供了【skew()】方法用于设置元素的倾斜角度，语法格式：
transform: skewX(X轴的倾斜角度);
transform: skewY(Y轴的倾斜角度);
transform: skew(X轴的倾斜角度,Y轴的倾斜角度);案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倾斜效果</title>
<style>
body>div {
width: 600px;
margin: 0 auto;
}
.box,.box1,.box2 {
width: 100px;
height: 100px;
background: pink;
margin-bottom: 20px;
transition: all 2s;
}
body{
background: skyblue;
}
.box:hover {
transform: skewX(30deg);
}
.box1:hover {
transform: skewY(-15deg);
}
.box2:hover {
transform: skew(45deg, 15deg);
}
</style>
</head>
<body>
<div>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>运行效果：
二、关键帧动画
2.1、关键帧动画使用
关键帧动画，使用【animation】和【@keyframes】实现，其中【@keyframes】用于定义动画效果，【animation】用于使用定义好的动画效果，语法格式：
animation: 动画名称 动画持续时间 动画过渡类型 动画延迟时间 动画循环次数 动画是否反向运动;
/**
mymove：就是我们使用@keyframes定义的动画
2s：动画持续时间
ease-in-out：动画过渡类型
1s：动画延迟时间
1：动画循环次数，使用 infinite 表示无限次
alternate：动画是否反向运动
reverse：动画反向运动
forwards：保留最后一个显示状态
backwards：保留第一个显示状态
none：默认值
*/
animation: mymove 2s ease-in-out 1s 1 alternate;
/**
from：表示开始动画
to：表示结束动画
*/
@keyframes 动画名称 {
from {
这里写动画属性
}
to {
这里写动画属性
}
}
/**
可以使用百分比设置动画
*/
@keyframes 动画名称 {
0% {
这里写动画属性
}
20% {
这里写动画属性
}
50% {
这里写动画属性
}
100% {
这里写动画属性
}
}案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关键帧动画</title>
<style>
.box1 {
width: 100px;
height: 100px;
background: pink;
animation: mymove 2s linear infinite;
}
.box2 {
width: 100px;
height: 100px;
background: pink;
animation: myrun 10s linear 1;
}
@keyframes mymove {
from {
width: 100px;
height: 100px;
background: pink;
}
to {
width: 200px;
height: 200px;
background: skyblue;
}
}
@keyframes myrun {
0% {
width: 100px;
height: 100px;
background: pink;
}
30% {
width: 200px;
height: 100px;
background: skyblue;
}
60% {
width: 200px;
height: 200px;
background: lightcoral;
}
100% {
transform: translateX(50px);
}
}
</style>
</head>
<body>
<div class="box1"></div>
<br>
<div class="box2"></div>
</body>
</html>运行效果：
2.2、animate动画库
animate是一个CSS动画库，这个库本质上就是给我们写好了一些动画，再使用的时候，只需要引入相应的class样式即可，它的底层代码其实就是采用【animation】和【@keyframes】相关属性实现的一套动画。使用animate动画库只需要在html中引入样式文件即可。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>三、3d动画
3d动画，是以垂直屏幕的方向作为Z轴，形成一个三维坐标系X、Y、Z。在使用3d动画的时候，需要主动到声明当前是3d动画，需要使用下面这个属性：
/* 当前元素下，使用3d动画效果 */
transform-style: preserve-3d;
/* 设置景深，所谓的景深就是指：眼睛到屏幕的距离，不设置就是无限远 */
perspective: 800px;3.1、平移
3d平移主要有两个函数：【translateX()】、【translateY()】、【translateZ()】和【translate3d(x，y，z)】。
3.2、旋转
3d旋转有这几个函数：【rotateX()】、【rotateY()】、【rotateZ()】、【rotate3d(x，y，z，deg)】。rotate3d(x，y，z，deg)函数表示，x，y，z轴分别旋转对应的deg倍数。
3.3、缩放
3d缩放有两个函数：【scaleX()】、【scaleY()】、【scaleZ()】和【scale3d(x，y，z)】。scale3d()函数单独使用没有效果，必须和translate3d()或者rotate3d()函数结合使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3d动画</title>
<style>
.box {
width: 400px;
height: 400px;
border: 5px solid black;
margin: 0 auto;
display: flex;
/* 当前元素下，使用3d动画效果 */
transform-style: preserve-3d;
/* 设置景深，所谓的景深就是指：眼睛到屏幕的距离，不设置就是无限远 */
perspective: 800px;
}
.box > div {
width: 100px;
height: 100px;
background: pink;
margin: auto;
/* 设置3d效果 */
/* 设置平移：Z轴向前平移100px */
/*transform: translate3d(0, 0, 100px);*/
/* 旋转 */
transform: rotate3d(0,0,4,-30deg);
/* 设置缩放：Z轴缩放两倍 */
/*transform: scale3d(1,1,2) rotate3d(0,0,2,30deg);*/
}
</style>
</head>
<body>
<div class="box">
<div></div>
</div>
</body>
</html>到此，CSS3中的动画效果差不多就介绍这么多了。
