css动画--元素上下跳动
在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动画--元素上下跳动的更多相关文章
- css动画-音频跳动
css动画-音频跳动 ---------------------------------------------------------------------------- ------------ ...
- js监听指定元素的css动画属性
MDN 监听css动画,开始,迭代次数,结束,中断 回调函数返回 animationEvent属性 <!DOCTYPE html> <html> <head> &l ...
- 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
- Css 动画的回调
在做项目中经常会遇到使用动画的情况.以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果.虽然后者解决了刷新频率 ...
- 【译】css动画里的steps()用法详解
原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它 ...
- css动画属性性能
性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...
- Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
- css动画与js动画的区别
CSS动画 优点: (1)浏览器可以对动画进行优化. 1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...
- CSS动画与GPU
写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...
随机推荐
- JS获取滚动条距离顶部高度
一.jQuery获取的相关方法 jquery 获取滚动条高度 获取浏览器显示区域的高度 : $(window).height(); 获取浏览器显示区域的宽度 : $(window).width(); ...
- 将centos_yum源更换为阿里云(官方文档)
http://mirrors.aliyun.com/help/centos?spm=5176.bbsr150321.0.0.d6ykiD 1.备份 mv /etc/yum.repos.d/CentOS ...
- HTTP基本知识
1.TCP/IP 传输控制协议/因特网互联协议 (1)应用层:决定向用户提供应用服务时通信的活动(FTP.DNS和HTTP都属于该层). (2)传输层:提供处于网络连接中的两台计算机之间的数据传输(T ...
- dubbo扩展http协议后FullGC
问题 dubbo内部定制的版本中,在处理大于10K的包的时候,会出现内存溢出的现象 原因是我们在定制dubbo http协议的时候,使用了jboss包里面的HttpRequestDecoder的htt ...
- Erlang调度器细节探析
Erlang调度器细节探析 Erlang的很多基础特性使得它成为一个软实时的平台.其中包括垃圾回收机制,详细内容可以参见我的上一篇文章Erlang Garbage Collection Details ...
- centos 编译安装net-snmp 5.6.2
1.准备环境 yum -y install make gcc gcc-c++ gcc-g77 openssl openssl-devel 常用lib安装可参照本文 2.编译和安装 首先我们需要下载Ne ...
- 【AIX】AIX内存机制
[AIX]AIX内存机制 1 虚拟内存 虚拟内存是物理内存和交换空间(Paging Space)组合形成的虚拟内存空间, 通过虚拟的地址空间映射到物理内存或者 Paging Space. 在 AIX ...
- BZOJ 3991: [SDOI2015]寻宝游戏 [虚树 树链的并 set]
传送门 题意: $n$个点的树,$m$次变动使得某个点有宝物或没宝物,询问每次变动后集齐所有宝物并返回原点的最小距离 转化成有根树,求树链的并... 两两树链求并就可以,但我们按照$dfs$序来两两求 ...
- 乞丐版servlet容器第1篇
本系列参照pkpk1234大神的BeggarServletContainer,具体请访问:https://github.com/pkpk1234/BeggarServletContainer. 一步一 ...
- Java多线程应用总结
一.基本方法 进程和线程一样,都是实现并发的一个基本单位.线程是比进程更小的执行单位,线程是在进程的基础上进行的进一步划分.所谓多线程,是指一个进程在执行过程中可以产生多个更小的程序单元,这些更小的单 ...