div {

     /* Chrome, Safari, Opera 等使用webkit引擎的浏览器*/

     -webkit-animation-name: myfirst; /*规定 @keyframes 动画的名称。*/

     -webkit-animation-duration: 5s;  /*规定动画完成一个周期所花费的秒或毫秒。默认是 0。*/

     -webkit-animation-timing-function: linear;/*设置动画的速度曲线,默认是 "ease"。*/

     -webkit-animation-delay: 2s; /*设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。*/

     -webkit-animation-iteration-count: infinite;/*规定动画被播放的次数。默认是 1。*/

     -webkit-animation-direction: alternate;/*设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。*/

     -webkit-animation-play-state: running;/*规定动画是否正在运行或暂停。默认是 "running"。*/

     /* Standard syntax */

     animation-name: myfirst;

     animation-duration: 5s;

     animation-timing-function: linear;

     animation-delay: 2s;

     animation-iteration-count: infinite;

     animation-direction: alternate;

     animation-play-state: running;

 }

可以缩写为

div {

    -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Chrome, Safari, Opera */

    animation: myfirst 5s linear 2s infinite alternate; /* Standard syntax */

}

补充：

animation-direction
设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。默认值normal不循环，reverse反向运行，alternate正常运行完后反向运行依次循环，alternate-reverse先反向运行后正常运行依次循环

http://www.w3schools.com/cssref/playit.asp?filename=playcss_animation-direction&preval=normal

animation-timing-function
设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化。可能值：

1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)；

2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)；

3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)；

4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0)；

5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)；

6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

http://www.w3school.com.cn/cssref/pr_animation-timing-function.asp

animation-fill-mode
指定动画执行前后如何为目标元素应用样式。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-fill-mode


例子中div至少要设置动画的名称和时长，然后在@keyframes中创建动画，绑定到div的选择器（动画名称）

@keyframes至少要创造两帧以上

完整例子：

<!DOCTYPE html>

<html>

<head>

<style>

div {

    width: 100px;

    height: 100px;

    background: red;

    position: relative;

    -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */

    animation: myfirst 5s;

}

/* Chrome, Safari, Opera */

@-webkit-keyframes myfirst {

    0%   {background:red; left:0px; top:0px;}

    25%  {background:yellow; left:200px; top:0px;}

    50%  {background:blue; left:200px; top:200px;}

    75%  {background:green; left:0px; top:200px;}

    100% {background:red; left:0px; top:0px;}

}

/* Standard syntax */

@keyframes myfirst {

    0%   {background:red; left:0px; top:0px;}

    25%  {background:yellow; left:200px; top:0px;}

    50%  {background:blue; left:200px; top:200px;}

    75%  {background:green; left:0px; top:200px;}

    100% {background:red; left:0px; top:0px;}

}

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>

</html>

旋转：

@-moz-keyframes rotate {

  from {

    -moz-transform: rotate(0deg);

  }

  to {

    -moz-transform: rotate(360deg);

  }

}

@-o-keyframes rotate {

  from {

    -o-transform: rotate(0deg);

  }

  to {

    -o-transform: rotate(360deg);

  }

}

@keyframes rotate {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(360deg);

  }

}

@-webkit-keyframes rotate {

  from {

    -webkit-transform: rotate(0deg);

  }

  to {

    -webkit-transform: rotate(360deg);

  }

}

摇摆：

@-moz-keyframes arm {

  from {

    -moz-transform: rotate(-4deg);

  }

  to {

    -moz-transform: rotate(4deg);

  }

}

@-o-keyframes arm {

  from {

    -o-transform: rotate(-4deg);

  }

  to {

    -o-transform: rotate(4deg);

  }

}

@keyframes arm {

  from {

    transform: rotate(-4deg);

  }

  to {

    transform: rotate(4deg);

  }

}

@-webkit-keyframes arm {

  from {

    -webkit-transform: rotate(-4deg);

  }

  to {

    -webkit-transform: rotate(4deg);

  }

}

css3-transform:

http://www.w3cplus.com/content/css3-transform

