CSS从入门到精通动画

CSS动画是一种通过CSS属性来控制HTML元素的动态效果的技术。以下是CSS动画的入门到精通的步骤：
1. 使用CSS transition属性创建简单的动画效果。transition属性允许您在鼠标悬停或其他事件发生时更改CSS属性的值。例如，以下代码将使鼠标悬停在按钮上时，按钮的背景颜色从白色变为灰色：

button {
  background-color: white;
  transition: background-color 0.5s ease;
}

button:hover {
  background-color: gray;
}

2. 使用CSS animation属性创建更复杂的动画效果。animation属性允许您定义动画的关键帧，即动画的开始和结束状态。例如，以下代码将使一个div元素在5秒钟内从左侧移动到右侧：

div {
  position: relative;
  animation: move-right 5s forwards;
}

@keyframes move-right {
  from {
    left: 0;
  }
  to {
    left: 100%;
  }
}

3. 使用CSS transform属性创建转换效果。transform属性允许您旋转、缩放、倾斜或平移元素。例如，以下代码将使一个div元素旋转45度：

div {
  transform: rotate(45deg);
}

4. 使用CSS perspective属性创建3D效果。perspective属性允许您定义3D场景的观察者距离元素的距离。例如，以下代码将使一个div元素看起来像是在3D空间中旋转：

div {
  transform: rotateY(45deg);
  perspective: 1000px;
}