CSS动画是一种强大的技术,可以让网页元素在视觉上更加生动和有趣。以下是一些关于CSS动画的基础知识和示例。

基础概念

CSS动画通过改变元素的样式来创建动画效果。这可以通过使用@keyframes规则来实现。

示例

假设我们想要创建一个简单的淡入淡出效果,可以使用以下代码:

@keyframes fadeInOut {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.element {
  animation: fadeInOut 2s infinite;
}

扩展阅读

想要了解更多关于CSS动画的知识,可以阅读本站的CSS动画教程

图片示例

CSS动画示例