CSS可以通过@keyframes规则来自定义动画效果，@keyframes规则定义了一个动画序列，可以指定动画名称、动画持续时间、关键帧以及动画效果。 以下是一个例子，在HTML中创建一个元素，设置其class为"my-animation"：
<div class="my-animation"></div>
然后在CSS中定义效果
@keyframes myAnim {
0% {
background-color: blue;
transform: translateX(0) scale(1);
}
50% {
background-color: green;
transform: translateX(200px) scale(1.5);
}
100% {
background-color: red;
transform: translateX(500px) scale(2);
}
}
.my-animation {
animation-name: myAnim;
animation-duration: 3s;
animation-iteration-count: infinite;
}
上面代码中，myAnim是动画的名称，使用**@keyframes定义了一个动画序列，包括三个关键帧**（0%, 50%, 100%）。在0%时，元素的背景颜色为蓝色，transform的translateX属性为0，scale为1；在50%时，元素的背景颜色为绿色，translateX属性为200px，scale为1.5；在100%时，元素的背景颜色为红色，translateX属性为500px，scale为2。".my-animation"的animation-name属性设置为myAnim，指定元素将会使用myAnim动画，animation-duration属性设置为3s，表示动画持续3秒，animation-iteration-count属性设置为infinite，表示动画会不断重复。 通过这种方式，可以轻松自定义各种CSS动画效果，增加网页的动态感。
@keyframes和animation做出的动画和transition做出的动画有什么区别
@keyframes和animation是用来创建复杂的、多步骤的动画的CSS属性，而transition只是单独指示一个 CSS 属性从一种样式平滑地过渡到另一种样式。 具体来说，使用@keyframes和animation创建动画时，你需要在CSS中设置多个关键帧，以描述动画的不同步骤。通过animation属性，你可以指定动画的持续时间、延迟等设置。animation可以用于为单个或多个属性设置动画。 而transition只需要指定开始状态和结束状态，然后告诉浏览器如何平滑转换两个状态之间的属性值。它只需要一个CSS属性来激活动画过渡效果，并且对于单个属性的动画过渡非常有用。 因此，当你需要创建复杂的动画并控制多个属性时，@keyframes和animation比transition更适合。而当你只需要过渡一两个简单属性时，transition会更方便和易于使用。
那@keyframes和animation与Vue里的trasition标签有什么区别 @keyframes和animation是CSS属性，用于创建复杂的动画效果的，而Vue的transition标签是用于在Vue的模板中为元素设置进入/退出过渡效果的。 具体来说，当你在Vue的模板中使用transition标签时，你可以给元素添加“进入过渡”和“离开过渡”，Vue会自动在这两个阶段应用相应的CSS类（如“v-enter”、“v-leave-to”等），从而控制动画效果的过渡和过程。你也可以通过配置不同的属性来控制过渡效果的时间和速度等。 相比之下，@keyframes和animation是纯粹的CSS属性，不会自动与Vue的模板进行集成或优化。尽管仍然可以将这些CSS属性用于Vue的元素上，但需要手动编写JavaScript代码来控制CSS类的添加和删除，以实现动画的过渡效果。这在某些情况下可能会更灵活，但它也需要更多的代码和工作量，特别是在处理更复杂的动画时。 因此，@keyframes和animation和Vue的transition标签之间存在本质的区别，它们都有自己的优点和缺点，根据你的具体需求去选择更合适的方法。
