button{
animation: beat 6s ease 0s infinite normal;
}
@keyframes beat {
0% {
transform: translateY(0px);
}
2% {
transform: translateY(-7px);
}
6% {
transform: translateY(7px);
}
8% {
transform: translateY(0px);
}
10% {
transform: translateY(-5px);
}
12% {
transform: translateY(5px);
}
16% {
transform: translateY(0px);
}
50% {
transform: translateY(0px);
}
100% {
transform: translateY(0px);
}
}

  

css抖动动画的更多相关文章

  1. CSS Shake – 摇摆摇摆!动感的 CSS 抖动效果

    CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...

  2. Android中使用抖动动画吸引来用户注意

    原文:http://www.androidcn.org/topic/552e65bc61d460226ab27a5c 在应用中,有时候我们要吸引用户去点击某些按钮,比如应用市场的推荐按钮,为了能够吸引 ...

  3. 第四十二课:基于CSS的动画引擎

    由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...

  4. Effeckt.css项目:CSS交互动画应用集锦

    目前,网上有大量基于CSS转换的实验和示例,但它们都过于分散,而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来,例如:弹窗.按钮.导航.列表.页面切换等等. Effe ...

  5. Android设置View抖动动画

    在应用中,有时候我们要吸引用户去点击某些按钮,比如应用市场的推荐按钮,为了能够吸引用户主动点击而且不过分的打扰用户,最好的方法就是给我们想吸引用户注意的view添加一些抖动动画,比如这张图 这里我主要 ...

  6. 基于animation.css实现动画旋转特效

    分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  7. vue中使用第三方插件animate.css实现动画效果

    vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...

  8. CSS波纹动画

    波纹动画 在此运用到css的动画属性,以及背景等相关属性. 值得一说的是下面代码中一直写到的这样一行代码:filter: alpha(opacity=0~100) ,这是考虑到浏览器兼容的问题. IE ...

  9. css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层,正常是 里外层 鼠标上来 外层有hover,如果就想到里层hover触发外层hover,要用外层position 定义绝对定位,内层的hover跳出外层的div,这样视觉上就是两个单独的div,进行内外层联动。

    css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层,正常是 里外层 鼠标上来 外层有hover,如果就想到里层hover触发 ...

随机推荐

  1. vue 错误分析

    1  点击事件发生的错误 原因是,重复触发事件函数导致   改为不一样的名字即可 2  提示 : “ vuex] Expects string as the type, but found undef ...

  2. https://pypi.org/project/py-mysql2pgsql/

    https://packages.ubuntu.com/trusty/postgresql-server-dev-9.3 所以使用下面的命令即可安装python-dev: yum install py ...

  3. py文件传输

    本文参考:http://blog.163.com/kongdelu2009@yeah/blog/static/1119952072009102562126194/ 发送端程序: # -*- codin ...

  4. LeetCode 258 Add Digits 解题报告

    题目要求 Given a non-negative integer num, repeatedly add all its digits until the result has only one d ...

  5. mvn install package区别

    package是把jar打到本项目的target下,而install时把target下的jar安装到本地仓库,供其他项目使用

  6. caffe 测试时间报错 Aborted at unix time

    今天测试时间报错,具体如下图: 在网上查了一下,大概的原因是由于程序中使用了随机函数造成的,后来检查了一下prototxt中有可能含有随机数的地方,去掉之后就可以了,包括shuffle:true,以及 ...

  7. linux 查看磁盘读写:iotop

    iotop命令用来动态地查看磁盘IO情况,用法如下: 安装iotop命令 [root@mysql ~]# yum install iotop -y [root@mysql ~]# iotop Tota ...

  8. ansible进阶模板和角色使用

    使用场景 Ansible 由于采用ssh远程连接登录管理,虽然不需要额外安装agent,但是速度慢效率低.不适合管理大规模的主机一般最大规模在200-300台,超大规模的主机管理适合使用puppet ...

  9. HP1020打印机“传递给系统调用的数据区域太小” 如何处理?

    如果电脑上曾经安装过 HP LaserJet 激光打印机的驱动程序,重新安装驱动程序之前,需要完全卸载以前安装的驱动程序,否则可能会出现无法找到设备或者安装不上驱动程序的现象. 安装网站下载的即插即用 ...

  10. Redis入门到高可用(三)——通用命令

    通用命令  参考 http://redisdoc.com/index.html 1. keys  #查看所有key 时间复杂度:O(N), N 为数据库中 key 的数量. 127.0.0.1:637 ...