learn/css/animation_tutorial

CSS 动画教程

CSS 动画可以让页面元素动起来，增加页面的动态效果和用户体验。下面是一些基本的 CSS 动画概念和示例。

基本概念

1. 关键帧：定义动画开始和结束的状态，以及动画过程中的中间状态。
2. 动画属性：指定动画要改变哪些 CSS 属性，如 transform、opacity 等。
3. 动画时间：设置动画的持续时间。

示例

下面是一个简单的 CSS 动画示例，使一个元素在页面中来回移动。

@keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

.animated-element {
  animation: move 2s infinite;
}

<div class="animated-element">移动的元素</div>

扩展阅读

想要了解更多关于 CSS 动画的细节和高级用法，可以阅读CSS 动画进阶教程。

图片示例