在H5场景动画时，常常会用到着一样一个效果，箭头持续上下跳动来引导用户上下滑动整个页面

<!DOCTYPE html >

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>css动画--元素上下跳动</title>

        <style type="text/css">

        @-webkit-keyframes bounce-down {

         25% {-webkit-transform: translateY(-10px);}

         50%, 100% {-webkit-transform: translateY(0);}

         75% {-webkit-transform: translateY(10px);}

        }

        @keyframes bounce-down {

         25% {transform: translateY(-10px);}

         50%, 100% {transform: translateY(0);}

         75% {transform: translateY(10px);}

        }

        .animate-bounce-down{ background:#333; width: 100px; height: 100px; margin:100px auto;-webkit-animation: bounce-down 1.5s linear infinite;animation: bounce-down 1.5s linear infinite;

        }

        @-webkit-keyframes bounce-up {

         25% {-webkit-transform: translateY(10px);}

         50%, 100% {-webkit-transform: translateY(0);}

         75% {-webkit-transform: translateY(-10px);}

        }

        @keyframes bounce-up {

         25% {transform: translateY(10px);}

         50%, 100% {transform: translateY(0);}

         75% {transform: translateY(-10px);}

        }

        .animate-bounce-up{ background:#ddd; width: 100px; height: 100px; margin:100px auto;-webkit-animation: bounce-up 1.4s linear infinite;animation: bounce-up 1.4s linear infinite;}

        </style>

    </head>

    <body>

        <div class="animate-bounce-up"></div>

        <div class="animate-bounce-down"></div>

    </body>

</html>

css动画--元素上下跳动的更多相关文章

  1. css动画-音频跳动

    css动画-音频跳动 ---------------------------------------------------------------------------- ------------ ...

  2. js监听指定元素的css动画属性

    MDN 监听css动画,开始,迭代次数,结束,中断 回调函数返回 animationEvent属性 <!DOCTYPE html> <html> <head> &l ...

  3. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

  4. Css 动画的回调

    在做项目中经常会遇到使用动画的情况.以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果.虽然后者解决了刷新频率 ...

  5. 【译】css动画里的steps()用法详解

    原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它 ...

  6. css动画属性性能

    性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...

  7. Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  8. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  9. CSS动画与GPU

    写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...

随机推荐

  1. 学会配置nginx

    一.作为一名开发人员,大家可能经常会用到服务器,但是一般线上的服务器可能都是公司公用的,而且线上的服务器一般也不是能随随便便给个人用的,所以部署本地服务器看来是一遍必不可少的事情和能力呀,所以,ngi ...

  2. matlab输入输出语句（input、disp、fprintf）

    输入语句 输入数值 ?x=input('please input a number:') please input a number:22 x = 22 输入字符串 ?x=input('please ...

  3. 【转】awk 数组用法【精华贴】

    文本处理的工作中,awk的数组是必不可少的工具,在这里,同样以总结经验和教训的方式和大家分享下我的一些学习心得,如有错误的地方,请大家指正和补充. awk的数组,一种关联数组(Associative ...

  4. SQL Server判断小数位数

    项目中需要写一规则,目的是判断数值的小数位数,可以分为2中情况. 1.直接以小数点为分界点,小数点后的数据表示小数的位数,此种情况比较简单,直接使用CHARINDEX函数就可以搞定 其中CHARIND ...

  5. 删除一个目录及其子目录下的所有.svn文件

    今天建立svn,加入代码,发现这些个文件夹中竟然已经有.svn文件夹,也就是它以前使用过svn, 这下就有点麻烦,在全新的svn里,这些.svn需要删除,又不可能一个一个手工去删除 网上翻了一下,发现 ...

  6. 为MySQL选择合适的备份方式[转]

    原文链接:http://nettedfish.sinaapp.com/blog/2013/05/31/choose-suitable-backup-strategy-for-mysql/ 数据库的备份 ...

  7. 有标号DAG计数 [容斥原理 子集反演 组合数学 fft]

    有标号DAG计数 题目在COGS上 [HZOI 2015]有标号的DAG计数 I [HZOI 2015] 有标号的DAG计数 II [HZOI 2015]有标号的DAG计数 III I 求n个点的DA ...

  8. 理解Java Integer的缓存策略【转】

    本文由 ImportNew - 挖坑的张师傅 翻译自 javapapers.欢迎加入翻译小组.转载请见文末要求. 本文将介绍 Java 中 Integer 缓存的相关知识.这是 Java 5 中引入的 ...

  9. python学习：调用其他函数

    vim wc.py   #!/usr/bin/python   def wordCount(s):     chars = len(s)     words = len(s.split())     ...

  10. vs code 使用git

    1.下载git https://git-scm.com/ 2. git 全局设置 git config --global user.name "xxxx" git config - ...