菜鸟教程
教程 css tutorial

动画属性详解

CSS 提供多个动画相关属性，用于细致控制动画行为。通常与 @keyframes 搭配使用。

1. 常用动画属性

属性名 说明 示例值
animation-name 指定使用的关键帧名称 slideMove
animation-duration 动画持续时间 2s, 500ms
animation-timing-function 动画节奏曲线 ease, linear, steps(4)
animation-delay 动画延迟时间 0s, 1s
animation-iteration-count 动画播放次数 1, infinite
animation-direction 播放方向 normal, reverse, alternate
animation-fill-mode 动画执行前后状态 none, forwards, backwards, both
animation-play-state 动画播放状态 running, paused

2. 简写属性

css 
animation: slideMove 2s ease-in-out 0s infinite alternate;

等同于：

css 
animation-name: slideMove;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;

动画属性详解示例

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>CSS 动画属性详解示例</title>
  <style>
    .circle {
      width: 80px;
      height: 80px;
      background-color: #42a5f5;
      border-radius: 50%;
      margin: 40px auto;
      animation: bounce 2s ease-in-out 0s infinite alternate;
    }

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-120px);
  }
}



</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>

相关内容