参考资料

  1. display: flex/inline-flex示例
  2. div居中样式
  3. 有没有推荐的 CSS 过渡动画库？
  4. css阴影效果代码
  5. Flexbox 布局有哪些高级用法？
  6. 层次/关系选择器详细说明以及案例
  7. 元素选择器详细说明以及案例
  8. 伪元素选择器详细说明以及案例

动画属性用于定义CSS动画的行为，包括动画的持续时间、延迟、迭代次数、方向、填充模式等。以下是常用动画属性的详细说明及案例：

  1. animation-name: 定义动画名称，对应@keyframes规则。

  2. animation-duration: 定义动画完成一个周期所需的时间，单位为秒（s）或毫秒（ms）。

  3. animation-timing-function: 定义动画的速度曲线，如ease、linear、ease-in等。

  4. animation-delay: 定义动画开始前的延迟时间，单位为秒（s）或毫秒（ms）。

  5. animation-iteration-count: 定义动画播放的次数，可以是数字或infinite表示无限次。

  6. animation-direction: 定义动画是否反向播放，如normal、reverse、alternate等。

  7. animation-fill-mode: 定义动画执行前后如何应用样式，如none、forwards、backwards等。

  8. animation-play-state: 定义动画的播放状态，如running、paused。

案例：

@keyframes example {
  0% { background-color: red; }
  50% { background-color: yellow; }
  100% { background-color: green; }
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

在这个案例中，div元素将执行名为example的动画，动画持续时间为4秒，使用ease-in-out速度曲线，延迟1秒开始，无限次交替播放，动画结束后保持最后一帧的状态，动画状态为播放中。

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。