css动画深入剖析整理—前端
一 前言
css动画是个很神奇的玩意儿，但是属性又很容易混淆，傻傻分不清楚。前端开发已经习惯用Javascript来写动画，但是作为一个想走前端方向的学生，我觉得还是有必要掌握css动画的。
二 animation,transition,transform,translate 详细整理
2.1 animation(动画)
（1）animation定义和用法（animation属性是一个属性的简写，用于设置六个+两个动画属性。）
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-play-state
- animation-fill-mode
attention：一定要写animation-duration属性，否则动画时长为0，动画将不会播放。
（2）属性值（animation: name duration timing-function delay iteration-count direction;）
- animation-name：用来调用@keyframes定义好的动画，与@keyframes定义的动画名称一致。
- animation-duration：指定动画完成的时间，以秒或者毫秒计。
- animation-timing-function： 规定速度效果的速度曲线，是针对每一个小动画所在时间范围的变换速率。
- animation-delay：规定浏览器在开始执行动画之前的等待时间
- animation-iteration-count：定义动画播放的次数，可以选择具体的次数（1，2等）或者无数次（infinite）
- animation-direction：设置动画播放方向：normal(按时间轴顺序),reverse(时间轴反方向运行),alternate(轮流，即来回往复进行),alternate-reverse(动画先反运行再正方向运行，并持续交替运行)
- animation-play-state：设置动画的播放状态，控制播放或者停止。两个值running（持续），paused（停止）。
- animation-fill-mode：设置动画结束后，元素的样式。四个值none（回到动画没开始时的状态），forwards（动画结束后停留在结束状态），backward（动画回到第一帧的状态），both（根据animation-direction轮流应用forwards和backwards规则，注意与iteration-count不要冲突(动画执行无限次)）
（3）举个栗子，更好的理解。（设计代码，验证效果。这一步在学习过程中很重要）
- @keyframes：定义一个动画，定义的动画名称用来被animation-name调用。
- animation-name：检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@key
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
margin: 0px;
padding: 0px;
background-color: rgb(233, 234, 235);
}
.container{
text-align: center;
}/*设置div来使图片居中,看起来美观一点*/
img{
margin: 100px;
width: 200px;
height: 200px;
border-radius: 50%;
animation-name:mymove/*调用动画mymove*/
}
@keyframes mymove {
0% {width: 100px;height: 100px;}
50%{width: 200px;height: 200px;}
100%{width: 100px;height: 100px;}
}/*定义帧动画名字，作为animation-name的属性值。表示当前的mymove元素执行所定义的帧动画*/
</style>
</head>
<body>
<div class="container">
<img src="img/3.jpg" class="mymove"></img>
<!--src填写自己的图片路径-->
<!--设置动画名称mymove-->
</div>
</body>
</html>
- animation-duration：检索或设置对象动画的持续时间。
在上面的代码中无法执行动画的，因为只设置了动画名字和帧动画。你想一个动画动起来，我们只告诉它动谁（动画名字）怎么动（帧动画），还要告诉它动多久（持续时间）是吧。这是我学习这些属性和属性值的一个思考逻辑。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
margin: 0px;
padding: 0px;
background-color: rgb(233, 234, 235);
}
.container{
text-align: center;
}/*设置div来使图片居中,看起来美观一点*/
img{
margin: 100px;
width: 200px;
height: 200px;
border-radius: 50%;
animation-name:mymove;/*调用动画mymove*/
animation-duration: 2s;/*设置持续时间2s*/
}
@keyframes mymove {
0% {width: 100px;height: 100px;}
50%{width: 200px;height: 200px;}
100%{width: 100px;height: 100px;}
}/*定义帧动画名字，作为animation-name的属性值。表示当前的mymove元素执行所定义的帧动画*/
</style>
</head>
<body>
<div class="container">
<img src="img/3.jpg" class="mymove"></img>
<!--src填写自己的图片路径-->
<!--设置动画名称mymove-->
</div>
</body>
</html>
- animation-timing-function：设置过渡类型
告诉它动谁（动画名字）怎么动（帧动画），告诉它动多久（持续时间），还要告诉它动的效果（过渡类型设置），比如快进快出，慢进慢出，快进慢出，慢进快出等等。
| 值 | 功能呢 |
|---|---|
| linear | 动画从头到尾的速度是相同的。 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 |
| ease-in | 动画以低速开始。 |
| ease-out | 动画以低速结束。 |
| ease-in-out | 动画以低速开始和结束。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
margin: 0px;
padding: 0px;
background-color: rgb(233, 234, 235);
}
.container{
text-align: center;
}/*设置div来使图片居中,看起来美观一点*/
img{
margin: 100px;
width: 200px;
height: 200px;
border-radius: 50%;
animation-name:mymove;/*调用动画mymove*/
animation-duration: 2s;/*设置持续时间2s*/
animation-timing-function: ease-in-out;/*以低速开始和结束*/
}
@keyframes mymove {
0% {width: 100px;height: 100px;}
50%{width: 200px;height: 200px;}
100%{width: 100px;height: 100px;}
}/*定义帧动画名字，作为animation-name的属性值。表示当前的mymove元素执行所定义的帧动画*/
</style>
</head>
<body>
<div class="container">
<img src="img/3.jpg" class="mymove"></img>
<!--src填写自己的图片路径-->
<!--设置动画名称mymove-->
</div>
</body>
</html>
- animation-delay：设置动画的延迟时间
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
margin: 0px;
padding: 0px;
background-color: rgb(233, 234, 235);
}
.container{
text-align: center;
}/*设置div来使图片居中,看起来美观一点*/
img{
margin: 100px;
width: 200px;
height: 200px;
border-radius: 50%;
animation-name:mymove;/*调用动画mymove*/
animation-duration: 2s;/*设置持续时间2s*/
animation-timing-function: ease-in-out;/*以低速开始和结束*/
animation-delay: 2s;/*浏览器打开，延迟两秒开始执行动画*/
}
@keyframes mymove {
0% {width: 100px;height: 100px;}
50%{width: 200px;height: 200px;}
100%{width: 100px;height: 100px;}
}/*定义帧动画名字，作为animation-name的属性值。表示当前的mymove元素执行所定义的帧动画*/
</style>
</head>
<body>
<div class="container">
<img src="img/3.jpg" class="mymove"></img>
<!--src填写自己的图片路径-->
<!--设置动画名称mymove-->
</div>
</body>
</html>
- animation-iterarion-count：设置动画循环次数
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
margin: 0px;
padding: 0px;
background-color: rgb(233, 234, 235);
}
.container{
text-align: center;
}/*设置div来使图片居中,看起来美观一点*/
img{
margin: 100px;
width: 200px;
height: 200px;
border-radius: 50%;
animation-name:mymove;/*调用动画mymove*/
animation-duration: 2s;/*设置持续时间2s*/
animation-timing-function: ease-in-out;/*以低速开始和结束*/
animation-delay: 2s;/*浏览器打开，延迟两秒开始执行动画*/
animation-iteration-count: infinite;/*循环无数次*/
}
@keyframes mymove {
0% {width: 100px;height: 100px;}
50%{width: 200px;height: 200px;}
100%{width: 100px;height: 100px;}
}/*定义帧动画名字，作为animation-name的属性值。表示当前的mymove元素执行所定义的帧动画*/
</style>
</head>
<body>
<div class="container">
<img src="img/3.jpg" class="mymove"></img>
<!--src填写自己的图片路径-->
<!--设置动画名称mymove-->
</div>
</body>
</html>
- animation-direction：设置动画在循环中的方向
| 值 | 描述 |
|---|---|
| normal | 默认值。动画按正常播放。 |
| reverse | 动画反向播放。 |
| alternate | 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。 |
| alternate-reverse | 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。 |
| initial | 设置该属性为它的默认值。 |
| inherit | 从父元素继承该属性。 |
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
margin: 0px;
padding: 0px;
background-color: rgb(233, 234, 235);
}
.container{
text-align: center;
}/*设置div来使图片居中,看起来美观一点*/
img{
margin: 100px;
width: 200px;
height: 200px;
border-radius: 50%;
animation-name:mymove;/*调用动画mymove*/
animation-duration: 2s;/*设置持续时间2s*/
animation-timing-function: ease-in-out;/*以低速开始和结束*/
animation-delay: 2s;/*浏览器打开，延迟两秒开始执行动画*/
animation-iteration-count: infinite;/*循环无数次*/
animation-direction: reverse;/*反向运动*/
}
@keyframes mymove {
0% {width: 100px;height: 100px;}
50%{width: 200px;height: 200px;}
100%{width: 100px;height: 100px;}
}/*定义帧动画名字，作为animation-name的属性值。表示当前的mymove元素执行所定义的帧动画*/
</style>
</head>
<body>
<div class="container">
<img src="img/3.jpg" class="mymove"></img>
<!--src填写自己的图片路径-->
<!--设置动画名称mymove-->
</div>
</body>
</html>
- animation-play-state：这是播放/停止（需要配合js代码）
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
margin: 0px;
padding: 0px;
background-color: rgb(233, 234, 235);
}
.container{
height: 250px;
text-align: center;
}/*设置div来使图片居中,看起来美观一点*/
img{
margin: 100px;
width: 200px;
height: 200px;
border-radius: 50%;
animation-name:mymove;/*调用动画mymove*/
animation-duration: 2s;/*设置持续时间2s*/
animation-timing-function: ease-in-out;/*以低速开始和结束*/
animation-delay: 2s;/*浏览器打开，延迟两秒开始执行动画*/
animation-iteration-count: infinite;/*循环无数次*/
animation-direction: reverse;/*反向运动*/
}
@keyframes mymove {
0% {width: 100px;height: 100px;}
50%{width: 200px;height: 200px;}
100%{width: 100px;height: 100px;}
}/*定义帧动画名字，作为animation-name的属性值。表示当前的mymove元素执行所定义的帧动画*/
.content{
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<img src="img/3.jpg"></img>
<!--src填写自己的图片路径-->
<!--设置动画名称mymove-->
</div>
<div class="content">
<button onclick="pause()" >暂停</button>
<button onclick="run()" >恢复</button>
</div>
</body>
<script>
function pause(){
document.querySelector('img').style.animationPlayState="paused"
}
function run(){
document.querySelector('img').style.animationPlayState="running"
}
</script>
</html>
2.2 transform（变形）
（1）transform属性
- rotate(旋转)
- skew(扭曲)
- scale(缩放)
- translate(移动)
（2）transform语法
| 值 | 描述 |
|---|---|
| none | 定义不进行转换。 |
| translate(x,y) | 定义 2D 转换。 |
| translate3d(x,y,z) | 定义 3D 转换。 |
| translateX(x) | 定义转换，只是用 X 轴的值。 |
| translateY(y) | 定义转换，只是用 Y 轴的值。 |
| translateZ(z) | 定义 3D 转换，只是用 Z 轴的值。 |
| scale(x[,y]?) | 定义 2D 缩放转换。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 |
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 |
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
| skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
| skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 |
| skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 |
| perspective(n) | 为 3D 转换元素定义透视视图. |
（3）举个栗子，更好的理解。（设计代码，验证效果。这一步在学习过程中很重要）
ps：src图片路径是博主图片相对路径，测试的时候请换成自己图片的绝对路径/相对路径
- rotate移动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rotate</title>
<style>
body{
margin: 0px;
padding: 0px;
background-color: rgb(204, 204, 204);
}
img{
width: 200px;
height: 200px;
border-radius: 50%;
}
.item4{
margin: 130px;
text-align: center;
}
/*rotate*/
@keyframes rotate{
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
.rotate{
animation: rotate 2s infinite linear;
}
@keyframes rotateX{
0%{transform: rotateX(0deg);}
100%{transform: rotateX(360deg);}
}
.rotateX{
animation: rotateX 2s infinite linear;
}
@keyframes rotateY{
0%{transform: rotateY(0deg);}
100%{transform: rotateY(360deg);}
}
.rotateY{
animation: rotateY 2s infinite linear;
}
</style>
</head>
<body>
<div class="item4">
<img src="img/3.jpg" class="rotate">
<img src="img/3.jpg" class="rotateX">
<img src="img/3.jpg" class="rotateY">
</div>
</body>
</html>
- skew(扭曲）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>skew</title>
<style>
body{
margin: 0px;
padding: 0px;
background-color: rgb(204, 204, 204);
}
img{
width: 200px;
height: 200px;
border-radius: 50%;
}
.item2{
margin: 130px;
text-align: center;
}
/*skew*/
@keyframes skew{
0% {transform: skew(0deg,0deg);}
100% {transform: skew(20deg,20deg);}
}
.skew{
animation: skew 2s infinite linear;
}
@keyframes skewX{
0% {transform: skewX(0deg);}
100% {transform: skewX(20deg);}
}
.skewX{
animation: skewX 2s infinite linear;
}
@keyframes skewY{
0% {transform: skewY(0deg);}
100% {transform: skewY(20deg);}
}
.skewY{
animation: skewY 2s infinite linear;
}
</style>
</head>
<body>
<div class="item2">
<img src="img/3.jpg" class="skew">
<img src="img/3.jpg" class="skewX">
<img src="img/3.jpg" class="skewY">
</div>
</body>
</html>
- scale(缩放)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0px;
padding: 0px;
background-color: rgb(204, 204, 204);
}
img{
width: 200px;
height: 200px;
border-radius: 50%;
}
.item3{
margin: 130px;
text-align: center;
}
/*scale*/
@keyframes scale{
0% {transform:scale(0.1,0.1);}
100% {transform:scale(1,1);}
}
.scale{
animation:scale 2s infinite linear;
}
@keyframes scaleX{
0% {transform:scaleX(0.1);}
100% {transform:scaleX(1);}
}
.scaleX{
animation:scaleX 2s infinite linear;
}
@keyframes scaleY{
0% {transform:scaleY(0.1);}
100% {transform:scaleY(1);}
}
.scaleY{
animation:scaleY 2s infinite linear;
}
</style>
</head>
<body>
<div class="item3">
<img src="img/3.jpg" class="scale">
<img src="img/3.jpg" class="scaleX">
<img src="img/3.jpg" class="scaleY">
</div>
</body>
</html>
- translate(移动)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0px;
padding: 0px;
background-color: rgb(204, 204, 204);
}
img{
width: 200px;
height: 200px;
border-radius: 50%;
}
.item1{
margin: 130px;
text-align: center;
}
/*translate*/
@keyframes translate{
0%{transform: translate(0px,0px);}
100%{transform: translate(100px,100px);}
}
.translate{
animation: translate 2s infinite ease-in;
}
@keyframes translateX{
0%{transform: translateX(0px);}
100%{transform: translateX(100px);}
}
.translateX{
animation: translateX 2s infinite linear;
}
@keyframes translateY{
0%{transform: translateY(0px);}
100%{transform: translateY(100px);}
}
.translateY{
animation: translateY 2s infinite linear;
}
</style>
</head>
<body>
<div class="item1">
<img src="img/3.jpg" class="translate">
<img src="img/3.jpg" class="translateX">
<img src="img/3.jpg" class="translateY">
</div>
</body>
</html>
- 四个合并写在一起，translate，skew，scale，rotate
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transform:rotate translate scale skew</title>
<style>
body{
margin: 0px;
padding: 0px;
background-color: rgb(204, 204, 204);
}
img{
width: 200px;
height: 200px;
border-radius: 50%;
}
.item{
margin: 100px;
}
.item1,.item2 ,.item3, .item4{
margin: 130px;
text-align: center;
}
.translate,.translateX,.translateY,.rotate,.rotateX,.rotateY,.scale,.scaleX,.scaleY,.skew,.skewX,.skewY{
margin: 30px;
}
/*translate*/
@keyframes translate{
0%{transform: translate(0px,0px);}
100%{transform: translate(100px,100px);}
}
.translate{
animation: translate 2s infinite ease-in;
}
@keyframes translateX{
0%{transform: translateX(0px);}
100%{transform: translateX(100px);}
}
.translateX{
animation: translateX 2s infinite linear;
}
@keyframes translateY{
0%{transform: translateY(0px);}
100%{transform: translateY(100px);}
}
.translateY{
animation: translateY 2s infinite linear;
}
/*skew*/
@keyframes skew{
0% {transform: skew(0deg,0deg);}
100% {transform: skew(20deg,20deg);}
}
.skew{
animation: skew 2s infinite linear;
}
@keyframes skewX{
0% {transform: skewX(0deg);}
100% {transform: skewX(20deg);}
}
.skewX{
animation: skewX 2s infinite linear;
}
@keyframes skewY{
0% {transform: skewY(0deg);}
100% {transform: skewY(20deg);}
}
.skewY{
animation: skewY 2s infinite linear;
}
/*scale*/
@keyframes scale{
0% {transform:scale(0.1,0.1);}
100% {transform:scale(1,1);}
}
.scale{
animation:scale 2s infinite linear;
}
@keyframes scaleX{
0% {transform:scaleX(0.1);}
100% {transform:scaleX(1);}
}
.scaleX{
animation:scaleX 2s infinite linear;
}
@keyframes scaleY{
0% {transform:scaleY(0.1);}
100% {transform:scaleY(1);}
}
.scaleY{
animation:scaleY 2s infinite linear;
}
/*rrotateotate*/
@keyframes rotate{
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
.rotate{
animation: rotate 2s infinite linear;
}
@keyframes rotateX{
0%{transform: rotateX(0deg);}
100%{transform: rotateX(360deg);}
}
.rotateX{
animation: rotateX 2s infinite linear;
}
@keyframes rotateY{
0%{transform: rotateY(0deg);}
100%{transform: rotateY(360deg);}
}
.rotateY{
animation: rotateY 2s infinite linear;
}
</style>
</head>
<body>
<div class="item">
<div class="item1">
<img src="img/3.jpg" class="translate">
<img src="img/3.jpg" class="translateX">
<img src="img/3.jpg" class="translateY">
</div>
<div class="item2">
<img src="img/3.jpg" class="skew">
<img src="img/3.jpg" class="skewX">
<img src="img/3.jpg" class="skewY">
</div>
<div class="item3">
<img src="img/3.jpg" class="scale">
<img src="img/3.jpg" class="scaleX">
<img src="img/3.jpg" class="scaleY">
</div>
<div class="item4">
<img src="img/3.jpg" class="rotate">
<img src="img/3.jpg" class="rotateX">
<img src="img/3.jpg" class="rotateY">
</div>
</div>
</body>
</html>
2.3 transition（过渡）
专门做过渡动画的，比如一些放大缩小，隐藏显示等。
（1）transition语法
| 值 | 功能 |
|---|---|
| transition-duration | transition效果需要指定多少秒或毫秒才能完成 |
| transition-property | 指定CSS属性的name，transition效果 |
| transition-timing-function | 指定transition效果的转速曲线 |
| transition-delay | 定义transition效果开始的时候 |
（2）属性和属性值
- transition-duration：效果需要指定多少秒或毫秒才能完成
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0px;
padding: 0px;
background-color: rgb(204, 204, 204);
}
img{
width: 200px;
height: 200px;
border-radius: 50%;
}
div{
margin: 100px;
text-align: center;
}
img{
width: 100px;
height: 100px;
border-radius: 50%;
transition-duration: 2s;
}
img:hover{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>
<img src="img/3.jpg">
</div>
</body>
</html>
- transition-property：指定CSS属性的name，transition效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0px;
padding: 0px;
background-color: rgb(204, 204, 204);
}
img{
width: 200px;
height: 200px;
border-radius: 50%;
}
div{
margin: 100px;
text-align: center;
}
img{
width: 100px;
height: 100px;
border-radius: 50%;
transition-duration: 2s;
transition-property: width;/*只给width加动画*/
/*transition-property默认属性值为all，即给width和height都加动画。*/
}
img:hover{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>
<img src="img/3.jpg">
</div>
</body>
</html>
- transition-timing-function：指定transition效果的转速曲线。改变动画在每一帧的快慢。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0px;
padding: 0px;
background-color: rgb(204, 204, 204);
}
img{
width: 200px;
height: 200px;
border-radius: 50%;
}
div{
margin: 100px;
text-align: center;
}
img{
width: 100px;
height: 100px;
border-radius: 50%;
transition-duration: 2s;
transition-property:all;
transition-timing-function: ease-in-out;/*慢进慢出*/
}
img:hover{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>
<img src="img/3.jpg">
</div>
</body>
</html>
- transition-delay：定义transition效果开始的时候
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0px;
padding: 0px;
background-color: rgb(204, 204, 204);
}
img{
width: 200px;
height: 200px;
border-radius: 50%;
}
div{
margin: 100px;
text-align: center;
}
img{
width: 100px;
height: 100px;
border-radius: 50%;
transition-duration: 2s;
transition-property:all;
transition-timing-function: ease-in-out;/*慢进慢出*/
transition-delay:1s ;/*1s后执行动画*/
}
img:hover{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>
<img src="img/3.jpg">
</div>
</body>
</html>
三、后话
上面代码，可以复制到自己的编辑器去试一下，图片的src路径换成自己的，然后运行一下，看一下动画效果。学习一个知识需要理论结合动手，这样知识才能记得牢固。
173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
