css3动画：transition和animation
概述
之前写过css3 动画与display:none冲突的解决方案，但是最近却发现，使用animation效果比transition好得多，而且不和display:none冲突。下面我把相关新的记录下来，供以后开发时参考，相信对其他人也有用。
animation
css3的animation动画除了比transition动画多耗费一点资源之外，在其它方面真的碾压transition动画。比如：
- 不与display:none冲突。
- 能够自由设定循环次数。
- animation-fill-mode属性控制动画完成后的位置。
比如下面的结合display:none的淡入效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation</title>
<style>
button {
width: 100px;
height: 40px;
}
div {
display: none;
width: 200px;
height: 200px;
background-color: green;
}
button:hover + div {
display: block;
animation: fadeOut 1s 1;
animation-fill-mode: forwards;
}
@keyframes fadeOut
{
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn
{
from {opacity: 1;}
to {opacity: 0;}
}
</style>
</head>
<body>
<button></button>
<div></div>
<p>占位</p>
</body>
</html>
从上面可以看到，在机制上，animation和transition有一个最大的不同，就是当元素的display变成block的时候，会自动触发animation效果，不管元素的display从none变成block还是一开始出现就是block。
所以，一般animation的用法是，通过给元素添加带有动画的类，来实现动画效果。
另外，当元素的display从block到none需要执行动画的时候，仍然需要利用setTimeout来实现。
animation.css中的用法
上面我们得出结论，通过给元素添加带有动画的类，来实现动画效果。那么来看看animation.css是怎么做的。
animation通过利用animated类和动画类来控制动画效果：
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
很显然，分开2个类是为了更方便的展示，但是当动画的动画时间不一样时，会很难维护，所以在用的时候，建议用一个类写，示例如下：
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation: fadeIn 1s both;
}
注意：为了方便观看，我在上面的例子中并没有给keyframes和animation添加-webkit-这些浏览器兼容前缀，在实际运用上一定要带上这些前缀。
css3动画：transition和animation的更多相关文章
- CSS3动画 transition和animation的用法和区别
transition和animation都是CSS3新增的特性,使用时需要加内核 浏览器 内核名称 W3C IE -ms- Chrome/Safari -webkit- Firefoc - ...
- 弄清 CSS3 的 transition 和 animation
弄清 CSS3 的 transition 和 animation transition transition 属性是 transition-property, transition-duration, ...
- css3，transition，animation两种动画实现区别
我们为页面设置动画时,往往会用到transition还有animation以及transfrom属性或者用到js. 其实通常情况下,对于使用js我们更加倾向于使用css来设置动画. transfrom ...
- css3中transition和animation的回调处理
弱鸡最近在准备面试,网上找了一些题,发现一些基础题也完全答不好(┬＿┬)看来还是要再接再励啊w(ﾟДﾟ)w 言归正传,今天的主题是CSS3中的动画回调处理,这里动画执行完毕后触发的事件是transit ...
- 2018年1月17日总结 css3里transition 和animation 区别
transition 和animation两个CSS3属性经常被用到实际项目中,想把它整理出来. 1.先介绍transition >>>>> a. 在做项目中经常会遇见 ...
- CSS3动画效果之animation
先解决上一篇的遗留问题. div { width: 300px; height: 200px; background-color: red; -webkit-animation: test1 2s; ...
- Css3动画-@keyframes与animation
一.@keyframe 定义和用法 @keyframes是用来创建帧动画的,我们通过这个属性可以用纯css来实现一些动画效果. 一般格式是: @keyframes 动画名称{ 0%{ 动画开始时的样式 ...
- css3动画transition animation
CSS动画简介 transition animation transition过渡:css3通过transitions属性引入时间概念,通过开始.结束状态自动计算中间状态,实现状态改变的过渡效果 ...
- 大厂前端带来css3动画transition的使用和介绍全新认识动画
CSS3中可以使用transition来做最简单动画效果,transition表示到一个元素的属性值发生变化时,我们可以看到页面元素从旧的属性慢慢变化为新的属性值的过程,这种效果不是立即变化的,而是体 ...
- css动画——transition和animation
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 第一部分:CSS Transition 在CSS 3引 ...
随机推荐
- jmeter导入DB数据再优化
由于同一个迭代中每天都在执行.之前设计的思路是同个迭代只执行一次插入DB操作!! 因而没有在插入数据前没有做版本.产品类型.页面类型.接口名.接口名是否相等判断操作. 因此,若是这些条件相等,数据不是 ...
- 意想不到的的异常-由于eclipse和tomcat的交互出错-eclipse断点导致debug启动缓慢
足足启动了200多秒,正赶上hibernate 的使用上全部换使用方式,修改了很多代码.赶在这个节骨点上,出现debug 启动时卡在hibernate 启动的地方不动了,也没掉到debug断点的地方. ...
- nginx学习笔记(一)
agentzh 的 Nginx 教程 学习笔记 nginx的变量 Nginx 变量一旦创建,其变量名的可见范围就是整个 Nginx 配置,甚至可以跨越不同虚拟主机的 server 配置块, 例子如下 ...
- android 7.0 调用系统相机崩溃的解决方案(非谷歌官方推荐)
解决方案: 1.(推荐)7.0之后你的app就算有权限,给出一个URI之后手机也认为你没有权限. 不用修改原有代码,在Application的oncreate方法中:(或者直接放在调用相机的activ ...
- 面试简单整理之rabbitmq
135.rabbitmq 的使用场景有哪些? 单反单收,单发多收,发布订阅,按路由发送,按主题发送 136.rabbitmq 有哪些重要的角色? Server,Consumer,Producer 13 ...
- BZOJ 2016十连测 D3T3序列
主席树 #include<cstdio> #include<cstring> #include<algorithm> #include<vector> ...
- 涂色(CQOI2007)
--BZOJ1260_区间dp Description 假设你有一条长度为5的木版,初始时没有涂过任何颜色.你希望把它的5个单位长度分别涂上红.绿.蓝.绿.红色,用一个长度为5的字符串表示这个目标:R ...
- Python json.dumps 自定义序列化操作
def login_ajax(request): if request.method == "GET": return render(request, 'login_ajax.ht ...
- PHP去掉html中的空行、空白函数
function DeleteHtml($str){ $str = trim($str); $str = ereg_replace("\t","",$str); ...
- 【转】【机器学习】R 正则化函数 scale
源:http://blog.163.com/shen_960124/blog/static/60730984201582594011277/ 1. 数据的中心化 所谓数据的中心化是指数据集中的各项数据 ...