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. macOS 10.12.1 + Xcode 8.1 安装cocoapods 1.1.1

    最近公司刚给配了一台27寸的iMac,5K屏幕,这酸爽~~,新电脑,免不了系统升级,环境搭建,当一切就绪之后,我就准备装cocoapods了,然而,以前所有的教程全部都变得没用了...然而网上一大堆关 ...

  2. 一些意想不到的小bug。

    一,当if的时候,很容易忘记相对的else,从而出现bug,要将背面消息考虑全面. 二,多个元素在同一行布局的时候,要考虑文字的换行还是省略号代替. 例如:左边一个文字,宽度不固定,右边一个图形,宽度 ...

  3. 树形DP【洛谷P3047】 [USACO12FEB]附近的牛Nearby Cows

    P3047 [USACO12FEB]附近的牛Nearby Cows 农民约翰已经注意到他的奶牛经常在附近的田野之间移动.考虑到这一点,他想在每一块土地上种上足够的草,不仅是为了最初在这片土地上的奶牛, ...

  4. kuangbin专题七 ZOJ1610 Count the Colors （灵活线段树）

    Painting some colored segments on a line, some previously painted segments may be covered by some th ...

  5. C语言预处理命令之文件包含

    文件包含预处理命令的一般形式是: #include<文件名> 或者 #include“文件名” #include命令告诉预处理器用指定文件的内容替换这条命令,两种不同的命令格式决定了预处理 ...

  6. 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_类型的各种成员

    [Class中,可能包含的成员] 常量, 字段, 实例构造器, 类型构造器, 方法, 操作符重载, 转换操作符, 属性, 事件, 类型(Class)

  7. js学习笔记 -- Promise

    Promise new Promise( function(resolve, reject) {...} /* executor */  ); executor是带有 resolve 和 reject ...

  8. jmeter使用总结

    1.1 什么是 JMeter Apache JMeter 是 Apache 组织开发的基于 Java 的压力测试工具.用于对软件做压力测试,它最初被设计用于 Web 应用测试,但后来扩展到其他测试领域 ...

  9. leetcode 437. 路径总和 III

    题目描述: 给定一个二叉树,它的每个结点都存放着一个整数值. 找出路径和等于给定数值的路径总数. 路径不需要从根节点开始,也不需要在叶子节点结束,但是路径方向必须是向下的(只能从父节点到子节点). 二 ...

  10. protobuf在c++的使用方法以及在linux安装

      https://blog.csdn.net/wangyin668/article/details/80046798 https://www.cnblogs.com/zhouyang209117/p ...