在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. dubbo扩展http协议后FullGC

    问题 dubbo内部定制的版本中,在处理大于10K的包的时候,会出现内存溢出的现象 原因是我们在定制dubbo http协议的时候,使用了jboss包里面的HttpRequestDecoder的htt ...

  2. exif.js 旋转图片

    还是那个问题:网上的大胸弟们BB一大堆,没几个给的代码能用的,话不多说,直接上demo: 链接:https://pan.baidu.com/s/1jJ6vnt8 密码:swwm 不要忽视demo中的s ...

  3. Spring MVC执行的流程

    1.Spring MVC应用的开发步骤 a.在web.xml文件中定义前端控制器DispatcherServlet来拦截用户请求.由于Web应用是基于请求/响应架构的应用,所以 不管哪个MVC Web ...

  4. 解决在Ubuntu系统下用matplotlib作图时出现中文乱码问题

    今天在jupyter notebook中画图时,中文不能正常显示,如下图所示: 在此记录一下解决的办法. 1.找到matplotlib配置文件的位置 import matplotlib print(m ...

  5. WPF中，多key值绑定问题，一个key绑定一个界面上的对象

    问题说明: 当用到dictionary<key,value>来储存数据的时候,有时候需要在界面上绑定一个key来显示value,这时候有两种思路: 一种是写一个自定义的扩展类,类似Bind ...

  6. ABP官方文档翻译 3.7 领域事件(事件总线)

    领域事件(事件总线) 事件总线 注入IEventBus 获取默认实例 定义事件 预定义事件 处理异常 实体更改 触发事件 处理事件 处理基础事件 处理者异常 处理多个事件 注册处理者 自动 手动 取消 ...

  7. 深入理解Python字符编码--转

    http://blog.51cto.com/9478652/2057896 不论你是有着多年经验的 Python 老司机还是刚入门 Python 不久,你一定遇到过UnicodeEncodeError ...

  8. console引起的eclipse 僵死/假死 问题排查及解决[转]

    原文链接:http://www.iteye.com/topic/1133941 症状: 使用Eclipse win 64位版本,indigo及kepler都重现了,使用tomcat 6.0.39,jd ...

  9. JMS基础篇

    首先我们需要下载 ActiveMQ:http://activemq.apache.org/. 启动 ActiveMQ 服务:解包下载的 ActiveMQ >进去其bin 目录>双击 act ...

  10. 夏令营提高班上午上机测试 Day 3 解题报告

    今天的题的确水.T3还是一道NOIP原题. 嘛,多刷点水题也不是什么坏事嘛. 说来也快,夏令营结束了整一星期了呢.大家也都回到了日常的暑假生活呢. 今天学业水平测试出成绩了...嗯结果还算满意呢,至少 ...