css-animations_basics

CSS 动画基础

CSS 动画是让网页元素动起来的关键技术之一。它可以通过简单的代码让页面变得更加生动有趣。下面是一些关于 CSS 动画的基础知识。

CSS 动画类型

• 关键帧动画 (Keyframe Animation): 通过定义一系列关键帧来描述动画的变化过程。
• 过渡动画 (Transition Animation): 用于描述元素状态变化时的动画效果。

动画属性

• animation: 控制动画的名称、时长、延迟、次数等。
• animation-name: 指定要应用的关键帧动画名称。
• animation-duration: 设置动画完成一个周期所需的时间。
• animation-delay: 设置动画开始前的延迟时间。
• animation-iteration-count: 设置动画播放的次数。

示例

假设我们要实现一个简单的元素在屏幕上水平移动的动画效果：

@keyframes move {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s linear infinite;
}

在这个例子中，.box 元素会从屏幕左侧移动到右侧，动画时长为 2 秒，并且会无限重复。

扩展阅读

想要了解更多关于 CSS 动画的细节，可以访问本站提供的 CSS 动画进阶教程。