CSS3学习笔记-动画

CSS3中提供了许多有趣和实用的动画效果，可以使页面更加生动有趣，下面介绍一些常用的动画效果。

1. @keyframes规则

使用@keyframes规则可以创建一系列动画帧，并定义它们的状态和样式，在页面中应用该动画后，浏览器会自动处理中间帧的变化。

语法如下：

@keyframes animation-name {
  from { /* 初始状态 */ }
  to { /* 结束状态 */ }
}

/* 或者使用百分比进行定义 */
@keyframes animation-name {
  0% { /* 初始状态 */ }
  50% { /* 中间状态 */ }
  100% { /* 结束状态 */ }
}

例如，我们可以创建一个旋转动画：

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

1. animation属性

使用animation属性可以对元素应用一个或多个动画效果，可以设置动画的持续时间、延迟、循环方式等属性。

语法如下：

animation: name duration timing-function delay iteration-count direction fill-mode;

其中，name指定使用的动画名称，duration指定动画持续时间，timing-function指定时间函数，delay指定动画延迟时间，iteration-count指定动画重复次数，direction指定动画方向，fill-mode指定动画填充模式。

例如，我们可以将旋转动画应用到一个div元素上：

div {
  animation: spin 2s linear infinite;
}

以上是CSS3中一些常用的动画效果，可以根据实际需求进行选择和组合使用，实现不同的页面效果。