http://www.w3chtml.com/css3/rules/@keyframes.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>@keyframes_CSS参考手册_web前端开发参考手册系列</title>
<style>
#sport{position:relative;width:500px;height:400px;border:1px solid #ddd;}
#staff{position:absolute;z-index:3;bottom:10px;left:10px;overflow:hidden;width:180px;height:8px;border-radius:3px;background:#ddd;line-height:20;
 -moz-animation:staff 3s linear;
 -webkit-animation:staff 3s linear;
 -o-animation:staff 3s linear;
 -ms-animation:staff 3s linear;
 animation:staff 3s linear;
}
#ball{position:absolute;z-index:3;bottom:20px;left:90px;overflow:hidden;width:30px;height:30px;border-radius:15px;box-shadow:0 0 10px rgba(204,102,0,.8);background:#F6D66E;background:-moz-linear-gradient(top,#fff,#F6D66E);background:-webkit-linear-gradient(top,#fff,#F6D66E);background:-o-linear-gradient(top,#fff,#F6D66E);background:-ms-linear-gradient(top,#fff,#F6D66E);background:linear-gradient(top,#fff,#F6D66E);line-height:20;
 -moz-animation:ball 3s linear;
 -webkit-animation:ball 3s linear;
 -o-animation:ball 3s linear;
 -ms-animation:ball 3s linear;
 animation:ball 3s linear;
}
@-moz-keyframes ball{
 0%{-moz-transform:translate(0,0);}
 5%{-moz-transform:translate(-90px,-100px);}
 18%{-moz-transform:translate(0,-350px);}
 35%{-moz-transform:translate(200px,0);}
 46%{-moz-transform:translate(380px,-160px);}
 60%{-moz-transform:translate(250px,-350px);}
 78%{-moz-transform:translate(60px,0);}
 100%{-moz-transform:translate(0,0);}
}
@-webkit-keyframes ball{
 0%{-webkit-transform:translate(0,0);}
 5%{-webkit-transform:translate(-90px,-100px);}
 18%{-webkit-transform:translate(0,-350px);}
 35%{-webkit-transform:translate(200px,0);}
 46%{-webkit-transform:translate(380px,-160px);}
 60%{-webkit-transform:translate(250px,-350px);}
 78%{-webkit-transform:translate(60px,0);}
 100%{-webkit-transform:translate(0,0);}
}
@-o-keyframes ball{
 0%{-o-transform:translate(0,0);}
 5%{-o-transform:translate(-90px,-100px);}
 18%{-o-transform:translate(0,-350px);}
 35%{-o-transform:translate(200px,0);}
 46%{-o-transform:translate(380px,-160px);}
 60%{-o-transform:translate(250px,-350px);}
 78%{-o-transform:translate(60px,0);}
 100%{-o-transform:translate(0,0);}
}
@-ms-keyframes ball{
 0%{-ms-transform:translate(0,0);}
 5%{-ms-transform:translate(-90px,-100px);}
 18%{-ms-transform:translate(0,-350px);}
 35%{-ms-transform:translate(200px,0);}
 46%{-ms-transform:translate(380px,-160px);}
 60%{-ms-transform:translate(250px,-350px);}
 78%{-ms-transform:translate(60px,0);}
 100%{-ms-transform:translate(0,0);}
}
@keyframes ball{
 0%{transform:translate(0,0);}
 5%{transform:translate(-90px,-100px);}
 18%{transform:translate(0,-350px);}
 35%{transform:translate(200px,0);}
 46%{transform:translate(380px,-160px);}
 60%{transform:translate(250px,-350px);}
 78%{transform:translate(60px,0);}
 100%{transform:translate(0,0);}
}
@-moz-keyframes staff{
 0%{-moz-transform:translate(0,0);}
 6%{-moz-transform:translate(260px,0);}
 20%{-moz-transform:translate(300px,0);}
 30%{-moz-transform:translate(300px,0);}
 40%{-moz-transform:translate(200px,0);}
 65%{-moz-transform:translate(40px,0);}
 79%{-moz-transform:translate(0,0);}
 100%{-moz-transform:translate(0,0);}
}
@-webkit-keyframes staff{
 0%{-webkit-transform:translate(0,0);}
 6%{-webkit-transform:translate(260px,0);}
 20%{-webkit-transform:translate(300px,0);}
 30%{-webkit-transform:translate(300px,0);}
 40%{-webkit-transform:translate(200px,0);}
 65%{-webkit-transform:translate(40px,0);}
 79%{-webkit-transform:translate(0,0);}
 100%{-webkit-transform:translate(0,0);}
}
@-o-keyframes staff{
 0%{-o-transform:translate(0,0);}
 6%{-o-transform:translate(260px,0);}
 20%{-o-transform:translate(300px,0);}
 30%{-o-transform:translate(300px,0);}
 40%{-o-transform:translate(200px,0);}
 65%{-o-transform:translate(40px,0);}
 79%{-o-transform:translate(0,0);}
 100%{-o-transform:translate(0,0);}
}
@-ms-keyframes staff{
 0%{-ms-transform:translate(0,0);}
 6%{-ms-transform:translate(260px,0);}
 20%{-ms-transform:translate(300px,0);}
 30%{-ms-transform:translate(300px,0);}
 40%{-ms-transform:translate(200px,0);}
 65%{-ms-transform:translate(40px,0);}
 79%{-ms-transform:translate(0,0);}
 100%{-ms-transform:translate(0,0);}
}
@keyframes staff{
 0%{transform:translate(0,0);}
 6%{transform:translate(260px,0);}
 20%{transform:translate(300px,0);}
 30%{transform:translate(300px,0);}
 40%{transform:translate(200px,0);}
 65%{transform:translate(40px,0);}
 79%{transform:translate(0,0);}
 100%{transform:translate(0,0);}
}
</style>
</head>
<body>
<div id="sport">
 <span id="ball">弹球</span>
 <span id="staff">滑杆</span>
