CSS中的动画用法主要是通过使用关键帧动画(@keyframes)来定义动画的不同阶段及其样式。下面是一个例子:
<!DOCTYPE html>
<html>
<head><style>/* 定义关键帧动画 */@keyframes example {0% {background-color: red;}50% {background-color: yellow;}100% {background-color: blue;}}/* 应用动画到元素 */div {width: 100px;height: 100px;background-color: red;animation-name: example;animation-duration: 4s;animation-iteration-count: infinite;}</style>
</head>
<body><div></div></body>
</html>
在上面的例子中,我们首先使用关键帧动画定义了一个名为example
的动画,其中0%表示动画的起始状态,50%表示动画的中间状态,100%表示动画的结束状态。在这个例子中,动画会从红色渐变到黄色再到蓝色。
然后,我们将这个动画应用到了一个div
元素上,通过设置animation-name
属性为example
来指定要应用的动画,animation-duration
属性来定义动画的持续时间,animation-iteration-count
属性来定义动画的循环次数(在本例中为无限循环)。
最后,当页面加载时,我们会看到一个具有动画效果的正方形盒子从红色渐变到黄色再到蓝色,并且这个动画会一直循环播放。