如何使用@keyframe实现左右摇晃动画

作者: Oo晨晨oO | 来源:发表于2017-11-23 18:20 被阅读9次

最近使用tower的时候, 发现tower的提醒铃铛(当有新消息的时候)会左右摇动, 于是就打算试一试keyFrame动画看看是否可以实现这个效果.

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试动画</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">测试专用</a>
</body>
</html>

其实过程就两步:

首先在选择器里面设置animation: 动画名动画时间重复次数
在@keyframe中实现动画, 可以使用from to, 也可以使用百分比

有关transform变换的知识, 可以点击这里

旋转动画的中心点

要注意的一点是, tower动画铃铛是以铃铛根部为中心点来回摇晃的, 所以我们要更改旋转中心点, 即: transform-origin: top;

有关旋转中心点的知识, 可以看这里

过于冗长的浏览器兼容代码

可以看到, 要兼容不同浏览器, 要写很多很多重复的兼容代码, 我们可以使用postcss这个工具来进行css后处理, 即我们可以随意使用最新的css语法, 并且可以只写最标准的语法, 兼容性交给postcss去做
详细postcss用法可以点击这里

如何使用@keyframe实现左右摇晃动画

实现代码

旋转动画的中心点

过于冗长的浏览器兼容代码

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读