</div>
</body>
</html>

CSS3 @keyframes 语法的更多相关文章

  1. CSS3 @keyframes 规则

    今天来给大家分享一下CSS3 @keyframes 规则! 在你了解CSS3 @keyframes 规则时我先来给大家说说什么是css3中的动画 动画是使元素从一种样式逐渐变化为另一种样式的效果. 您 ...

  2. css3 @keyframes、transform详解与实例

    一.transform 和@keyframes动画的区别: @keyframes动画是循环的,而transform 只执行一遍. 二.@keyframes CSS3中添加的新属性animation是用 ...

  3. CSS3 @keyframes 动画

    CSS3的@keyframes,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3的动画属性 下面的表格列出了 @keyframes 规则和所有动画属性: 浏览器支持 表 ...

  4. animation css3动画与CSS3 @keyframes担配使用创建往复平缓动画

    通过 @keyframes 规则,您能够创建动画. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式. 在动画过程中,您能够多次改变这套 CSS 样式. 以百分比来规定改变发生的时间,或者通 ...

  5. CSS3 keyframes动画实现弹跳效果

    首先,“回到顶部”.“用户反馈”这两个按钮是通过定位放在左下角上. (1)“回到顶部”的按钮只有当滚动条有出现下滑时才出现 (2)“用户反馈”按钮,用户刚打开时会抖动一下,引起用户的注意,然后才定住. ...

  6. CSS3 @keyframes 用法（简单动画实现）

    定义: 通过 @keyframes 规则,能够创建动画. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式. 在动画过程中,可以多次改变这套 CSS 样式. 以百分比来规定改变发生的时间,或 ...

  7. CSS3 - @keyframes

    语法 @keyframes animationname { keyframes-selector {css-styles;} } 值 描述 animationname 必需.定义动画的名称. keyf ...

  8. css3 @keyframes用法

    使用@keyframes规则,可以创建动画. 在动画的过程中,可以多次更改css样式的设定. 对于指定的变化:发生时用0%,或关键字“from”和“to”,这与0%和100%相同. 0%:开头动画. ...

  9. CSS3 @keyframes 规则以及animation介绍和各种动画样式说明

    一个好网站:http://www.jqhtml.com/ 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规 ...

随机推荐

  1. Android开发之位置定位详解与实例解析（GPS定位、Google网络定位，BaiduLBS（SDK）定位）

    在android开发中地图和定位是很多软件不可或缺的内容,这些特色功能也给人们带来了很多方便.定位一般分为三种发方案:即GPS定位.Google网络定位以及基站定位 最简单的手机定位方式当然是通过GP ...

  2. Linux coredump学习笔记

    初学者笔记:linux的程序在发生异常情况下,会导致进程down,多数服务器会设置生成core文件,本人在实际运营过程中发生过进程不断core,被自动监控拉起,过段时间有core的情况,进而导致磁盘被 ...

  3. 使用modelsim仿真DDR3时编译出错的解决方法

    Modelsim 10.1c release note sates as : Product Changes in 10.1c Release 10.1b introduced a new error ...

  4. hazelcast的坑爹事

    转载自 http://blog.csdn.net/hengyunabc/article/details/18514563 简介 开源中国的简介: Hazelcast是一个高度可扩展的数据分发和集群平台 ...

  5. 从入行到现在(.net)

    每次写东西都不知道怎么去开头.因为一想到要写东西.脑子里面浮现出来的开头就太多. 进园子很久从开始只是关注别人讲的技术,别人讲的基础,到现在更多的去看大家的随笔和新闻.这两年我从零基础的外行人逐渐进入 ...

  6. Discuz!nt整合心得

    最近研究了下Discuz!nt的整合,因为是网上找的实例,有个地方的写错了,导致纠结了一整天,这里分享出来. Discuz!nt提供了整合工具DiscuzToolkit,用于调用Discuz!nt A ...

  7. python 脚本查看微信把你删除的好友--win系统版

    PS:目测由于微信改动,该脚本目前不起作用 下面截图来自原作者0x5e 相信大家在微信上一定被上面的这段话刷过屏,群发消息应该算是微信上流传最广的找到删除好友的方法了.但群发消息不仅仅会把通讯录里面所 ...

  8. Using Run-Time Dynamic Linking（使用运行时动态链接库）

    // A simple program that uses LoadLibrary and // GetProcAddress to access myPuts from Myputs.dll. #i ...

  9. PHP中刷新输出缓冲

    http://www.cnblogs.com/mutuan/archive/2012/03/18/2404957.html PHP中刷新输出缓冲buffer是一个内存地址空间,Linux系统默认大小一 ...

  10. 有理数类 Java

    public class Rational extends Number implements Comparable { private long numerator;// 分子 private lo ...