在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. 让Python支持中文注释

    在第一行中加入如下行即可,表示文件的编码: #coding=utf-8 或 #coding=gbk

  2. linux 搭建PPTP

    pptp简介 PPTP,Point to Point Tunneling Protocol,点对点隧道协议,这是一种支持多协议虚拟专用网络(VPN)技术.远程用户能够通过装有点对点协议的系统安全访问公 ...

  3. oracle光标的使用

    以下plsql程序用的scott用户的dept,emp表. 1.光标的使用: --查询并打印员工的姓名名和薪水 /* 光标属性: %found %notfound */ set serveroutpu ...

  4. [DeeplearningAI笔记]ML strategy_1_1正交化/单一数字评估指标

    机器学习策略 ML strategy 觉得有用的话,欢迎一起讨论相互学习~Follow Me 1.1 什么是ML策略 机器学习策略简介 情景模拟 假设你正在训练一个分类器,你的系统已经达到了90%准确 ...

  5. [DeeplearningAI笔记]改善深层神经网络_优化算法2.6_2.9Momentum/RMSprop/Adam优化算法

    Optimization Algorithms优化算法 觉得有用的话,欢迎一起讨论相互学习~Follow Me 2.6 动量梯度下降法(Momentum) 另一种成本函数优化算法,优化速度一般快于标准 ...

  6. ASP.NET控件GridView的使用& Xml操作注意事项

    更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢!   原文链接:http://www.cnblogs.com/zishi/p/6729478.html 文章主要内容 ...

  7. Hadoop学习笔记三

    一.设置HDFS不进行权限检查 默认的HDFS上的文件类似于Linux中的文件,是有权限的.例如test用户创建的文件,root用户如果没有写权限,则不能进行删除. 有2种办法进行修改,修改文件的权限 ...

  8. BZOJ 3624: [Apio2008]免费道路 [生成树 并查集]

    题意: 一张图0,1两种边,构造一个恰有k条0边的生成树 优先选择1边构造生成树,看看0边是否小于k 然后保留这些0边,补齐k条,再加1边一定能构成生成树 类似kruskal的证明 #include ...

  9. 常见HTTP状态码出现原因

    302:重定向.访问当前地址,后端重新指定一个URL,浏览器跳转到新的地址. 303:对于POST请求,它表示请求已被处理,客户端可以接着使用GET方法请求Location里的URL. 304:客户端 ...

  10. 洛谷P3369 【模板】普通平衡树（Treap/SBT）

    洛谷P3369 [模板]普通平衡树(Treap/SBT) 平衡树,一种其妙的数据结构 题目传送门 题目描述 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作: 插入x数 删除 ...