CSS3的Animation
1、animation-name ：动画名
2、animation-duration：时间
3、animation-delay：延时
4、animation-iteration-count：次数
5、 animation-direction：方向
6、 animation-play-state：控制
7、 animation-fill-mode：状态
8、 animation-timing-function：关键帧变化
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>圣诞主题</title>
<style type="text/css">
.bird {
min-width: 91px;
min-height: 71px;
top: 10%;
position: absolute;
z-index: 10;
background: url(http://img.mukewang.com/55ade1700001b38302730071.png)
}
.birdFly {
/*写法1*/
-moz-animation: bird-slow 400ms steps(1,start) infinite;
/*写法2*/
-webkit-animation-name: bird-slow;
-webkit-animation-duration: 400ms;
-webkit-animation-timing-function: steps(3);
-webkit-animation-iteration-count: infinite;
}
/*???*/
@keyframes bird-slow {
0% {background-position-x: -0px}
100% {background-position-x: -273px}
}
</style>
</head>
<body>
steps(3)实现帧动画
<div class="bird birdFly"></div>
</body>
<script type="text/javascript">
var docEl = document.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
//设置根字体大小
docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
};
//绑定浏览器缩放与加载时间
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);
</script>
</html>
CSS3的Animation的更多相关文章
- css3 transition animation nick
时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...
- css3中Animation
CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...
- 第100天：CSS3中animation动画详解
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由“keyframes”这个属性来 ...
- 模仿百度首页“元宵节汤圆”动图，并实现360°不停旋转（CSS3的animation动画效果）
模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...
- CSS3 & transition & animation
CSS3 & transition & animation https://developer.mozilla.org/en-US/docs/Web/CSS/transition-ti ...
- 前端CSS3动画animation用法
前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...
- 【巩固】CSS3的animation基础
终于结束了最后css3的一节课,关于animation的使用,其实之前已经用过一次.大致要了解的就是,关于如何让动画停在最后一帧的方法.视频里有提到过css3出了个新的样式可以实现,但是老师没有记住, ...
- CSS3 动画animation
关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...
- Html5+Css3 Banner Animation 多方位移动特效
背景:朋友问我小米官网的mi4的特效会做吗,可能新接的一个小网站需要用到.一直有打算研究H5C3的一些效果,趁此机会,赶紧学习一下! 效果:如图 素材 HTML: <div class=&quo ...
- css3 动画(animation)-简单入门
css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...
随机推荐
- C++基础学习7：new/delete操作符
在C语言中,动态分配和释放内存的函数是malloc.calloc和free,而在C++语言中,new.new[].delete和delete[]操作符通常会被用来动态地分配内存和释放内存. 需要注意的 ...
- Scene is unreachable due to lack of entry points and does not have an identifier for runtime access via -instantiateViewControllerWithIdentifier解决办法
使用Storyboard时出现以下警告: warning: Unsupported Configuration: Scene is unreachable due to lack of entry p ...
- HDU6315 Naive Operations（多校第二场1007）（线段树）
Naive Operations Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 502768/502768 K (Java/Other ...
- 钉钉jsapi免登获取code中，出现对应企业没有某域名微应用
在使用jsapi中.出现 {"errorMessage":"对应企业没有某域名微应用",:"errorCode":"3" ...
- MySQL 关联查询 外连接 { LEFT| RIGHT } JOIN
左外连接: (以左表为基准)两张表做连接的时候,在连接条件不匹配的时候留下左表中的数据,而右表中的数据以NULL填充例:使用左连接把学生的数据全取出来,该学生没有学院信息的用NULL填充 mysql& ...
- tomcat 修改根路径
修改setting.xml 在 </Host> 正上面 添加 <Context path="/" docBase="/TomExam" deb ...
- [ZJOI2018]历史（LCT）
这篇还发了洛谷题解 [Luogu4338] [BZOJ5212] 题解 题意 给出一棵树,给定每一个点的 \(access\) 次数,计算轻重链切换次数的最大值,带修改. 先考虑不带修改怎么做 假设 ...
- POJ2886Who Gets the Most Candies?(线段树之约瑟夫）
约瑟夫问题的升级版,每次出去的是前一个出去的人位置+手上的数字(正往前,负往后).第i个出去的人拿的糖是i的约数的个数.求拿糖最多的人和他的糖果数. 这里用到了反素数的知识,在这直接打表 题目 AC代 ...
- 互联网开发-web文件上传性能问题
1. 问题描述 文件大小 部署环境 平均上传速度 5M 外网 28s-36s 5M 公司局域内网 秒传,很快 2. 问题分析 在网上搜索“测速网”测试了一下公司外网的带宽情况: 上传带宽 = 1.04 ...
- spring boot 入参方式
方式: 1).直接写,如public User index2(String name) 2).@RequestParam 与直接写的区别是,可以写默认值. 3).@RequestBody 因为传入的是 ...