CSS Animation
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的更多相关文章
- CSS魔法堂：更丰富的前端动效by CSS Animation
前言 在<CSS魔法堂:Transition就这么好玩>中我们了解到对于简单的补间动画,我们可以通过transition实现.那到底多简单的动画适合用transtion来实现呢?答案就是 ...
- CSS Animation triggers text rendering change in Safari
薄荷新首页上周五内测,花哥反馈在 MacBook Safari 浏览器下 鼠标移动到第一个商品的时候后面几个商品的文字会加粗.这是什么鬼??? 待我回到家打开笔记本,鼠标蹭蹭蹭的发现问题远不止如此: ...
- No.6 - 利用 CSS animation 制作一个炫酷的 Slider
*{ margin:; padding:; } div{ margin: auto; width: 800px; height: 681px; position: relative; overflow ...
- [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 ...
- 利用 CSS animation 和 CSS sprite 制作动画
CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...
- 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider
前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...
- css animation @keyframes 动画
需求:语音播放动态效果 方案:使用如下图片,利用 css animation @keyframes 做动画 html <span class="horn" :class=& ...
- Apple CSS Animation All In One
Apple CSS Animation All In One Apple Watch CSS Animation https://codepen.io/xgqfrms/pen/LYZaNMb See ...
- css animation & animationend event & onanimationend
css animation & animationend event & onanimationend https://developer.mozilla.org/en-US/docs ...
- css animation & animation-fill-mode
css animation & animation-fill-mode css animation effect https://developer.mozilla.org/en-US/doc ...
随机推荐
- LoadRunner ERROR： java.lang.NumberFormatException
Loadrunner中使用lr_xml_get_values()获取服务端返回的字符串LcsId,LcsId为double,需要将该值转换为 int 后传入下一次请求中. 报错如下:Error is ...
- Meteor常用技能
调试: 服务器端 console.log() 会输出到终端命令行 客户端的 console.log() 会输出到浏览器控制台 Mongo Shell: 启动方式:meteor mongo 清空数据:m ...
- npm config
在公司为了不再用 npm --registry=http://r.cnpmjs.org install -(g) xxx 就设置了内部的镜像文件地址为默认的代理地址 npm config set re ...
- SharePoint Foundation 2013 安装出错
前段时间装foundation 13的时候遇到这个问题.怀疑是Office的问题.然后找了一些资料,问题得到了解决 解决方案: 运行 regedit,删除注册表下的office的LicenseType ...
- VHDL的参数写在一个vhd文件里
1 参数文件top_pkg.vhd
- js中Json 对象,Json字符串转换
//tmppcd 是一个对象 //JSON.stringify() 是把对象转换成json 字符串
- Oracle中DBLink的使用
DBLink 的作用是在局域网内,通过一台服务器上面的数据库访问另外一台服务器上面数据库的功能. 下面简单的介绍DBLink的配置: 服务器A:IP 10.10.10.107, 数据库实例名:orcl ...
- 从HTML到HTML
从HTML到HTML 当你在使用一些模板软件,如Thymeleaf的时候,了解web的标准,HTML家族的内部是十分重要的,至少如果你想知道自己在做什么的时候. 问题是,每个人都知道他们正在使用一些技 ...
- php foreach 语法的遍历来源数组如果不是一个有效数组php会出现错误警告 Invalid argument supplied for foreach()
在php中,foreach语法的遍历来源数组如果不是一个有效数组,php会出现错误警告 Invalid argument supplied for foreach() ,但是很多时候这个数组是取自某些 ...
- css初始化
Css初始化代码: *{padding:0px;margin:0px;} body{font-size:12px;font-family: "宋体",Arial Black;tex ...