animation语法
| 值 | 描述 |
|---|---|
| @keyframes | 定义一个动画，@keyframes定义动画名称用来被animation-name所使用 |
| animation-name | 检索和设置对象对应的动画名称，必须与规则@keyframes配合使用，因为动画名称有@keyframse定义 |
| animation-duration | 检索或设置对象动画的持续是时间 |
| animation-timing-function | 检索或设置对象动画的过渡类型 |
| animation-delay | 检索或设置对象动画的延迟时间 |
| animation-iteration-count | 检索或设置对象动画的循环次数 |
| animation-direction | 检索或设置对象动画在循环中是否反向活动 |
| animation-play-state | 检索或设置对象动画的状态 |
@keframes 和 animation-name
定义一个动画，定义的动画名称被animation-name使用
.animation1 {
border-radius: 50%;;
background-color: pink;
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; }
}
@keyframes主要是来做关键帧动画的，每个@keyframes后面都跟一个名字，示例中使用mymove作为帧动画的名字，然后可以在样式内对关键帧添加样式，然后根据关键帧@keyframes就能自动形成流畅的动画了。
在animation-name 使用之前，我们已经定义了一个名为mymove的帧动画，这里把帧动画的名字作为了animation-name的值.
animation-duration
仅仅有帧动画需要执行的动画名称是不足以形成动画的，我们还需要设置一个动画执行所需要的时间，这里用到了animation-duration属性，所以上面案例所展示的时间为两秒钟执行一次。
animation-timing-function
检索或设置对象动画的过渡类型
// 来回移动的 长方形
.animation2 {
position: relative;
background-color: rgb(122, 126, 126);
width: 200px;
height: 100px;
animation-name: animation2;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@keyframes animation2 {
0% { left: 0 }
50% { left: 250px; }
100% { left: 0; }
}
animation-timg-function的作用是改变动画在每一帧的快慢。
| 值 | 描述 |
|---|---|
| linear | 匀速变化 |
| ease | 默认，低速开始，然后加快，在结束前变慢 |
| ease-in | 从低速开始 |
| ease-out | 低速结束 |
| ease-in-out | 低速开始和结束 |
| cubic-bezier(n, n, n, n) | 定义自己的值，0到1的值 |
animation-delay
检索或设置对象的延迟时间。
animation-delay: 2s;
表示动画将在2s后执行。
animation-iteration-count
检索或设置对象动画的循环次数
animation-iteration-count: infinite;
动画无限循环执行
animation-direction
检索或设置对象动画在循环中是否反向运动
| 值 | 描述 |
|---|---|
| normal | 默认值，动画按正常播放 |
| reverse | 动画反向播放 |
| alernate | 动画在播放次（1，3，5……）正向播放，在偶数次（2，4，6）反向播放 |
| alernate-reverse | 动画在播放次（1，3，5……）反向播放，在偶数次（2，4，6）正向播放 |
| initial | 设置该属性为它的默认值 |
| inherit | 从父元素继承该属性 |
animation-play-state
检索或设置对象动画的动态
| 值 | 描述 |
|---|---|
| running | 默认值，动画执行 |
| paused | 停止动画，可以使用js来操作这个属性，从而控制动画的播放和暂停 |
transition
transition: property duration timing-function delay;
transiton语法
| 属性 | 描述 |
|---|---|
| transition-duration | transition效果需要制定多长时间才能完成 |
| transition-property | 指定CSS属性的name，transition效果 |
| transition-timing-function | 指定transition效果的转换曲线 |
| transition-delay | 定义transition效果延迟执行时间 |
.transition1 {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
transition-duration: 2s;
}
.transition1:hover {
width: 200px;
height: 200px;
}
transition-property
指定css属性的name，transition的效果。
transition-property: width;
表示只在width上使用动画，如果没有加的话，就是所有的变化，都有动画效果
width和height其中一个变化值是auto的时候，transition设置的动画会失效
transition-timing-function
指定transition效果的转速曲线
| 值 | 描述 | 速度 |
|---|---|---|
| linear | 默认属性，匀速，等同于cubic-bezier(0, 0, 1, 1） | 匀速 |
| ease | 规定慢速开始，然后变快，最后慢速结束的国度效果，等同于cubic-beizier(0.25, 0.1,0.25,1) | 快-慢-慢 |
| ease-in | 以慢速开始的过渡效果，等同于cubic-beizier(0.42, 0, 1, 1) | 快-开 |
| ease-out | 以慢速结束的过渡效果，等同于cubic-beizier(0, 0, 0.58, 1) | 慢-慢 |
| ease-in-out | 规定以慢速开始和结束的过度效果，等同于cubic-bezier(0.42, 0, 0.58, 1) | 慢-快-慢 |
| cubic-bezier | 在cubic-bezier函数中定义自己的值，0～1 | 自定义 |
值大体上是animation-timg-functiony一致的
transtion-delay
定义transition延迟开始的时间
transform
就它自身来说，是无法实现动画效果，结合 animation 或者 transition可以实现比较炫酷的动画。
transform语法
| 值 | 描述 |
|---|---|
| none | 定义不进行转换 |
| translate(x, y) | 2D转换 |
| translate3D(x, y, z) | 定义3D转换 |
| translateX(x) | 只是X轴的值 |
| translateY(y) | 只是用Y值的值 |
| translateZ(z) | 只是用Z轴的值 |
| scale(x[,y]?) | 2D缩放 |
| scale3d(x, y, z) | 3D缩放 |
| scaleX(x) | 通过设置x轴来定义缩放转换 |
| scaleY(y) | 通过设置y轴来定义缩放转换 |
| scaleZ(z) | 通过设置z轴来定义缩放转换 |
| rotate(angle) | 定义2D旋转，在参数重规定角度 |
| rotate3d(x, y, z, angle) | 定义3D旋转 |
| rotateX(x) | 沿着x轴进行3D旋转 |
| rotateY(y) | 沿着y轴进行3D旋转 |
| rotateZ(z) | 沿着z轴进行3D旋转 |
| skew(x-angle, y-angle) | 定义沿着X和Y轴的2D倾斜旋转 |
| shewX(angle) | 定义沿着X轴的2D倾斜旋转 |
| skewY(angle) | 定义沿着Y轴2D倾斜转换 |
| perspeactive(n) | 为3D转换元素定义透视视图 |
rotate旋转
<style>
.rotate {
display: inline-block;
width: 150px;
height: 150px;
background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190801%2Faa1de5fd9e9043c1b947d9a1e886e147.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1649456386&t=da4595ace0b7cbe04d70526195624121);
background-size: contain;
margin-left: 50px;
border-radius: 50%;
}
.rotatexyz {
animation: rotatexyz 2s infinite linear;
}
@keyframes rotatexyz {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.rotatex {
animation: rotateX 2s infinite linear;
}
@keyframes rotateX {
0% { transform: rotateX(0deg); }
100% { transform: rotateX(360deg); }
}
.rotatey {
animation: rotateY 2s infinite linear;
}
@keyframes rotateY {
0% {transform: rotateY(0deg);}
100% {transform: rotateY(360deg);}
}
.rotatez {
animation: rotateZ 2s infinite linear;
}
@keyframes rotateZ {
0% { transform: rotateZ(0deg); }
100% { transform: rotateZ(360deg); }
}
</style>
<body>
<div class="rotate rotatexyz"></div>
<div class="rotate rotatex"></div>
<div class="rotate rotatey"></div>
<div class="rotate rotatez"></div>
</body>
translate 移动
<style>
.translate {
display: inline-block;
width: 150px;
height: 150px;
margin-right: 20px;
background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201602%2F08%2F20160208144821_FdAvZ.jpeg&refer=http%3A%2F%2Fimg3.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1649457509&t=68a818cd5b608a9a0977fccf398069f4);
background-size: cover;
border-radius: 50%;
}
.translatexy {
animation: translatexy 2s infinite linear;
}
@keyframes translatexy {
0% { transform: translate(0px, 0px); }
100% { transform: translate(500px, 500px); }
}
.translatex {
animation: translatex 2s infinite linear;
}
@keyframes translatex {
0% { transform: translateX(0px); }
100% { transform: translateX(200px); }
}
.translatey {
animation: translatey 2s infinite linear;
}
@keyframes translatey {
0% { transform: translateY(0px); }
100% { transform: translateY(200px); }
}
.translatez {
animation: translatez 2s infinite linear;
}
@keyframes translatez {
0% { transform: translateZ(0px); }
100% { transform: translateZ(200px); }
}
</style>
