要创建自定义动画，可以使用CSS的@keyframes规则。@keyframes规则允许您定义动画序列中的关键帧，并在动画执行时指定它们之间的过渡效果。以下是一个示例，说明如何使用@keyframes创建一个简单的自定义动画：
/* 定义动画序列 */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* 将动画应用于元素 */
div {
animation-name: example;
animation-duration: 2s;
}在上面的示例中，我们使用@keyframes规则定义了一个名为“example”的动画序列。该序列从“from”状态（即红色背景）逐渐过渡到“to”状态（即黄色背景）。然后，我们将该动画应用于“div”元素，并指定动画的持续时间为2秒。
其他可用的关键词包括“%”，用于指定动画序列中的任意百分比位置。例如：
/* 定义动画序列 */
@keyframes example {
0% {transform: scale(1);}
50% {transform: scale(1.5);}
100% {transform: scale(1);}
}
/* 将动画应用于元素 */
div {
animation-name: example;
animation-duration: 2s;
}在上面的示例中，我们使用“%”关键词指定了动画序列中的三个位置，分别是0%、50%和100%。每个位置都定义了一个不同的“transform”属性，用于在动画执行期间逐渐变化元素的缩放比例。