blog
blog copied to clipboard
xianzou
CSS3动画学习
快速入门
transition
transition 语法
| 值 | 描述 |
|---|---|
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
transition翻译成中文是过渡的意思，顾名思义，它就是专门做过渡动画的，比如一些放大缩小，隐藏显示等，下面我们一起来学习一下他的语法。
transition-duration：transition效果需要指定多少秒或毫秒才能完成
div{
width:100px;
height:100px;
border-radius: 50%;
background:#f40;
transition-duration:1s;
}
div:hover{
height:150px;
width:150px;
}
这是transition最基本的用法，transition-duration为动画执行所需的时间，这段代码的意思就是鼠标移入，div的宽高就会都变成150px
transition-property：指定CSS属性的name，transition效果
div{
width:100px;
height:100px;
border-radius: 50%;
background:#f40;
transition-duration:1s;
transition-property:width;
}
div:hover{
height:150px;
width:150px;
}
这里transition-property值仅为width，意思是只给width加动画，所以会呈现这种效果，同样如果换成了height，那么将会是变高才有动画。
我们发现，第一个案例我们并没有写transition-property，但是案例中width和height属性是同时变化的，那是因为transition-property的默认值为all，只要不写这个属性，那就是全部变化都会执行动画。
transition-timing-function：指定transition效果的转速曲线
div{
width:100px;
height:50px;
background:#f40;
transition-duration:2s;
transition-timing-function:ease-in-out;
}
div:hover{
width:250px;
}
transition-timing-function的作用就是改变动画在每一帧的快慢。这里transition-timing-function仅展示值为ease-in-out的动画效果，可以理解为慢-快-慢。其他的不做展示，可以参考下表进行理解。
| 值 | 描述 |
|---|---|
| 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 之间的数值。 |
transition-delay：定义transition效果开始的时候
div{
width:100px;
height:100px;
border-radius: 50%;
background:#f40;
transition-duration:1s;
transition-delay:1s;
}
div:hover{
height:150px;
width:150px;
}
这里transition-delay的值为1s，意思是动画将在延迟一秒后执行。
我们一共学习了四个属性值，他们都是属于transition属性的，这里给出属性值在transition中的简写方式。
transition: property duration timing-function delay;
div{
transition:all 1s ease-in-out 2s;
}
那么这里的意思就是所有属性都加入持续一秒，缓进缓出的动画，并在两秒钟后开始执行。
animation
animation 语法
| 值 | 说明 |
|---|---|
| animation-name | 指定要绑定到选择器的关键帧的名称 |
| animation-duration | 动画指定需要多少秒或毫秒完成 |
| animation-timing-function | 设置动画将如何完成一个周期 |
| animation-delay | 设置动画在启动前的延迟间隔。 |
| animation-iteration-count | 定义动画的播放次数。 |
| animation-direction | 指定是否应该轮流反向播放动画。 |
| animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 |
| animation-play-state | 指定动画是否正在运行或已暂停。 |
| initial | 设置属性为其默认值。 阅读关于 initial的介绍。 |
| inherit | 从父元素继承属性。 阅读关于 initinherital的介绍。 |
animation翻译成中文是动画的意思，熟练运用之后你可以用它来做各种各样炫酷的动画。
@keyframes：定义一个动画，定义的动画名称用来被animation-name所使用。
div{
width:50px;
height:50px;
background:#f40;
border-radius:50%;
animation:mymove 2s;
}
@keyframes mymove{
0% {width:50px;height:50px;}
50% {width:100px;height:100px;}
100% {width:50px;height:50px;}
}
@keyframes主要是做关键帧动画的，每个@keyframes后面都要跟一个名字，事例中使用了mymove作为帧动画的名字，然后可以在样式内对关键帧添加样式，然后根据关键帧 @keyframes就能自动形成流畅的动画了。
animation-name：检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义
div{
width:50px;
height:50px;
background:#f40;
border-radius:50%;
animation-name:mymove;
animation-duration:2s;
}
@keyframes mymove{
0% {width:50px;height:50px;}
50% {width:100px;height:100px;}
100% {width:50px;height:50px;}
}
在animation-name使用之前，我们已经定义了一个名为mymove的帧动画，这里把帧动画的名字作为了animation-name的值，含义是当前元素将执行所设置的帧动画。
animation-duration：检索或设置对象动画的持续时间
继续看上一个案例，仅仅有帧动画和需要执行的动画名称是不足以形成动画的，我们还需要设置一个动画执行所需要的时间，这里就用到了animation-duration属性，所以上一案例所展示的时间为两秒钟执行一次。
animation-timing-function：检索或设置对象动画的过渡类型
div{
width:100px;
height:50px;
background:#f40;
position:relative;
animation-name:mymove;
animation-duration:3s;
animation-timing-function:ease-in-out;
}
@keyframes mymove{
0% {left:0px;}
100% {left:300px;}
}
animation-timing-function的作用就是改变动画在每一帧的快慢。这里transition-timing-function仅展示值为ease-in-out的动画效果，可以理解为慢-快-慢。其他的不做展示，可以参考下表进行理解。
| 值 | 描述 | 测试 |
|---|---|---|
| linear | 动画从头到尾的速度是相同的。 | 测试 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 | 测试 |
| ease-in | 动画以低速开始。 | 测试 |
| ease-out | 动画以低速结束。 | 测试 |
| ease-in-out | 动画以低速开始和结束。 | 测试 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
animation-delay：检索或设置对象动画的延迟时间
div{
width:50px;
height:50px;
background:#f40;
border-radius:50%;
animation-name:mymove;
animation-duration:2s;
animation-delay:2s;
}
@keyframes mymove{
0% {width:50px;height:50px;}
50% {width:100px;height:100px;}
100% {width:50px;height:50px;}
}
这里animation-delay的值为2s，意思是动画将在延迟两秒秒后延迟执行。
animation-iteration-count：检索或设置对象动画的循环次数
div{
width:50px;
height:50px;
background:#f40;
border-radius:50%;
animation-name:mymove;
animation-duration:2s;
animation-iteration-count:infinite;
}
@keyframes mymove{
0% {width:50px;height:50px;}
50% {width:100px;height:100px;}
100% {width:50px;height:50px;}
}
这里animation-iteration-count的值为infinite，意思是动画将会无限次的执行，这也就达到了循环的效果，当然你还可以给它具体的数值，当执行你设置的次数后它会自动停止。
animation-direction：检索或设置对象动画在循环中是否反向运动
div{
width:100px;
height:50px;
background:#f40;
position:relative;
animation-name:mymove;
animation-duration:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
}
@keyframes mymove{
0% {left:0px;}
100% {left:300px;}
}
这里animation-direction的值为alternate，代表动画将会来回的反复执行，他还有其它属性，在下表给出供小伙伴们自己尝试。
| 值 | 描述 | 测试 |
|---|---|---|
| normal | 默认值。动画按正常播放。 | 测试 » |
| reverse | 动画反向播放。 | 测试 » |
| alternate | 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 | 测试 » |
| alternate-reverse | 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 | 测试 » |
| initial | 设置该属性为它的默认值。请参阅 initial。 | |
| inherit | 从父元素继承该属性。请参阅 inherit。 |
animation-play-state：检索或设置对象动画的状态
<style>
div{
width:50px;
height:50px;
background:#f40;
border-radius:50%;
animation-name:mymove;
animation-duration:2s;
animation-iteration-count:infinite;
}
@keyframes mymove{
0% {width:50px;height:50px;}
50% {width:100px;height:100px;}
100% {width:50px;height:50px;}
}
</style>
<body>
<button onclick="pause()">暂停</button>
<button onclick="run()">恢复</button>
<div></div>
</body>
<script>
function pause(){
document.querySelector('div').style.animationPlayState="paused"
}
function run(){
document.querySelector('div').style.animationPlayState="running"
}
</script>
animation-play-state的默认值为running，就是动画执行的意思，在实际应用中我们经常使用js来操作这个属性，从而控制动画的播放和暂停。
我们一共学习了八个属性值，他们都是属于animation属性的，这里给出属性值在animation中的简写方式。
animation: name duration timing-function delay iteration-count direction play-state;
div{
animation:mymove 2s ease-in-out 3s infinite alternate running;
}
那么这里的意思就是mymove动画将在三秒钟后开始，以两秒一个循环慢-快-慢方式，进行动画的展示，并且每次动画过后都会向相反方向执行动画。
我们只是学会了过渡和动画，我们现在还不能对图形进行一系列的不规则操作，而transform（变形）就是来操作改变成特殊图形的；
transform
1024动画案例
你可以深入 SVG 复杂的细节，但这对我们即将创建的图标不是必须的。以下列表涵盖了我们将用到的构建块。
这就是我们最终要实现的效果，还是比较简单的，拿来当做一个入门动画的小案例再好不过了。
搭建静态页
<style>
.outBox ul{
display: flex;
}
.outBox li{
list-style: none;
margin: 20px;
font-size: 120px;
position: relative;
top: 0px;
color:#fff;
}
</style>
<body>
<div class="outBox">
<ul>
<li>1</li>
<li>0</li>
<li>2</li>
<li>4</li>
</ul>
</div>
</body>
写完之后你就会在屏幕上得到1024四个大字，因为我们要做凭空出现的跳跃效果，所以我们把它的颜色设置为了白色。
制作简单动画
.outBox li:nth-child(1){
animation: myMove 1.5s ease alternate infinite ;
}
.outBox li:nth-child(2){
animation: myMove 1.5s ease 0.5s alternate infinite ;
}
.outBox li:nth-child(3){
animation: myMove 1.5s ease 1s alternate infinite ;
}
.outBox li:nth-child(4){
animation: myMove 1.5s ease 1.5s alternate infinite ;
}
@keyframes myMove{
0%{
color: rgb(229, 255, 80);
top: 160px;
}
50%{
color:rgb(2, 150, 200);
top: 0px;
}
100%{
color: rgb(255, 106, 198);
top: 160px;
}
}
加入这些代码，就会使每个数字都产生上下的动画了，然后每个数字依次跳出来展示，并在其中变换颜色。由于都是上一个文章的内容，在这里我就不再赘述了。
最终效果
@keyframes myMove{
0%{
color: rgb(229, 255, 80);
top: 160px;
transform: rotateY(0deg) scale(1.0);
}
50%{
color:rgb(2, 150, 200);
top: 0px;
transform: rotateY(180deg) scale(1.5);
}
100%{
color: rgb(255, 106, 198);
top: 160px;
transform: rotateY(0deg) scale(1.0);
}
}
然后再在每个状态里加入
transform: rotateY(xxdeg) scale(1.0);就可以实现文章开始的图片效果了。
这里我们接触到了transform属性，也就是变形属性，其中rotateY(0deg)的意思是以Y轴为对称轴进行旋转，括号中间的内容是旋转角度。中scale(1.0)是操作放大缩小用的，括号中的内容负责大小。放到案例中的意思就是开始默认大小、默认角度，运行到中间文字左右对称翻转并且变大，再到运行结束改变成初始阶段。
translate（移动）以及transform（变形）其实并不是制作动画的，只是变形和移动在动画中经常会使用到;
transform 语法
| 值 | 描述 |
|---|---|
| none | 定义不进行转换。 |
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| 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 转换元素定义透视视图。 |
transform字面上就是变形，改变的意思。看起来他有很多属性，其实我们把常用的总结起来就是下面四个属性。 rotate(旋转) skew(扭曲) scale(缩放) translate(移动)
rotate 旋转
<style>
img{
margin-left: 50px;
width:50px;
height:50px;
border-radius:50%;
}
@keyframes rotate{
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
@keyframes rotateX{
0% {transform:rotateX(0deg);}
100% {transform:rotateX(360deg);}
}
@keyframes rotateY{
0% {transform:rotateY(0deg);}
100% {transform:rotateY(360deg);}
}
.rotate{
animation:rotate 2s infinite linear;
}
.rotateX{
animation:rotateX 2s infinite linear;
}
.rotateY{
animation:rotateY 2s infinite linear;
}
</style>
<body>
<img src="./y.png" alt="" class="rotate">
<img src="./y.png" alt="" class="rotateX">
<img src="./y.png" alt="" class="rotateY">
</body>
这里一共有三个属性的展示rotate，rotateX，rotateY。分别代表在平面上根据指定角度进行旋转、沿着X轴进行指定角度的旋转、沿着Y轴进行制定角度的旋转。
translate 移动
<style>
img{
margin-left: 50px;
width:50px;
height:50px;
border-radius:50%;
}
@keyframes translate{
0% {transform:translate(0px,0px);}
100% {transform:translate(100px,100px);}
}
@keyframes translateX{
0% {transform:translateX(0px);}
100% {transform:translateX(100px);}
}
@keyframes translateY{
0% {transform:translateY(0px);}
100% {transform:translateY(100px);}
}
.translate{
animation:translate 2s infinite linear;
}
.translateX{
animation:translateX 2s infinite linear;
}
.translateY{
animation:translateY 2s infinite linear;
}
</style>
<body>
<img src="./y.png" alt="" class="translate">
<img src="./y.png" alt="" class="translateX">
<img src="./y.png" alt="" class="translateY">
</body>
这里一共有三个属性的展示translate(x,y)，translateX(x)，translateY(Y)。分别代表水平方向和垂直方向同时移动、仅水平方向移动、仅垂直方向移动。
scale 缩放
<style>
img{
margin-left: 50px;
width:50px;
height:50px;
border-radius:50%;
}
@keyframes scale{
0% {transform:scale(0.1,0.1);}
100% {transform:scale(1,1);}
}
@keyframes scaleX{
0% {transform:scaleX(0.1);}
100% {transform:scaleX(1);}
}
@keyframes scaleY{
0% {transform:scaleY(0.1);}
100% {transform:scaleY(1);}
}
.scale{
animation:scale 2s infinite linear;
}
.scaleX{
animation:scaleX 2s infinite linear;
}
.scaleY{
animation:scaleY 2s infinite linear;
}
</style>
<body>
<img src="./y.png" alt="" class="scale">
<img src="./y.png" alt="" class="scaleX">
<img src="./y.png" alt="" class="scaleY">
</body>
这里一共有三个属性的展示scale(x,y)，scaleX(x)，scaleY(Y)。分别代表水平方向和垂直方向同时缩放、仅水平方向缩放、仅垂直方向缩放。但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。
skew 扭曲
<style>
img{
margin-left: 50px;
width:50px;
height:50px;
/* border-radius:50%; */
}
@keyframes skew{
0% {transform:skew(0deg,0deg);}
100% {transform:skew(25deg,25deg);}
}
@keyframes skewX{
0% {transform:skewX(0deg);}
100% {transform:skewX(25deg);}
}
@keyframes skewY{
0% {transform:skewY(0deg);}
100% {transform:skewY(25deg);}
}
.skew{
animation:skew 2s infinite linear;
}
.skewX{
animation:skewX 2s infinite linear;
}
.skewY{
animation:skewY 2s infinite linear;
}
</style>
<body>
<img src="./y.png" alt="" class="skew">
<img src="./y.png" alt="" class="skewX">
<img src="./y.png" alt="" class="skewY">
</body>
这里一共有三个属性的展示skew(x,y)，skew(x)，skewY(Y)。分别代表水平方向和垂直方向同时扭曲、仅水平方向扭曲、仅垂直方向扭曲。
我们学习了transform的常见属性，你会发现他们其实非常简单，你只需要记住rotate(旋转)、skew(扭曲)、scale(缩放)、translate(移动)就可以了，所代表的的含义就是会像X和Y轴同时变形，而加上X或者Y就代表会向着该方向进行变形。
CSS3 的动画内容的所有内容就学完了，剩下的就需要多加练习，在你真正练习过之后，你将会真正掌握它；
