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方法来做 ...
随机推荐
- ios swift 打造自己的http请求工具
在ios开发中,网络请求是不可以少的,说到网络请求可能用的最多的就是第三方的比人比较有名的AFNetworking.Alamofire等,原生的用的少.今天就用ios提供的原生方法来打造属于自己的一个 ...
- iOS 11 ScrollView偏移问题解决
if (@available(iOS 11.0, *)){//避免滚动视图顶部出现20的空白以及push或者pop的时候页面有一个上移或者下移的异常动画的问题 [[UIScrollView appea ...
- luogu4449 于神之怒加强版(莫比乌斯反演)
link 给定n,m,k,计算\(\sum_{i=1}^n\sum_{j=1}^m\gcd(i,j)^k\)对1000000007取模的结果 多组数据,T<=2000,1<=N,M,K&l ...
- NOIP2018初赛总结(提高组)（试题+答案+简要解析）
NOIP2018初赛总结(提高组) 更新完毕(纯手敲),如果有错误请在下面留言 单选题 T1.下列四个不同进制的数中,与其它三项数值上不相等的是 A.\((269)_{16}\) B.\((617)_ ...
- C# 实现retry
C# 有try-catch ,但是没有retry 功能,通过用有限次循环的办法来模拟Retry,当然中间需要加一个等待的过程. 我们可以利用C#的匿名方法(anonymous methods)和匿名委 ...
- [WebShow系列] 需求及环境的确定
需求及环境确定: 主题标语 选手人数 评委人数 打分方式 合计算法 名次算法 大屏数量 大屏分辨率 电脑配置 切换设备 评委人员配备 技术人员配备 现场网速情况 评委移动端配备 场次数量 场次时间 选 ...
- flex item的width VS flex-basis
flexbox的子元素flex item的宽度,按照以下规则计算: content>width>flex-basis(limited by max/min-width) flex-basi ...
- day_03 字符串
1.python基础数据类型 1.int整数 2.str 字符串.(不会用字符串保存大量数据) 3.bool 布尔值. TRUE,FALSE 4.list 列表(重点) 存放大量数据 用[]表示 5. ...
- ButterKnife 8.4注入失败
1,第一步:项目的gradle中增加 classpath 'com.neenbedankt.gradle.plugins:android-apt:1.8'buildscript { repositor ...
- 非局部均值(Nonlocal-Mean)
转载自网站:http://www.cnblogs.com/luo-peng/p/4785922.html 非局部均值去噪(NL-means) 非局部均值(NL-means)是近年来提出的一项新型的 ...