学了一个弹弹弹的css写法

mark一下。
就是简单的弹，没有形变。

.token-bounce {
-webkit-animation: tokenBouncer infinite 0.75s linear;
-moz-animation: tokenBouncer infinite 0.75s linear;
animation: tokenBouncer infinite 0.75s linear;
animation-fill-mode: forwards;
}

@-webkit-keyframes tokenBouncer{
0%{transform:translateY(-25px);animation-timing-function:cubic-bezier(0.39, 0.11, 0.83, 0.25)}
50%{transform:translateY(0px);animation-timing-function:cubic-bezier(0.07, 0.47, 0.23, 0.93)}
100%{transform:translateY(-25px)}}

@keyframes tokenBouncer{
0%{transform:translateY(-25px);animation-timing-function:cubic-bezier(0.39, 0.11, 0.83, 0.25)}
50%{transform:translateY(0px);animation-timing-function:cubic-bezier(0.07, 0.47, 0.23, 0.93)}
100%{transform:translateY(-25px)}}

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    wzhiq896阅读 1,830评论 0赞 2
  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    love2013阅读 2,355评论 0赞 11
  • css动画
    看了很多视频、文章，最后却通通忘记了，别人的知识依旧是别人的，自己却什么都没获得。此系列文章旨在加深自己的印象，因...
    DCbryant阅读 1,906评论 0赞 4
  • 6_动画_其他属性
    2D、3D变形动画 transform：2D变形：复合属性 通过 CSS3 转换，我们能够对元素进行移动、缩放、转...
    Zd_silent阅读 427评论 0赞 0