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 ...
随机推荐
- Debian8.2 安装搜狗输入法
搜狗输入法linux版本的推出,让linux的桌面使用变得更加顺手了,我之前一直就很想体验一下Linux下的搜狗输入法了,不过我对Linux系统使用还是个菜鸟,安装个输入法的简单事情也费了一番功夫. ...
- php empty,isset,is_null比较（差异与异同）
php empty,isset,is_null比较(差异与异同) http://www.cnblogs.com/chengmo/archive/2010/10/18/1854258.html
- CentOS 7 配置静态IP
1.查看MAC地址 2.修改/etc/sysconfig/network-scripts/ifcfg-[第一步中红框内的文字] 3.添加和修改内容如下: 4.修改/etc/resolv.conf 5. ...
- Java8之——简洁优雅的Lambda表达式
Java8发布之后,Lambda表达式,Stream等等之类的字眼边慢慢出现在我们字眼.就像是Java7出现了之后,大家看到了“钻石语法”,看到了try-with-resource等等.面对这些新东西 ...
- 告别IT,出售多年自己研发的股票分析系统源码
不知已过而立,发狠告别IT,回头看看以前自己的多个作品,耗时最多的就是这个股票分析系统了,留在自己的电脑里也体现不出多大价值了,故打算出售源码给需要的人,联系方式QQ:874724605 注明:股票源 ...
- iOS版本更新的App提交审核流程
App的版本更新估计是在所难免的了!更新App和新的App发布有何不同了?今天我们一起来看看吧!在发布App的时候我们需要通过开发者帐号——(申请)——>发布证书(需要钥匙串对证书签名也叫加密( ...
- PHP是什么
php 是一种服务器端的,嵌入html的脚本语言.php区别其他像客户端java的地方是它的代码在服务器端执行.php能做什么? 最低水平,php可以做任何其他cgi程序所能做的事,例如收集表格数据, ...
- iosOpenDev-install 失败官方wiki无法解决看这里（尝试有效）
https://github.com/kokoabim/iOSOpenDev/wiki/Troubleshoot http://blog.csdn.net/bluesky_03/article/det ...
- Yii2的邮件配置
'components' => [ 'mailer' => [ 'class' => 'yii\swiftmailer\Mailer', 'useFileTransport' =&g ...
- 对于Python中self的看法
首先看一段Java代码 public class Test { public String name; public int age; public String gender; public Str ...