animationx详解
animation是CSS3中极其强大的功能，它可以完成许多炫酷有趣的动画效果，网上也有非常不错的类库。下面将做详细介绍。
1.@keyframes:用于定义动画的具体动作（帧动作），一般要加上浏览器前缀。
2.animation-name:给动画定义名称，用于在元素调用动画对象
3.animation-duration:设置动画动作持续的时间
4.animation-timing-function:动画的过渡速度
取值：ease(默认值),linear(匀速),ease-in(加速),ease-out(减速),ease-in-out(先加速后减速)
5.animation-delay:设置动画延迟时间
通过以上5点，就可以开始做简单的动画了。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:100px;
height: 100px;
background-color: #f00;
animation-name:fromLeftToRight; /*调用名为fromLeftToRight的动画*/
animation-duration:1s; /*动画持续1s*/
animation-timing-function:ease; /*逐渐变慢*/
animation-delay:0.4s; /*延迟0.4s后执行*/
} @keyframes fromLeftToRight{ /*定义动画的名称，以下为动画具体动作*/
from{
margin-left:0px;
}
to{
margin-left:100px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
此时动画只会在页面内执行一次，若想动画持续循环执行，那么就要用到以下属性
6.animation-iteration-count:设置动画执行次数
取值：number 或 infinite(无限)
给上述代码添加属性，那么结果将会是：
animation-iteration-count:infinite;
能看出动画在进行无限次循环运动，美中不足的是当运动到达margin-left:100px的位置时，动画重置，再继续运动，看起来非常生硬，此时我们可以添加一个 往返运动的效果，让画面看起来更平滑。
7.animation-direction:设置动画在循环运动中的执行方向
取值：normal(正常方向)
reverse(反向运动)
alternate(先正常运行，再反向运行)
alternate-reverse(先反向运行再正常运行)
再代码中继续添加属性：
animation-direction:alternate; /*往返运动*/
这样看起来效果就好多了。这种效果是固定不变的，然而在应用中，动画效果在更多的情况下是为了与用户进行交互，从而提升应用的用户体验，所以接下来介绍一个与交互相关的属性。
8.animation-play-state:设置动画对象的运动状态(暂停/运行)
取值：paused(暂停)
running(运行)
来，我们继续折腾上面的代码。
div:hover{
animation-play-state:paused; /*鼠标经过时动画暂停*/
}
正常情况下，若animation-iteration-count:1的时候，动画结束将重置，这将造成非常不好的用户体验，此时我们可以通过一个属性来控制对象在运动结束后的状态。
9.animation-fill-mode:设置动画时间之外的状态，如定格结束后的状态(forwards)。
取值：none 不设置
forwards 设置对象状态为动画结束时的状态
backwards 设置对象状态为动画开始时的状态
both 设置对象状态为动画结束或开始的状态
想不出太好的例子，我们还是继续撸上面的代码吧。搞起：
animation-iteration-count:1; /*也可以不设置此属性，则默认为1*/
animation-fill-mode:forwards; /*将运动的最后状态作为结束状态*/
10.语法缩写：animation：name | duration | timing-function | delay | iteration-count | direction | play-state | fill-mode .
其中只有 name 和 duration 是必填属性。那么页面中最上面的一段代码可缩写为：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:100px;
height: 100px;
background-color: #f00;
animation-name:fromLeftToRight 1s ease 0.4s; /*是不是简洁多了？*/
} @keyframes fromLeftToRight{ /*定义动画的名称，以下为动画具体动作*/
from{
margin-left:0px;
}
to{
margin-left:100px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
animationx详解的更多相关文章
- Linq之旅：Linq入门详解（Linq to Objects）
示例代码下载:Linq之旅:Linq入门详解(Linq to Objects) 本博文详细介绍 .NET 3.5 中引入的重要功能:Language Integrated Query(LINQ,语言集 ...
- 架构设计：远程调用服务架构设计及zookeeper技术详解（下篇）
一.下篇开头的废话 终于开写下篇了,这也是我写远程调用框架的第三篇文章,前两篇都被博客园作为[编辑推荐]的文章,很兴奋哦,嘿嘿~~~~,本人是个很臭美的人,一定得要截图为证: 今天是2014年的第一天 ...
- EntityFramework Core 1.1 Add、Attach、Update、Remove方法如何高效使用详解
前言 我比较喜欢安静,大概和我喜欢研究和琢磨技术原因相关吧,刚好到了元旦节,这几天可以好好学习下EF Core,同时在项目当中用到EF Core,借此机会给予比较深入的理解,这里我们只讲解和EF 6. ...
- Java 字符串格式化详解
Java 字符串格式化详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 文中如有纰漏,欢迎大家留言指出. 在 Java 的 String 类中,可以使用 format() 方法 ...
- Android Notification 详解（一）——基本操作
Android Notification 详解(一)--基本操作 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Notification 文中如有纰 ...
- Android Notification 详解——基本操作
Android Notification 详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 前几天项目中有用到 Android 通知相关的内容,索性把 Android Notificatio ...
- Git初探--笔记整理和Git命令详解
几个重要的概念 首先先明确几个概念: WorkPlace : 工作区 Index: 暂存区 Repository: 本地仓库/版本库 Remote: 远程仓库 当在Remote(如Github)上面c ...
- Drawable实战解析：Android XML shape 标签使用详解（apk瘦身，减少内存好帮手）
Android XML shape 标签使用详解 一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景. ...
- Node.js npm 详解
一.npm简介 安装npm请阅读我之前的文章Hello Node中npm安装那一部分,不过只介绍了linux平台,如果是其它平台,有前辈写了更加详细的介绍. npm的全称:Node Package M ...
随机推荐
- 382. Linked List Random Node（蓄水池采样）
1. 问题 给定一个单链表,随机返回一个结点,要求每个结点被选中的概率相等. 2. 思路 在一个给定长度的数组中等概率抽取一个数,可以简单用随机函数random.randint(0, n-1)得到索引 ...
- C++虚函数分析
1.虚函数(impure virtual) c++虚函数主要是提供“运行时多态”,父类提供虚函数的默认实现,子类可以虚函数进行重写. 2.纯虚函数(pure virtual) c++纯虚函 ...
- 裸眼3D全攻略3：拍摄3D—瞳距、镜距、视角偏转与空间感
http://sd89.blog.163.com/blog/static/356041322014112532958728/ 3D图片的拍摄,与平面有着全新的不同要求,那就是空间感的表现. 简单来说, ...
- CSS3 Flex Box（弹性盒子）
CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...
- 20145118 《Java程序设计》 实验报告一
实验一 JAVA开发环境的熟悉(LINUX + ECLIPSE) 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 3.统计自己的P ...
- 20145309李昊《网络对抗》MSF应用基础
实验内容 掌握metasploit的基本应用方式1.主动攻击——ms08_0672.针对浏览器的攻击——ms11_0503.针对客户端的攻击——Adobe4.成功应用一个辅助模块——scanner/d ...
- RC522 模块驱动程序
本文主要讲述了基于SPI总线的RC522驱动程序的设计.描述了主控如何与从设备通过SPI总线进行数据的读写. 一 在SPI驱动中,有两个重要的结构:spi_device&spi_driver. ...
- struts1和struts2比较
- ubinize的用法
1.ubinize支持哪些选项 Usage: ubinize [options] <ini-file> Generate UBI images. An UBI image may cont ...
- ZOJ 2747 Paint the Wall（离散化+暴力）题解
题意:给你一个面,然后涂颜色,问你最后剩多少颜色,每种颜色面积. 思路:第一反应是二维线段树,代码又臭又长,可以做.但是这题暴力+离散化就可以过.可以看到他给的n只有100,也就是说最坏情况下会涂10 ...