在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. nodejs建立websocket通信

    依赖模块 nodejs-websocket 服务端 const ws = require('nodejs-websocket'); console.log('开始建立连接...'); const se ...

  2. Erlang调度器细节探析

    Erlang调度器细节探析 Erlang的很多基础特性使得它成为一个软实时的平台.其中包括垃圾回收机制,详细内容可以参见我的上一篇文章Erlang Garbage Collection Details ...

  3. 新建play项目eclipsify后导入eclipse后无法debug调试

    Error occurred during initialization of VMagent library failed to init: jdwpERROR: Cannot load this ...

  4. 利用QuickCHM制作chm

    CHM是一种常见的帮助文件格式,也是电子书的一种格式. 下面是使用QuickCHM制作chm的步骤: 1.先将所有的word文档存储为mht格式,点击,文件--另存为网页,如下 2.确保所有的word ...

  5. BZOJ 3040: 最短路(road) [Dijkstra + pb_ds]

    3040: 最短路(road) Time Limit: 60 Sec  Memory Limit: 200 MBSubmit: 2476  Solved: 814[Submit][Status][Di ...

  6. 初识RESTful

    前言:两个月没写博客了,我真是太贱了哈哈.先简单说下我这两个月做了啥吧.8月26号从BIGO离职,回学校准备秋招.9月初时才发现已经错过秋招内推时间,其实秋招内推拿offer是有较大概率的.9月才开始 ...

  7. Golang Linux Shell编程（一）

    1.调用系统命令 exec包执行外部命令,它将os.StartProcess进行包装使得它更容易映射到stdin和stdout,并且利用pipe连接i/o func Command(name stri ...

  8. ACE-6.1.0 linux 下的编译与安装步骤

    ACE-6.1.0 linux 下的编译与安装步骤  引用至http://www.cnblogs.com/liangxiaxu/archive/2013/03/07/2948417.html 1.从  ...

  9. Swift百万线程攻破单例（Singleton)模式

    一.不安全的单例实现 在上一篇文章我们给出了单例的设计模式,直接给出了线程安全的实现方法.单例的实现有多种方法,如下面: class SwiftSingleton { class var shared ...

  10. Go学习笔记02-源码

    第二部分 源码 基于 Go 1.4,相关文件位于 src/runtime 目录.文章忽略了 32bit 代码,有兴趣的可自行查看源码文件.为便于阅读,示例代码做过裁剪. 1. Memory Alloc ...