CSS动画

CSS动画是通过CSS属性实现的图形变换或者样式变化，让网页更有动感。通过CSS动画，不需要使用JavaScript或者JQuery等脚本语言就可以实现类似于动画的效果。

CSS动画的分类

CSS动画有很多分类，其中一些比较重要的分类有：

• transition（过渡）
• animation（动画）

transition

transition 是 CSS 属性集，它用于实现元素属性的渐变变化效果。可以通过 transition 来设置 transition-property、transition-duration、transition-timing-function 和 transition-delay 四个属性来实现。

以下是一个简单的例子：

#box {
    background-color: blue;
    transition: background-color 1s ease-in-out;
}

#box:hover {
    background-color: red;
}

在上面的例子中，当鼠标悬停在 #box 元素上时，元素的背景色会从蓝色渐变到红色，并且这个渐变的过程会持续 1 秒钟。

animation

animation 是 CSS 属性集，它用于实现更复杂的动画效果。animation 属性需要设置多个子属性来实现，其中包括以下属性：

• animation-name: 动画名称
• animation-duration: 动画执行时间
• animation-timing-function: 动画执行时间曲线
• animation-delay: 动画延迟时间
• animation-iteration-count: 动画执行次数
• animation-direction: 动画执行方向
• animation-play-state: 动画播放状态
• animation-fill-mode: 动画填充模式

以下是一个简单的例子：

#box {
    animation: bounce 1s ease-in-out infinite;
}

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

在上面的例子中，一个名为 "bounce" 的动画被应用在了 #box 元素上。这个动画会让元素在执行过程中上下弹跳，并且这个弹跳的过程会持续 1 秒钟，并且这个动画会一直循环下去。

CSS动画实践

CSS动画是通过CSS属性实现的，因此我们需要先了解各种CSS属性的用法以及他们之间的关系。

transition

transition 属性常常用在mouseover的交互动效中，实现从一种状态到另一种状态的过度。

以下是一个例子：

<div class="box"></div>

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: background-color 0.5s;
}

.box:hover {
    background-color: green;
}

在上面的例子中，当鼠标悬停在 div 元素上时，元素的背景色会从蓝色渐变到绿色，并且这个渐变的过程会持续 0.5 秒钟。

animation

animation 属性常常用在动画效果场景下，可以通过JS控制CSS动画的播放状态。

以下是一个例子：

<div class="box"></div>
<button id="btn">开始</button>

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation-name: bounce;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

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

.paused {
    animation-play-state: paused;
}

const btn = document.getElementById('btn');
const box = document.querySelector('.box');

btn.addEventListener('click', function () {
    if (box.classList.contains('paused')) {
        box.classList.remove('paused');
        btn.innerText = '开始';
    } else {
        box.classList.add('paused');
        btn.innerText = '暂停';
    }
});

在上面的例子中，一个名为 "bounce" 的动画被应用在了 div 元素上。这个动画会让元素在执行过程中上下弹跳，并且这个弹跳的过程会持续 1 秒钟，并且这个动画会一直循环下去。通过按钮的点击事件，可以实现动画的开始和暂停。