css3实现动画的三种方式

下面是关于“CSS3实现动画的三种方式”的完整攻略。

下面是关于“CSS3实现动画的三种方式”的完整攻略。

方式一：使用transition属性

使用transition属性可以在不使用JavaScript的情况下，在元素状态改变时实现简单的动画效果。其强大之处在于，它需要的CSS属性仅仅是初始状态和结束状态，而不需要中间过渡的动画实现。具体的步骤如下：

1. 选择元素并为它们设置CSS样式。
2. 声明哪个属性将发生变化。
3. 声明变化需要的时间。
4. 定义变化的速率。

下面是一个使用transition属性实现简单动画的例子：

<style>
    div {
        width: 100px;
        height: 100px;
        background: red;
        transition: width 2s;
    }
    div:hover {
        width: 200px;
    }
</style>

<div></div>

上面的例子中，在hover状态下的div元素宽度从100px变成了200px，变化的时间为2秒。您可以将transition中的属性换成其他CSS属性名，例如颜色、位置等。

方式二：使用@keyframes关键字

使用@keyframes关键字可以制定较为复杂的动画效果。@keyframes定义了动画的每个阶段以及在每个阶段时发生的CSS属性变化。具体步骤如下：

1. 选择元素并为它们设置CSS样式。
2. 使用@keyframes关键字定义动画中的不同关键帧。
3. 将animation属性添加到您希望应用该动画效果的元素上。
4. 指示动画的持续时间和运动的速度。

以下是一个使用@keyframes实现动画的例子：

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        animation: example 5s infinite;
    }

    @keyframes example {
        0%   {background-color: red; left: 0;}
        50%  {background-color: yellow; left: 200px;}
        100% {background-color: red; left: 0;}
    }
</style>

<div></div>

这个例子中，div元素将左移，背景颜色也会改变。变化从红色开始，到黄色，然后又变回红色。动画将持续5秒，并一直循环播放。

方式三：使用JavaScript

使用JavaScript实现动画，您可以完全掌控动画的过程，并对它的每个阶段做出修改，以实现更复杂的动画效果。以下是具体步骤：

1. 选择需要动画的元素。
2. 定义动画过程中元素的初始值与结束值。
3. 使用setInterval()或requestAnimationFrame()函数，定期调用动画函数来改变元素的属性值。
4. 在动画函数中改变元素的属性值，实现动画效果。

下面是一个使用JavaScript实现动画的例子：

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
    }
</style>

<div></div>

<script>
    const div = document.querySelector('div');
    let position = 0;
    setInterval(() => {
        div.style.left = position + 'px';
        position++;
        if (position > 200) {
            position = 0;
        }
    }, 10)
</script>

这个例子中，div元素将水平移动，宽度也会改变。每10毫秒改变一次它的位置，当它到达200像素的位置时，将回到最初的状态，重新开始。