CSS 样式的动画效果是指使用 CSS 语言来实现 HTML 元素从一种样式逐渐变化为另一种样式的效果。你可以改变任意多的样式任意多的次数，创建出各种有趣和美观的动画效果。
要使用 CSS 样式的动画效果，你需要两个步骤：
使用 animation 属性或其子属性来配置动画的时间、时长、重复次数、方向等细节。
使用 @keyframes 规则来定义动画的关键帧，即动画在不同的时间点上应该如何渲染元素的样式。
下面是一个简单的代码示例，它使用 CSS 样式的动画效果来实现一个矩形框从左上角滑动到右下角的效果：
/* 定义一个名为 slide 的动画 */
@keyframes slide {
/* 动画开始时，矩形框的左边距和上边距都是 0 */
from {
margin-left: 0;
margin-top: 0;
}
/* 动画结束时，矩形框的左边距和上边距都是 200px */
to {
margin-left: 200px;
margin-top: 200px;
}
}
/* 应用动画的元素 */
div {
width: 100px;
height: 100px;
background-color: red;
/* 指定使用 slide 动画 */
animation-name: slide;
/* 指定动画时长为 2 秒 */
animation-duration: 2s;
}你可以在这里看到这个代码的运行效果。
DNS二级域名系统分发系统