目录
一．２Ｄ转换
１.ｔｒａｎｓｌａｔｅ（）平移操作
２.ｒｏｔａｔｅ（） 旋转操作
３.ｓｃａｌｅ（） 放大缩小操作
３.１.ｓｃａｌｅＸ（）
３.２.ｓｃａｌｅＹ（）
４.ｓｋｅｗ（） 倾斜操作
二．３Ｄ变换
１.ｒｏｔａｔｅＸ（）
２.ｒｏｔａｔｅＹ（）
３.ｒｏｔａｔｅＺ（）
三．ＣＳＳ过渡
１.ｔｒａｎｓｉｔｉｏｎ 属性
２.ｔｒａｎｓｉｔｉｏｎ－ｄｅｌａｙ 属性
３.ｔｒａｎｓｉｔｉｏｎ－ｔｉｍｉｎｇ－ｆｕｎｃｔｉｏｎ 属性
４.ｔｒａｎｓｉｔｉｏｎ－ ｐｒｏｐｅｒｔｙ 属性和ｔｒａｎｓｉｔｉｏｎ－ｄｕｒａｔｉｏｎ属性
四．ＣＳＳ动画
一．２Ｄ转换
ＣＳＳ中的２Ｄ转换顾名思义就是在平面内对元素或标签进行二维变换，通过ｔｒａｎｆｏｒｍ属性可以对元素进行平移，旋转，放大缩小和倾斜等操作，如下是这几种变换的方法：
- ｔｒａｎｓｌａｔｅ
- ｒｏｔｕｔｅ
- ｓｃａｌｅ
- ｓｋｅｗ
１.ｔｒａｎｓｌａｔｅ（）平移操作
ｔｒａｎｓｌａｔｅ方法有两个参数，对应Ｘ轴Ｙ轴，也就是该元素要移动到位置
例如：将一个ｄｉｖ标签沿ｘ移动５０ｐｘ，沿ｙ移动１００ｐｘ
．ｄｉｖ｛
ｗｉｄｔｈ：３０ｐｘ；
ｈｅｉｇｈｔ：５０ｐｘ；
ｔｒａｎｓｆｏｒｍ：ｔｒａｎｓｌａｔｅ（５０ｐｘ，１００ｐｘ）
｝２.ｒｏｔａｔｅ（） 旋转操作
给ｒｏｔａｔｅ（）方法传入一个角度时可以实现旋转操作，旋转的方向取决于传入角度的正负，正角度顺时针旋转，负角度逆时针旋转
例如：将一个ｄｉｖ标签顺时针旋转２０度
div{
width: 60px;
height:80px;
background-color: chartreuse;
border-radius:20%;
transform: rotate(20deg);
}３.ｓｃａｌｅ（） 放大缩小操作
ｓｃａｌｅ（）方法传入两个数值分别表示宽度和高度变换的倍数，数值对于１表示放大，小数表示缩小，当然，负数是没有意义的
例如：将一个ｄｉｖ标签宽放大２倍，高放大３倍
div{
width: 60px;
height:80px;
background-color: chartreuse;
position: fixed;
border-radius:20%;
transform: scale(2,3) translate(50px,100px);
}３.１.ｓｃａｌｅＸ（）
ｓｃａｌｅＸ（）方法和ｃｓａｌｅ（）方法一样，但ｓｃａｌｅＸ（）只对元素宽度进行改变
３.２.ｓｃａｌｅＹ（）
不用说，都懂
４.ｓｋｅｗ（） 倾斜操作
ｓｋｅｗ（）方法传入两个角度参数，实现沿Ｘ，Ｙ轴对元素的倾斜，注意倾斜和旋转不一样
例如：沿Ｘ轴倾斜ｄｉｖ标签２０度，Ｙ轴３０度
div{
width: 60px;
height:80px;
background-color: chartreuse;
position: fixed;
border-radius:20%;
transform: skew(20deg,30deg) translate(50px,100px);
}注意ｓｋｅｗＸ（）方法和ｓｋｅｗＹ（）方法分别是沿Ｘ，Ｙ轴倾斜
二．３Ｄ变换
３Ｄ变换只涉及到三维的旋转，３Ｄ变换的ｔｒａｎｓｆｏｒｍ属性有如下几个方法：
- ｒｏｔａｔｅＸ
- ｒｏｔａｔｅＹ
- ｒｏｔａｔｅＺ
１.ｒｏｔａｔｅＸ（）
ｒｏｔａｔｅＸ（）方法沿ｘ轴旋转指定角度
例如：
#myDiv {
transform: rotateX(150deg);
}
２.ｒｏｔａｔｅＹ（）
ｒｏｔａｔｅＸ（）方法沿ｘ轴旋转指定角度
例如：
#myDiv {
transform: rotateY(150deg);
}
３.ｒｏｔａｔｅＺ（）
ｒｏｔａｔｅＸ（）方法沿ｘ轴旋转指定角度
例如：
#myDiv {
transform: rotateＺ(150deg);
}
三．ＣＳＳ过渡
ＣＳＳ过渡指可以在一定时间内改变元素的属性，所有，一个过渡操作要包含过渡的元素和过渡的时间，如下是过渡的几个属性：
transitiontransition-delaytransition-durationtransition-propertytransition-timing-function
１.ｔｒａｎｓｉｔｉｏｎ 属性
ｔｒａｎｓｉｔｉｏｎ属性给定过渡的元素和时间，即可在给定时间内执行过渡操作，注意的是，ｔｒａｎｓｉｔｉｏｎ属性只通过过渡的条件，过渡的操作自行定义
例如：但鼠标悬停时改变ｄｉｖ标签的宽度
div{
width: 90px;
height: 100px;
background-color: #3425;
border-radius:20%;
transition:width 2s;
}
div:hover{
width: 150px;
}２.ｔｒａｎｓｉｔｉｏｎ－ｄｅｌａｙ 属性
ｔｒａｎｓｉｔｉｏｎ－ｄｅｌａｙ属性规定了过渡效果的延迟时间，说通俗一点就是该属性规定了要等待几秒后在发生过渡的效果（以秒为单位）
例如：等待１秒后再实现鼠标悬停时改变ｄｉｖ的宽度
div{
width: 90px;
height: 100px;
background-color: #3425;
border-radius:20%;
transition:width 2s;
transition-delay: 1s;
}
div:hover{
width: 150px;
}３.ｔｒａｎｓｉｔｉｏｎ－ｔｉｍｉｎｇ－ｆｕｎｃｔｉｏｎ 属性
transition-timing-function 属性规定过渡效果的速度曲线。
transition-timing-function 属性可接受以下值：
-
ease- 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认） -
linear- 规定从开始到结束具有相同速度的过渡效果 -
ease-in-规定缓慢开始的过渡效果 -
ease-out- 规定缓慢结束的过渡效果 -
ease-in-out- 规定开始和结束较慢的过渡效果 -
cubic-bezier(n,n,n,n)- 允许您在三次贝塞尔函数中定义自己的值
４.ｔｒａｎｓｉｔｉｏｎ－ ｐｒｏｐｅｒｔｙ 属性和ｔｒａｎｓｉｔｉｏｎ－ｄｕｒａｔｉｏｎ属性
ｔｒａｎｓｉｔｉｏｎ－ｐｒｏｐｅｒｔｙ属性指定元素过渡的属性，相当于ｔｒａｎｓｉｔｉｏｎ属性的第一个参数，而ｔｒａｎｓｉｔｉｏｎ－ｄｕｒａｔｉｏｎ属性规定过渡的时间，类似于第二个参数
例如：上个例子可以写成这样
div{
width: 90px;
height: 100px;
background-color: #3425;
border-radius:20%;
transition-duration:2s;
transition-property: width;
transition-delay: 1s;
}
div:hover{
width: 150px;
}四．ＣＳＳ动画
ＣＳＳ通过改变ＨＴＭＬ元素来实现动画效果
首先谈到CSS动画，我们先要知道@keyframes,它规定了一个html标签可以在一段时间里改变从而实现动画效果，
然后是animaton-duration,规定了动画的时间，如果没有设置animation-durantion属性动画是没法子实现，因为该属性默认值为0，我们可以以from和to为时间规定动画变化的时间，或者是以0%~100%为时间线来表示
animation-delay，设置动画的延迟效果，如果是负值，表示动画提前开始
animation-retrion-count，设置动画播放的次数，如果次数为infinite表示动画一直播放
animation-direction 属性指定是向前播放、向后播放还是交替播放动画。
animation-direction 属性可接受以下值：
-
normal- 动画正常播放（向前）。默认值 -
reverse- 动画以反方向播放（向后） -
alternate- 动画先向前播放，然后向后 -
alternate-reverse- 动画先向后播放，然后向前
animation-timing-function 属性规定动画的速度曲线。
animation-timing-function 属性可接受以下值：
-
ease- 指定从慢速开始，然后加快，然后缓慢结束的动画（默认） -
linear- 规定从开始到结束的速度相同的动画 -
ease-in- 规定慢速开始的动画 -
ease-out- 规定慢速结束的动画 -
ease-in-out- 指定开始和结束较慢的动画 -
cubic-bezier(n,n,n,n)- 运行您在三次贝塞尔函数中定义自己的值
animation-fill-mode 属性规定目标元素的样式，就是动画结束了，图案的位置
animation-fill-mode 属性可接受以下值：文章来源：https://www.toymoban.com/news/detail-734007.html
-
none- 默认值。动画在执行之前或之后不会对元素应用任何样式。 -
forwards- 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。 -
backwards- 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。 -
both- 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。
例如：一个简单的颜色变换动画文章来源地址https://www.toymoban.com/news/detail-734007.html
@keyframes example{
from{top:0px;background-color: chartreuse;}
to{top: 200px;background-color: aqua;}
}
div{
background-color: chartreuse;
width: 80px;
height: 70px;
position: relative;
border-radius: 50px;
animation-name: example;
animation-duration: 2s;
animation-delay:1s;
animation-iteration-count: 2;
animation-fill-mode: backwards;
}到了这里，关于CSS教程--动画的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
