CSS3 动画提供了丰富的功能，可以让网页元素更加生动和吸引人。以下是一些常用的 CSS3 动画技术：

基本概念

  • CSS3 动画类型：包括关键帧动画（keyframes）和过渡效果（transitions）。
  • 关键帧动画：通过定义关键帧来控制动画的起始和结束状态，以及动画过程中元素的变化。
  • 过渡效果：通过定义开始和结束状态之间的变化来创建平滑的动画效果。

关键帧动画

关键帧动画可以通过以下语法定义：

@keyframes animationName {
  0% { /* 动画开始状态 */ }
  50% { /* 动画中间状态 */ }
  100% { /* 动画结束状态 */ }
}

例如，以下是一个简单的关键帧动画示例，使元素在 2 秒内从红色渐变到蓝色：

@keyframes colorChange {
  0% { background-color: red; }
  100% { background-color: blue; }
}

.element {
  animation: colorChange 2s infinite;
}

过渡效果

过渡效果可以通过以下语法定义：

element {
  transition: property duration timing-function delay;
}

其中，property 是需要变化的属性，duration 是过渡效果的持续时间，timing-function 是过渡效果的缓动函数，delay 是过渡效果的延迟时间。

例如，以下是一个简单的过渡效果示例，使元素在 1 秒内平滑地改变背景颜色：

.element {
  transition: background-color 1s ease-in-out;
}

.element:hover {
  background-color: blue;
}

图片示例

以下是一个图片示例，展示了关键帧动画的效果：

CSS3 动画示例

扩展阅读

想要了解更多关于 CSS3 动画的知识，可以参考以下链接：