使用CSS keyframes实现动画
animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode]
-
name：用于给@keyframes指定动画名称
-
duration：用于标记一个动画完成周期所需时间，非必填，默认0s
-
timing-function：用于描述一个动画数值变化方式，非必填，默认ease
-
linear:表示值变化均匀，匀速播放动画。
-
ease:默认参数。表示值变化以低速率开始，逐渐加快，直到结束前速率降低。
-
ease-in:表示值变化以低速率开始，平均速率过渡，结尾戛然而止。
-
ease-out:表示值变化以平均速率开始，以低速率缓慢结尾。
-
ease-in-out:表示值变化以低速率开始和结尾。
-
steps(int,start|end):表示将值区间按一定数量隔开，每段时间间隔中值保持不变。第一个参数为整型，第二个参数为字符串。
-
int:间隔数量，数量越小效果越明显。
-
start|end:字符串参数，start为从值区间头部开始计算，end为从值区间尾部开始计算。
-
举例：值区间[0,99]，参数steps(4,start|end)，start或end。
将0~99分为四段，分别为0~24，25~49，50~74，75~99。
首先值以匀速从0开始向99变化。当为start时，值一旦在0~24开始变化，开始于此段的头部值0，则立刻输出该段结尾值24，等待时间推动值变化进入下一段。
当为end时，值一旦在0~24开始变化，由于未触发此段的尾部值24，故一直保持输出该段的头部值0，等待时间推动值变化进入下一段。
-
-
cubic-bezier(p1x,p1y,p2x,p2y):表示值变化v-t图遵循贝塞尔曲线图形。
- 在二维直角坐标系中，首先有P0(p0x,p0y)，此时p0x=0，p0y=0，即原点，此点固定不变。其次有P3(p3x,p3y)，此时p3x=1,p3y=1，此点固定不变。
- 最后有两自由点P1(p1x,p1y)、P2(p2x,p2y)，由P0P1组成一条贝塞尔辅助线，由P2P3组成另一条贝塞尔辅助线，在这两条辅助线的作用下生成一条贝塞尔曲线，此曲线即值变化速度曲线v-t图，其中负值代表方向。
-
-
delay：用于标记一个动画完成周期所需时间，非必填，默认0s
-
iteration-count：用于描述一个动画循环次数，非必填，默认0s，不设置则不使用循环播放效果
- 整型：表示播放次数。
- infinite:字符串，表示无限循环播放。
-
direction：用于设置是否循环往复播放动画，非必填，默认normal
- normal:默认参数。动画正常播放，不进行循环往复操作。
- reverse:动画反向播放。
- alternate:动画在奇数次正向播放，在偶数次反向播放。
- alternate-reverse:动画在偶数次正向播放，在奇数次反向播放。
- initial:动画重新设置为默认值。
- inherit:动画设置为父元素属性。
-
fill-mode：用于在动画不播放时（处于延时或完成的状态）设置动画的位置，非必填，样式可以分为在animation外部的初始样式，以及在keyframes中定义的动画样式。
- none:默认参数。在动画不播放时不对动画产生任何作用。
- forwards:在动画结束时应用动画样式效果，在动画延时中应用初始样式效果。
- backwards:在动画结束时应用初始样式效果，在动画延时中应用动画样式效果。
- both:在动画结束时应用动画样式效果，在动画延时中应用动画样式效果。
- initial:动画重新设置为默认值。
- inherit:动画设置为父元素属性。
示例：
<template>
<main>
<div class="container">
<div class="box"></div>
<input type="text" v-model="duration" />
</div>
</main>
</template>
<script setup>
import { ref } from "vue";
const duration = ref(10);
</script>
<style>
.box {
width: 100px;
height: 100px;
background: linear-gradient(
45deg,
hsl(240deg, 60%, 50%),
hsl(300deg, 90%, 50%)
);
padding: 0.5em 1.4em;
border-radius: 4px;
color: white;
/* animation: rotate 10s linear infinite; */
animation: rotate v-bind(duration + "s") linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>使用CSS Transition实现动画
Transition强调过渡，即一个元素从一个状态进入另一个状态的过程；而keyframes强调动画的运动轨迹，可设置中间状态改变动画轨迹。
transform参数：
-
translate ( n px )：
**一个值：**transform:translate(100px)，表示水平方向移动的位移，等同于translateX(100px)
translateX(x):沿 X 轴位移
translateY(y):沿 Y 轴位移
translateZ(z):沿 Z 轴位移
两个值： transform:translate(100px, 200px)，第一个表示水平方向移动的位移，第二个表示垂直方向移动的位移
translate(x,y) :沿 X Y 轴位移
**三个值：**translate3d(10px,20px,10px)，表示3D三个方向移动的位移，顺序为X,Y,Z
-
rotate ( n deg )：
以角度(deg)为单位，正数是顺时针旋转，负数是逆时针旋转
rotate():2D旋转
rotateX():沿着X轴3D旋转
rotateY():沿着Y轴3D旋转
rotateZ():沿着Z轴3D旋转.要在其父级配合transform-style: preserve-3d;使用
rotate3D(x,y,z,n deg): 3D旋转，接受四个参数，x,y,z介于0-1之间，n是旋转的度数。元素围绕着xyz在空间中确定的唯一坐标点和原点之间的连线旋转指定的角度。
-
scale ( n )：
**一个值：**transform: scale(1) ，表示水平跟垂直方向同时放大1倍
**两个值：**transform: scale(1,2)，第一个参数表示水平方向的缩放比例，第二个参数表示垂直方向的缩放比例，等同于scaleX (1)和 scaleY(2)
**三个值：**scale3d(0.5,0.3,0.4)，表示3D三个方向缩放的比例，顺序为X,Y,Z轴
数值为负时为缩小
-
skew ( n deg )：
**一个值：**transform:skew(10deg)，表示水平方向的倾斜角度，等同于skewX(10deg)
skewX:表示水平方向的倾斜角度
skewY：表示垂直方向的倾斜角度
**两个值：**transform:skew(10deg,20deg)，第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度
-
transform-origin：
值得注意的是:在进行以上的变形操作时，默认都是以元素的中心为基点.
有两个参数：第一个表示距离元素左上角水平方向的距离，第二个表示距离元素左上角垂直方向的距离。
第一个参数可以设置为left、center、right，第二个参数可以设置为top、center、bottom。
transition参数：
- transition-property：定过渡或动态模拟的css属性，也就是指定究竟是哪个属性要执行动画效果。
- none：没有属性会获得过渡效果。
- all：所有属性都将获得过渡效果。
- property：定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
- transition-duration：指定完成过渡所需的时间，单位是秒或毫秒。参数同keyframes。
- transition-timing-function：指定过渡函数。参数同keyframes。
- transition-delay：开始执行动画的延迟时间，单位是秒或毫秒。参数同keyframes。
示例：
.box {
width: 100px;
height: 100px;
background: linear-gradient(
45deg,
hsl(240deg, 60%, 50%),
hsl(300deg, 90%, 50%)
);
padding: 0.5em 1.4em;
border-radius: 4px;
color: white;
transition: all 0.5s ease-in-out;
}
.box:hover {
transform: scale(1.25) skewY(-20deg) rotateY(20deg);
}