css 动画

当涉及到CSS动画时，有几种方式可以实现动画效果。以下是一些常见的CSS动画技术：

1. 使用@keyframes规则：@keyframes规则允许你创建一个动画序列，定义动画的关键帧和属性值。例如，你可以创建一个旋转动画，让一个元素在页面上旋转。

   @keyframes rotate {
     from {
       transform: rotate(0deg);
     }
     to {
       transform: rotate(360deg);
     }
   }
   
   .element {
     animation: rotate 2s infinite;
   }
   

 2.使用transition属性：transition属性允许你在元素状态改变时平滑地过渡属性的值。例如，你可以让一个按钮在鼠标悬停时改变背景颜色，并且有一个平滑的过渡效果。

.button {
  background-color: #3498db;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #2980b9;
}