CSS Animation的更多相关文章

  1. CSS魔法堂：更丰富的前端动效by CSS Animation

    前言  在<CSS魔法堂:Transition就这么好玩>中我们了解到对于简单的补间动画,我们可以通过transition实现.那到底多简单的动画适合用transtion来实现呢?答案就是 ...

  2. CSS Animation triggers text rendering change in Safari

    薄荷新首页上周五内测,花哥反馈在 MacBook Safari 浏览器下 鼠标移动到第一个商品的时候后面几个商品的文字会加粗.这是什么鬼??? 待我回到家打开笔记本,鼠标蹭蹭蹭的发现问题远不止如此: ...

  3. No.6 - 利用 CSS animation 制作一个炫酷的 Slider

    *{ margin:; padding:; } div{ margin: auto; width: 800px; height: 681px; position: relative; overflow ...

  4. [CSS3] Make a One-time CSS Animation that Does Not Revert to its Original Style

    We'll add animation to patio11bot using CSS keyframes. When defining a CSS animation, you can add it ...

  5. 利用 CSS animation 和 CSS sprite 制作动画

    CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...

  6. 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider

    前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...

  7. css animation @keyframes 动画

    需求:语音播放动态效果 方案:使用如下图片,利用 css animation @keyframes  做动画 html <span class="horn" :class=& ...

  8. Apple CSS Animation All In One

    Apple CSS Animation All In One Apple Watch CSS Animation https://codepen.io/xgqfrms/pen/LYZaNMb See ...

  9. css animation & animationend event & onanimationend

    css animation & animationend event & onanimationend https://developer.mozilla.org/en-US/docs ...

  10. css animation & animation-fill-mode

    css animation & animation-fill-mode css animation effect https://developer.mozilla.org/en-US/doc ...

随机推荐

  1. PE文件学习系列二 DOS头分析

    合肥程序员群:49313181.    合肥实名程序员群 :128131462 (不愿透露姓名和信息者勿加入)Q  Q:408365330     E-Mail:egojit@qq.com PE文件结 ...

  2. Tomcat（免安装版）的安装与配置

    一.下载Tomcat Tomcat可以从http://tomcat.apache.org/网站下载,选择任意版本,在 Binary Distributions 下的zip包既是. 二.配置Tomcat ...

  3. 深入浅出Mybatis系列（四）---配置详解之typeAliases别名（mybatis源码篇）

    上篇文章<深入浅出Mybatis系列(三)---配置详解之properties与environments(mybatis源码篇)> 介绍了properties与environments, ...

  4. 纯JS 将table表格导出到excel

    html <div > <button type="button" onclick="getXlsFromTbl('tableExcel','myDiv ...

  5. SSM框架学习之高并发秒杀业务--笔记5-- 并发优化

    前几节终于实现了这个高并发秒杀业务,现在问题是如何优化这个业务使其能扛住一定程度的并发量. 一. 优化分析 对于整个业务来说,首先是分析哪些地方会出现高并发,以及哪些地方会影响到了业务的性能.可能会出 ...

  6. css中的一些概念

    1.伪类与伪元素 1.单冒号(:)用于 CSS3 伪类,双冒号(::)用于 CSS3 伪元素. 2.对于 CSS2 中已经有的伪元素,例如 :before,单冒号和双冒号的写法 ::before 作用 ...

  7. golang使用 mongo

    连接集群 mongodb://[username:password@]host1[:port1][,host2[:port2],...[,hostN[:portN]]][/[database][?op ...

  8. WebApi系列~基于RESTful标准的Web Api

    微软的web api是在vs2012上的mvc4项目绑定发行的,它提出的web api是完全基于RESTful标准的,完全不同于之前的(同是SOAP协议的)wcf和webService,它是简单,代码 ...

  9. Windows中一个22年的漏洞

     X Windows系统,今天作为世界各地的Linux桌面,已经存在超过20年了,仍然存在Bug.几天前Sysadmins为libXfont库提供了补丁,来对应新发现的已经在代码中存在了22年的特权升 ...

  10. 【Python⑥】python的缩进，条件判断和循环

    缩进 Python的最大特色是用缩进来标明成块的代码. 这点和其他语言区别很明显,比如大家熟悉的C语言里: ) { num+=; flag-=; } 而在python中: if flag>= 0 ...