教程/css-animation

CSS 动画教程

CSS 动画是一种在网页上创建动态效果的技术。它可以让网页元素在用户交互或页面加载时，通过改变样式属性（如位置、大小、透明度等）来产生视觉上的动态效果。

基本原理

CSS 动画主要依赖于以下几个属性：

• transition: 用于实现简单的过渡效果。
• animation: 用于实现更复杂的动画效果。

例子：使用 transition 创建简单的过渡效果

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 0.5s ease-in-out;
}

.box:hover {
  width: 200px;
}

动画类型

CSS 动画可以分为以下几种类型：

• 关键帧动画: 使用 @keyframes 规则定义动画的各个阶段。
• 过渡动画: 使用 transition 属性实现简单的动画效果。

例子：使用 @keyframes 创建关键帧动画

@keyframes slideIn {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.animated {
  animation: slideIn 1s forwards;
}

扩展阅读

想要了解更多关于 CSS 动画的细节，可以访问本站 CSS 动画专题。

<center><img src="https://cloud-image.ullrai.com/q/css_animation_examples/" alt="CSS 动画示例"/></center>