CSS动画允许你在网页上创建平滑的过渡和动画效果，而无需使用JavaScript。以下是一些常见的CSS动画属性和样式的示例：

1. @keyframes规则:
使用@keyframes规则定义动画的关键帧。
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

2. animation属性:
animation属性用于将动画应用于元素。
.element {
  animation: fadeIn 2s ease-in-out;
}

这将使具有.element类的元素在2秒内以淡入淡出的方式从不透明度0到1。

3. transition属性:
transition属性用于在状态变化时实现平滑过渡。
.button {
  transition: background-color 0.3s ease-in-out;
}

.button:hover {
  background-color: #3498db;
}

这将在鼠标悬停在按钮上时以0.3秒的时间内平滑地改变背景颜色。

4. transform属性:
transform属性用于进行2D或3D变换。
.box {
  transition: transform 0.5s ease-in-out;
}

.box:hover {
  transform: rotate(45deg);
}

这将在鼠标悬停在元素上时以0.5秒的时间内以45度旋转元素。

5. 动画重复和反向:
通过animation-iteration-count和animation-direction属性，你可以指定动画的重复次数和方向。
.circle {
  animation: rotate 3s linear infinite alternate;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

这将使.circle元素以3秒的时间内无限次以线性方式在0度和360度之间旋转，并在每次迭代之间反向旋转。

以上是一些基本的CSS动画示例。根据具体的需求和 k你的网站设计，你可以使用这些基础来创建更复杂的动画效果。


转载请注明出处：http://www.zyzy.cn/article/detail/4086/CSS