如何使用@keyframe實(shí)現(xiàn)左右搖晃動(dòng)畫

最近使用tower的時(shí)候, 發(fā)現(xiàn)tower的提醒鈴鐺(當(dāng)有新消息的時(shí)候)會(huì)左右搖動(dòng), 于是就打算試一試keyFrame動(dòng)畫看看是否可以實(shí)現(xiàn)這個(gè)效果.

實(shí)現(xiàn)代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測(cè)試動(dòng)畫</title>
    <style>
        .rotate{
            display: block;
            margin: 100px auto;
            line-height: 30px;
            text-decoration: none;
            text-align: center;
            color: white;
            width: 120px;
            height: 30px;
            background-color: #999999;
            transform-origin: top;
            animation:rotate 5s infinite;
            -webkit-animation:rotate 5s infinite;
        }

        @keyframes rotate
        {
            0%   {
                -ms-transform:rotate(0deg); /* IE 9 */
                -moz-transform:rotate(0deg); /* Firefox */
                -webkit-transform:rotate(0deg); /* Safari and Chrome */
                -o-transform:rotate(0deg); /* Opera */
                transform:rotate(0deg);
            }
            25%  {-ms-transform:rotate(8deg); /* IE 9 */
                -moz-transform:rotate(8deg); /* Firefox */
                -webkit-transform:rotate(8deg); /* Safari and Chrome */
                -o-transform:rotate(8deg); /* Opera */
                transform:rotate(8deg);}
            38%  {-ms-transform:rotate(-6deg); /* IE 9 */
                -moz-transform:rotate(-6deg); /* Firefox */
                -webkit-transform:rotate(-6deg); /* Safari and Chrome */
                -o-transform:rotate(-6deg); /* Opera */
                transform:rotate(-6deg);}
            50%  {-ms-transform:rotate(6deg); /* IE 9 */
                -moz-transform:rotate(6deg); /* Firefox */
                -webkit-transform:rotate(6deg); /* Safari and Chrome */
                -o-transform:rotate(6deg); /* Opera */
                transform:rotate(6deg);}
            62%  {-ms-transform:rotate(-4deg); /* IE 9 */
                -moz-transform:rotate(-4deg); /* Firefox */
                -webkit-transform:rotate(-4deg); /* Safari and Chrome */
                -o-transform:rotate(-4deg); /* Opera */
                transform:rotate(-4deg);}
            75%  {-ms-transform:rotate(2deg); /* IE 9 */
                -moz-transform:rotate(2deg); /* Firefox */
                -webkit-transform:rotate(2deg); /* Safari and Chrome */
                -o-transform:rotate(2deg); /* Opera */
                transform:rotate(2deg);}
            100% {-ms-transform:rotate(0deg); /* IE 9 */
                -moz-transform:rotate(0deg); /* Firefox */
                -webkit-transform:rotate(0deg); /* Safari and Chrome */
                -o-transform:rotate(0deg); /* Opera */
                transform:rotate(0deg);}
        }

        @-moz-keyframes rotate /* Firefox */
        {
            0%   {
                -ms-transform:rotate(0deg); /* IE 9 */
                -moz-transform:rotate(0deg); /* Firefox */
                -webkit-transform:rotate(0deg); /* Safari and Chrome */
                -o-transform:rotate(0deg); /* Opera */
                transform:rotate(0deg);
            }
            25%  {-ms-transform:rotate(8deg); /* IE 9 */
                -moz-transform:rotate(8deg); /* Firefox */
                -webkit-transform:rotate(8deg); /* Safari and Chrome */
                -o-transform:rotate(8deg); /* Opera */
                transform:rotate(8deg);}
            38%  {-ms-transform:rotate(-6deg); /* IE 9 */
                -moz-transform:rotate(-6deg); /* Firefox */
                -webkit-transform:rotate(-6deg); /* Safari and Chrome */
                -o-transform:rotate(-6deg); /* Opera */
                transform:rotate(-6deg);}
            50%  {-ms-transform:rotate(6deg); /* IE 9 */
                -moz-transform:rotate(6deg); /* Firefox */
                -webkit-transform:rotate(6deg); /* Safari and Chrome */
                -o-transform:rotate(6deg); /* Opera */
                transform:rotate(6deg);}
            62%  {-ms-transform:rotate(-4deg); /* IE 9 */
                -moz-transform:rotate(-4deg); /* Firefox */
                -webkit-transform:rotate(-4deg); /* Safari and Chrome */
                -o-transform:rotate(-4deg); /* Opera */
                transform:rotate(-4deg);}
            75%  {-ms-transform:rotate(2deg); /* IE 9 */
                -moz-transform:rotate(2deg); /* Firefox */
                -webkit-transform:rotate(2deg); /* Safari and Chrome */
                -o-transform:rotate(2deg); /* Opera */
                transform:rotate(2deg);}
            100% {-ms-transform:rotate(0deg); /* IE 9 */
                -moz-transform:rotate(0deg); /* Firefox */
                -webkit-transform:rotate(0deg); /* Safari and Chrome */
                -o-transform:rotate(0deg); /* Opera */
                transform:rotate(0deg);}
        }

        @-webkit-keyframes rotate /* Safari 和 Chrome */
        {
            0%   {
                -ms-transform:rotate(0deg); /* IE 9 */
                -moz-transform:rotate(0deg); /* Firefox */
                -webkit-transform:rotate(0deg); /* Safari and Chrome */
                -o-transform:rotate(0deg); /* Opera */
                transform:rotate(0deg);
            }
            25%  {-ms-transform:rotate(8deg); /* IE 9 */
                -moz-transform:rotate(8deg); /* Firefox */
                -webkit-transform:rotate(8deg); /* Safari and Chrome */
                -o-transform:rotate(8deg); /* Opera */
                transform:rotate(8deg);}
            38%  {-ms-transform:rotate(-6deg); /* IE 9 */
                -moz-transform:rotate(-6deg); /* Firefox */
                -webkit-transform:rotate(-6deg); /* Safari and Chrome */
                -o-transform:rotate(-6deg); /* Opera */
                transform:rotate(-6deg);}
            50%  {-ms-transform:rotate(6deg); /* IE 9 */
                -moz-transform:rotate(6deg); /* Firefox */
                -webkit-transform:rotate(6deg); /* Safari and Chrome */
                -o-transform:rotate(6deg); /* Opera */
                transform:rotate(6deg);}
            62%  {-ms-transform:rotate(-4deg); /* IE 9 */
                -moz-transform:rotate(-4deg); /* Firefox */
                -webkit-transform:rotate(-4deg); /* Safari and Chrome */
                -o-transform:rotate(-4deg); /* Opera */
                transform:rotate(-4deg);}
            75%  {-ms-transform:rotate(2deg); /* IE 9 */
                -moz-transform:rotate(2deg); /* Firefox */
                -webkit-transform:rotate(2deg); /* Safari and Chrome */
                -o-transform:rotate(2deg); /* Opera */
                transform:rotate(2deg);}
            100% {-ms-transform:rotate(0deg); /* IE 9 */
                -moz-transform:rotate(0deg); /* Firefox */
                -webkit-transform:rotate(0deg); /* Safari and Chrome */
                -o-transform:rotate(0deg); /* Opera */
                transform:rotate(0deg);}
        }

        @-o-keyframes rotate /* Opera */
        {
            0%   {
                -ms-transform:rotate(0deg); /* IE 9 */
                -moz-transform:rotate(0deg); /* Firefox */
                -webkit-transform:rotate(0deg); /* Safari and Chrome */
                -o-transform:rotate(0deg); /* Opera */
                transform:rotate(0deg);
            }
            25%  {-ms-transform:rotate(8deg); /* IE 9 */
                -moz-transform:rotate(8deg); /* Firefox */
                -webkit-transform:rotate(8deg); /* Safari and Chrome */
                -o-transform:rotate(8deg); /* Opera */
                transform:rotate(8deg);}
            38%  {-ms-transform:rotate(-6deg); /* IE 9 */
                -moz-transform:rotate(-6deg); /* Firefox */
                -webkit-transform:rotate(-6deg); /* Safari and Chrome */
                -o-transform:rotate(-6deg); /* Opera */
                transform:rotate(-6deg);}
            50%  {-ms-transform:rotate(6deg); /* IE 9 */
                -moz-transform:rotate(6deg); /* Firefox */
                -webkit-transform:rotate(6deg); /* Safari and Chrome */
                -o-transform:rotate(6deg); /* Opera */
                transform:rotate(6deg);}
            62%  {-ms-transform:rotate(-4deg); /* IE 9 */
                -moz-transform:rotate(-4deg); /* Firefox */
                -webkit-transform:rotate(-4deg); /* Safari and Chrome */
                -o-transform:rotate(-4deg); /* Opera */
                transform:rotate(-4deg);}
            75%  {-ms-transform:rotate(2deg); /* IE 9 */
                -moz-transform:rotate(2deg); /* Firefox */
                -webkit-transform:rotate(2deg); /* Safari and Chrome */
                -o-transform:rotate(2deg); /* Opera */
                transform:rotate(2deg);}
            100% {-ms-transform:rotate(0deg); /* IE 9 */
                -moz-transform:rotate(0deg); /* Firefox */
                -webkit-transform:rotate(0deg); /* Safari and Chrome */
                -o-transform:rotate(0deg); /* Opera */
                transform:rotate(0deg);}
        }
    </style>
