zoukankan      html  css  js  c++  java
  • CSS3摆动动画效果

    效果图:红包在左右摇晃

     

    代码如下:

    @keyframes upAnimation {
        0 % {
            transform: rotate(0 deg);transition - timing - function: cubic - bezier(0.215, .61, .355, 1)
        }
        10 % {
            transform: rotate(-12 deg);transition - timing - function: cubic - bezier(0.215, .61, .355, 1)
        }
        20 % {
            transform: rotate(12 deg);transition - timing - function: cubic - bezier(0.215, .61, .355, 1)
        }
        28 % {
            transform: rotate(-10 deg);transition - timing - function: cubic - bezier(0.215, .61, .355, 1)
        }
        36 % {
            transform: rotate(10 deg);transition - timing - function: cubic - bezier(0.755, .5, .855, .06)
        }
        42 % {
            transform: rotate(-8 deg);transition - timing - function: cubic - bezier(0.755, .5, .855, .06)
        }
        48 % {
            transform: rotate(8 deg);transition - timing - function: cubic - bezier(0.755, .5, .855, .06)
        }
        52 % {
            transform: rotate(-4 deg);transition - timing - function: cubic - bezier(0.755, .5, .855, .06)
        }
        56 % {
            transform: rotate(4 deg);transition - timing - function: cubic - bezier(0.755, .5, .855, .06)
        }
        60 % {
            transform: rotate(0 deg);transition - timing - function: cubic - bezier(0.755, .5, .855, .06)
        }
        100 % {
            transform: rotate(0 deg);transition - timing - function: cubic - bezier(0.215, .61, .355, 1)
        }
    }
  • 相关阅读:
    解题报告:POJ1852 Ants
    解题报告:POJ2573 Bridge(分析建模)
    POJ 3321 Apple Tree(树状数组模板)
    PAT1139 First Contact
    POJ3259 SPFA判定负环
    HDOJ2586 最近公共祖先模板
    树的直径与最近公共祖先
    字符数组_随机存储
    青鸟资料下载
    软件测试(4)_LoadRunner使用
  • 原文地址:https://www.cnblogs.com/hool/p/12091464.html
Copyright © 2011-2022 走看看