钟文志的部落格

Appearance

CSS3 动画（Animations）允许在一定时间内改变元素的多个样式属性。与过渡不同，动画提供了更强的控制和更多的功能，例如关键帧和循环。

基本属性 ​

1. @keyframes 规则 ​

@keyframes 规则用于定义动画。它指定了动画过程中在不同时间点上的样式。

语法：

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

可以使用百分比来定义更精确的关键帧：

css
@keyframes animation-name {
  0% {
    /* 初始状态的样式 */
  }
  50% {
    /* 中间状态的样式 */
  }
  100% {
    /* 结束状态的样式 */
  }
}

2. animation 属性 ​

animation 是一个简写属性，用于设置动画的各个方面。它可以包含以下几个属性：

  • animation-name: 指定要绑定到选择器的 @keyframes 动画。
  • animation-duration: 指定动画完成一个周期所需的时间。
  • animation-timing-function: 指定动画的速度曲线。
  • animation-delay: 指定动画何时开始。
  • animation-iteration-count: 指定动画重复的次数。
  • animation-direction: 指定动画在每次循环时是否反向播放。
  • animation-fill-mode: 指定动画在播放前后对元素的影响。
  • animation-play-state: 指定动画是运行还是暂停。

语法：

css
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

示例：

css
animation: slidein 3s ease-in-out 1s infinite alternate both running;

各个属性的详细说明 ​

animation-name ​

animation-name 指定要应用的 @keyframes 动画的名称。

css
animation-name: slidein;
animation-duration ​

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

css
animation-duration: 3s;
animation-timing-function ​

animation-timing-function 指定动画的速度曲线。

css
animation-timing-function: ease-in-out;
animation-delay ​

animation-delay 指定动画何时开始，单位是秒（s）或毫秒（ms）。

css
animation-delay: 1s;
animation-iteration-count ​

animation-iteration-count 指定动画重复的次数，可以是一个具体的数字或 infinite（无限次）。

css
animation-iteration-count: infinite;
animation-direction ​

animation-direction 指定动画在每次循环时是否反向播放。可能的值有：

  • normal: 正常播放。
  • reverse: 反向播放。
  • alternate: 交替反向播放。
  • alternate-reverse: 交替反向播放，从反向开始。
css
animation-direction: alternate;
animation-fill-mode ​

animation-fill-mode 指定动画在播放前后对元素的影响。可能的值有：

  • none: 默认值。动画不会影响元素的初始和最终状态。
  • forwards: 动画结束后，元素将保持最后一个关键帧的样式。
  • backwards: 在动画播放之前，元素将应用第一个关键帧的样式。
  • both: 元素在动画播放前后都应用关键帧的样式。
css
animation-fill-mode: both;
animation-play-state ​

animation-play-state 指定动画是运行还是暂停。可能的值有：

  • running: 动画正在运行。
  • paused: 动画暂停。
css
animation-play-state: running;

示例 ​

以下是一个使用 CSS3 动画的示例，展示了一个方块从左侧滑动到右侧：

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 动画示例</title>
<style>
    @keyframes slidein {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(100%);
        }
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: #4CAF50;
        animation: slidein 3s ease-in-out infinite alternate;
    }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这个示例中，@keyframes slidein 定义了动画的关键帧，指定方块从左侧滑动到右侧。.box 元素应用了这个动画，动画持续 3 秒钟，使用 ease-in-out 速度曲线，无限次循环，并在每次循环时反向播放。

进阶用法 ​

1. 多个动画 ​

一个元素可以同时应用多个动画，每个动画的属性之间用逗号分隔。

css
animation: slidein 3s ease-in-out, fadein 2s linear 1s;

2. 动画与过渡结合 ​

动画效果可以与过渡效果结合使用，创建更加丰富和动态的用户界面效果。

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 动画与过渡示例</title>
<style>
    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: #4CAF50;
        animation: rotate 4s linear infinite;
        transition: background-color 1s;
    }
    .box:hover {
        background-color: #FF5722;  /* 鼠标悬停时背景颜色变为橙色 */
    }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这个示例中，.box 元素应用了一个旋转动画，并且在鼠标悬停时背景颜色会平滑地从绿色过渡到橙色。通过结合动画和过渡，可以实现更复杂和精美的效果。