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的更多相关文章

  1. css3 transition animation nick

    时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...

  2. css3中Animation

    CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...

  3. 第100天：CSS3中animation动画详解

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由“keyframes”这个属性来 ...

  4. 模仿百度首页“元宵节汤圆”动图，并实现360°不停旋转（CSS3的animation动画效果）

    模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...

  5. CSS3 & transition & animation

    CSS3 & transition & animation https://developer.mozilla.org/en-US/docs/Web/CSS/transition-ti ...

  6. 前端CSS3动画animation用法

    前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...

  7. 【巩固】CSS3的animation基础

    终于结束了最后css3的一节课,关于animation的使用,其实之前已经用过一次.大致要了解的就是,关于如何让动画停在最后一帧的方法.视频里有提到过css3出了个新的样式可以实现,但是老师没有记住, ...

  8. CSS3 动画animation

    关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...

  9. Html5+Css3 Banner Animation 多方位移动特效

    背景:朋友问我小米官网的mi4的特效会做吗,可能新接的一个小网站需要用到.一直有打算研究H5C3的一些效果,趁此机会,赶紧学习一下! 效果:如图 素材 HTML: <div class=&quo ...

  10. css3 动画(animation)-简单入门

    css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...

随机推荐

  1. java 的开发工具IDEA使用 中Debug 调试工具使用

    IDEA JetBrains(这个公司的名称翻译过来就是“大脑喷射?”) 公司的宣传语是这么说的:Develop with pleasure!(带着快乐开发!)   话不多说 开始debug   1, ...

  2. vue四、实例

    1.new Vue创建根实例 2.data对象,所有的属性加入到 Vue 响应式系统-值发生改变时,视图自动变更为新值 只有实例被创建时存在的属性才会响应式改变,后增加的不会 vue定义的实例属性和方 ...

  3. mysql不支持emoji表情的问题的解决方法

    最近财神圈项目集成微信登录功能的过程中,当保存用户有昵称含有表情符号时后台服务抛出异常,原来是数据库默认字符集不支持emoji表情字符.找到问题的原因后,因为之前也没有遇到过这样的问题,也没思路,迅速 ...

  4. java Pattern和Matcher完全解析

    基本使用: 本文不讲解正则表达式,需要请看API Scanner中的使用正则表达式 //Scanner 支持的分组 Scanner cin=new Scanner("red a bbc&qu ...

  5. BestCoder Round #64 1002

    Sum  Accepts: 322  Submissions: 940  Time Limit: 2000/1000 MS (Java/Others)  Memory Limit: 65536/655 ...

  6. SQL 行转列的两种做法

    if object_id('tb')is not null drop table tbGocreate table tb(姓名 varchar(10),课程 varchar(10),分数 int)in ...

  7. Problem08 输入数字求和

    题目:求s=a+aa+aaa+aaaa+aa...a 的值,其中a 是一个数字.例如2+22+222+2222+22222(此时共有5 个数相加),几个数相加有键盘控制. 程序分析:关键是计算出每一项 ...

  8. vue首次赋值不触发watch（deep immediate handler）

    deep:默认值是 false,代表是否深度监听.immediate:true代表如果在 wacth 里声明了之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样, ...

  9. Django-4 模板层

    你可能已经注意到我们在例子视图中返回文本的方式有点特别. 也就是说,HTML被直接硬编码在 Python代码之中. def current_datetime(request): now = datet ...

  10. 性能测试工具LoadRunner30-LR之监控Tomcat

    步骤: 1.通过LR去访问tomcat监控页(安装tomcat的过程可以百度一下) 2.然后通过关联取监控数据 3.通过lr_user_data_point()添加数据到图表中去 double ato ...