</head>
<body>
    <a href="#" class="rotate">測(cè)試專用</a>
</body>
</html>

其實(shí)過程就兩步:

  1. 首先在選擇器里面設(shè)置animation: 動(dòng)畫名 動(dòng)畫時(shí)間 重復(fù)次數(shù)
  2. 在@keyframe中實(shí)現(xiàn)動(dòng)畫, 可以使用from to, 也可以使用百分比

有關(guān)transform變換的知識(shí), 可以點(diǎn)擊這里

旋轉(zhuǎn)動(dòng)畫的中心點(diǎn)

要注意的一點(diǎn)是, tower動(dòng)畫鈴鐺是以鈴鐺根部為中心點(diǎn)來回?fù)u晃的, 所以我們要更改旋轉(zhuǎn)中心點(diǎn), 即: transform-origin: top;

有關(guān)旋轉(zhuǎn)中心點(diǎn)的知識(shí), 可以看這里

過于冗長(zhǎng)的瀏覽器兼容代碼

可以看到, 要兼容不同瀏覽器, 要寫很多很多重復(fù)的兼容代碼, 我們可以使用postcss這個(gè)工具來進(jìn)行css后處理, 即我們可以隨意使用最新的css語法, 并且可以只寫最標(biāo)準(zhǔn)的語法, 兼容性交給postcss去做
詳細(xì)postcss用法可以點(diǎn)擊這里

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容