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 ...
随机推荐
- iOS：didSelectRowAtIndexPath:方法失效解决办法
问题描述及解决过程: 为了达到点击TableView空白区退出键盘的效果,给控制器注册了一个UITapGestureRecognizer来识别点击事件,代码如下: #pragma mark - 设置手 ...
- php学习笔记之wamp安装配置
一.下载apache.php.mariadb apache 下载地址:http://www.apachehaus.com/cgi-bin/download.plx VC9版本分为:32位版.64位版. ...
- axis2开发webservice入门到精通
1,准备工作: 首先我们要下载:axis2-1.4.1-war(发布webservice),axis2-1.4.1-bin.zip(webservice调用使用的各种包). 下载好了,把axis2-1 ...
- hibernate连接数据库的步骤
三个准备 一.导包 mysql二.在默认src下创建hibernate.cfg.xml 1.创建xml文件,命名为hibernate.cfg.xml 2.添加约束 (在org.hibern ...
- .net下开发ActiveX控件
` ActiveX 是一个开放的集成平台,为开发人员. 用户和 Web生产商提供了一个快速而简便的在 Internet 和 Intranet 创建程序集成和内容的方法. 使用 ActiveX, 可 ...
- js判断qq浏览器
if(navigator.userAgent.toLowerCase().toString().indexOf('qqbrowser') > -1){ console.log('qq');}el ...
- 高性能 Oracle JDBC 编程
了解如何利用连接和语句池特性来提高 Oracle 驱动的 JDBC 程序的性能.作者:Yuli Vasiliev2009 年 4 月发布使用诸如连接池和语句池等池技术可以显著提高数据库密集型应用程序的 ...
- Proxy Pattern(Java动态代理和cglib的实现)
代理模式:给某一个对象提供代理对象,由代理对象控制具体对象的引用. 代理,指的就是一个角色对表另一个角色采取行动,就生活中,一个红酒厂商,是不会直接把红酒零销给客户的,都是通过代理完成他的销售业务.而 ...
- IOS Core Animation Advanced Techniques的学习笔记(一)
转载. Book Description Publication Date: August 12, 2013 Core Animation is the technology underlying A ...
- HDU 1513 最长子序列
Palindrome Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...