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)
        }
    }
  • 相关阅读:
    python中的quopri模块
    使用ant来压缩js代码,这个很有用
    js 压缩工具 google closure compiler
    web中,canvas render 跟 webgl render 的区别
    越南unicode范围
    复杂度分析 数据结构
    svn bat批处理
    游戏 有限状态机参考:
    python list排序
    游戏 AOI相关
  • 原文地址:https://www.cnblogs.com/hool/p/12091464.html
Copyright © 2011-2022 走看看