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

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

如何使用@keyframe实现左右摇晃动画
【Vue11】使用Animate.css
iOS动画
animation
使用CSS3 animation实现gif动图的暂停和播放实例页
iOS keyframe 动画的基本套路
iOS 动画-uikit geekband
iOS ~ ShapeLayer、CABasicAnimatio
使用CADisplayLink实现UILabel动画特效
动画iOS

最近使用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实现左右摇晃动画
最近使用tower的时候, 发现tower的提醒铃铛(当有新消息的时候)会左右摇动, 于是就打算试一试keyFra...
【Vue11】使用Animate.css
上一章是说如何使用transition这种过度动画，这一章是说如何使用keyframe这种动画。如果我想自定义名...
iOS动画
iOS动画-从UIView动画说起iOS动画-Transform和KeyFrame动画iOS动画-layout动画...
animation
作用实现简单动画。语法其中， name: 需要绑定的keyframe名称（其中规定了位置从哪儿到哪儿） du...
使用CSS3 animation实现gif动图的暂停和播放实例页
html：使用angular加载元素 css：使video播放实现旋转效果 @-webkit-keyframe...
iOS keyframe 动画的基本套路
实际就是一套动画的复合执行: 下面是 add keyframe 的代码: 其中的 keyframe 的 start...
iOS 动画-uikit geekband
动画化原理动画支持案例新建文档view输入 run起来说说动画类型 UIview的keyframe 动画化...
iOS ~ ShapeLayer、CABasicAnimatio
（实现左右摇晃，并伴随着震动）
使用CADisplayLink实现UILabel动画特效
使用CADisplayLink实现UILabel动画特效使用CADisplayLink实现UILabel动画特效
动画iOS
动画类型： pop:大小弹性缩放效果 shake:左右摇晃效果 morph:左右上下弹性变形效果 squeeze:...