在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. 【转】Robust regression（稳健回归）

    Robust regression(稳健回归) 语法 b=robustfit(X,y) b=robustfit(X,y,wfun,tune) b=robustfit(X,y,wfun,tune,con ...

  2. 【转】利用matlab生成随机数函数

    原文地址:利用matlab生成随机数函数 rand(n):生成0到1之间的n阶随机数方阵  rand(m,n):生成0到1之间的m×n的随机数矩阵 (现成的函数) betarnd:贝塔分布的随机数生成 ...

  3. 各模拟器adb连接端口

    如果执行自动化测试,在没有真机的情况下,我们唯一的选择便是模拟器.目前市面上有很多模拟器,他们使用adb连接时都会有不同的默认接口,当adb无法自动连接模拟器时,手动使用ip+端口连接是很好的选择.下 ...

  4. Android图像数据传递到C++的一些坑

    最近在做一个Android图象识别的app, 通过相机预览或者是拍照功能获取图像数据,然后将图像数据传递到本地C++的图像识别so库.在这个过程中花的时间最多的就是数据传输问题.谨以此坑,警示未来!  ...

  5. oracle pl/sql如何定义变量

    目的:如何在pl/sql中定义基本类型,引用类型,记录型变量? 以下plsql程序用的scott用户的dept,emp表. 定义基本类型的变量 set serveroutput on ; --使用基本 ...

  6. int main()还是void main()

    按照新的C99标准,即使函数本身没有定义返回值,编译器也会加上,以返回给激发程序,运行状态.很多人甚至市面上的一些书籍,都使用了void main( ) ,其实这是错误的.C/C++ 中从来没有定义过 ...

  7. poj2479 最大子段和

    题意:给定一个数列.求出数列中不相交的两个子段和,要求和最大 解题思路:对每一个i来说,求出[0-i-1]的最大子段和以及[i-n-1]的最大子段和,再加起来,求出最大的一个.[0-i-1]的最大子段 ...

  8. COGNOS安装与发布报表步骤

    1. 安装 1.1安装前准备 安装COGNOS需要先安装好iis和sql Server(因为我们用的数据库系统就是SQLServer). 1.2安装过程 1)    找到BI Server文件 2)  ...

  9. 结合apache安装subversion

    ########下载源代码包##########wget http://subversion.tigris.org/downloads/subversion-1.6.15.tar.gz;wget ht ...

  10. AutoDesk Forge 获取令牌认证

    创建应用程序 在开始使用Forge Platform之前,您需要设置一个应用程序并获取您的客户端ID和密码. 步骤1:登录Dev Portal 去开发门户网站:https://developer.au ...