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 ...
随机推荐
- shell算数运算
((i=$j+$k)) 等价于 i=`expr $j + $k`((i=$j-$k)) 等价于 i=`expr $j -$k`((i=$j*$k)) 等价于 i=`exp ...
- Berkeley DB的数据存储结构——哈希表（Hash Table）、B树（BTree）、队列（Queue）、记录号（Recno）
Berkeley DB的数据存储结构 BDB支持四种数据存储结构及相应算法,官方称为访问方法(Access Method),分别是哈希表(Hash Table).B树(BTree).队列(Queue) ...
- 设置java web工程中默认访问首页的几种方式
1.demo中最常见的方式是在工程下的web.xml中设置(有时候根据业务可能需要设置action,在action中处理逻辑加载跳转什么的,比较少): <welcome-file-list> ...
- SQL语句导致cpu占用如此高
一般我们可以使用sql server自带的性能分析追踪工具sql profiler分析数据库设计所产生问题的来源,进行有针对性的处理.但我们也可以通过自己写SQL语句来有针对性的进行性能方面的查询.通 ...
- JAVA动手动脑
1.运行 TestInherits.java 示例,观察输出,注意总结父类与子类之间构造方法的调用关系修改Parent构造方法的代码,显式调用GrandParent的另一个构造函数,注意这句调用代码是 ...
- 书旗小说app点评
书旗小说这个手机软件用了好久了,大一的时候就开始用,业余无聊时间可以看一看网络小说打发一下时间. 书旗免费小说是一款内容以免费小说书旗网为基础的在线阅读器,除了拥有传统阅读器的书籍同步阅读.全自动书签 ...
- C# MVC 自定义ActionResult实现EXCEL下载
前言 在WEB中,经常要使用到将数据转换成EXCEL,并进行下载.这里整理资料并封装了一个自定义ActionResult类,便于使用.如果文章对你有帮助,请点个赞. 话不多少,这里转换EXCEL使用的 ...
- iosOpenDev-install 失败官方wiki无法解决看这里（尝试有效）
https://github.com/kokoabim/iOSOpenDev/wiki/Troubleshoot http://blog.csdn.net/bluesky_03/article/det ...
- Jackson ObjectMapper类使用解析
/** * Jackson ObjectMapper类 */ //ObjectMapper类是Jackson库的主要类.它提供一些功能将转换成Java对象匹配JSON结构,反之亦然.它使用JsonPa ...
- 第十篇.bootstrap轮播
使用bootstrap的轮播插件可以向站点添加滑块,内容可以是图像,内嵌框架,视频或其它任何内容,使用轮播插件需要引入bootstrap.min.js. <div id="carous ...