css3 动画化制作animation标签总结与实践-CFANZ编程社区

在上一篇transfrom的博客（地址http://t.csdn.cn/gHV77）中我已经讲了动画化的基础标签transfrom，现在来继续上一个按钮的基础上实现动画化的标签animation。我们这儿想要达到的效果是实现这个按钮的颜色穿梭变换而保证内部不变的一个效果。

我们先来复习以下基本语法:

animation-name:动画名称

animation-duration: 每一个周期（每一次）动画持续时间，单位s

animation-timing-function:动画速度曲线

animation-delay:动画好久开始播放，默认是0，若为负数则提前播放，单位s

animation-iteration-count:动画播放次数，默认为1，一般都设为无限次infinite

animation-direction:动画是否逆向播放，默认值为normal。此外还有reverse，alternate，alternate-reverse三种主要属性，reverse实现一直反向播放，alternate实现在奇数次正向播放，偶数次反向播放，alternate-reverse实现在奇数次反向播放，偶数次正向播放。

animation要搭配“@keyframes 动画名称”来使用，一般我们有

@keyframes 名称 { from {} to {} }（从头到位的变换）

@keyframes 名称{ 0% { } 100% { } }（对每次动画进行到具体的百分比进程设置）

两种格式。在知道语法后想实现颜色变换很简单，我们这儿以字体变换相关代码如下：

animation-name:aaa;animation-delay: 2s;animation-iteration-count: infinite;animation-duration:2s;

@keyframes aaa{
    0%{
        color:RGB(255 250 250)
    }
    50%{
        color:#CD2626;
    }
    100%{
        color: #9400D3;
    }
}

结果我们测试后发现，动画在每次运行时都算流畅，但每次到新的次数时都会闪烁一下，很不美观。这是由于两次动画之间的跳跃不是一个渐进过程导致的，我们可以通过把动画的运行方向设置为奇数次正向，偶数次反向就可以避免掉这个闪烁（注：有些时候我们不想反向，这个时候只需要再次细化分层，把最后的颜色改成相同的也可以避免闪烁的情况），我们把目标改成按钮背景，并且利用之前的整体transform相关的调整，我们可以实现按钮边框的多重变换，html5代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>平行四边形五彩按钮</title>
    <style>
        .测试{
            color:#0000CD;position:fixed;top:500px;left:760px;font-family:"萝莉体 第二版";font-size:80px;background-color:RGB(255 250 250);
            transform:rotate(45deg) scale(0.5);
            animation-name:aaa;
            animation-delay:0.5s;
            animation-iteration-count: infinite;
            animation-duration:2s;
            animation-direction:alternate;
        }
        @keyframes aaa{
            0%{
                background-color:RGB(255 250 250);
                transform:rotate(45deg) scale(0.5);
            }
            50%{
                background-color:#CD2626;
                transform:rotate(90deg) scale(0.8);
            }
            100%{
                background-color: #9400D3;
                transform:rotate(180deg) scale(1.2);
            }
        }
        .hh{
            animation-name:bbb;
            animation-delay:0.5s;
            animation-iteration-count: infinite;
            animation-duration:2s;
            animation-direction:alternate;
            transform:rotate(-45deg);display: inline-block;
        }
        @keyframes bbb{
            0%{
                transform:rotate(-45deg);
            }
            50%{
                transform:rotate(-90deg);
            }
            100%{
                transform:rotate(-180deg);
            }
        }
    </style>
</head>
<body>
<div>
    <button style="width:360px;height:360px;" class="测试"><b class="hh">开始游戏</b></button>
</div>
</body>
</html>

实现效果如下：

QQ录屏20220416121948

成功达到想要的效果！