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引 ...
随机推荐
- Lonsdor K518ISE SCION 2011-2018 Models Enabled!
Lonsdor released the Lonsdor K518ISE Key Programmer update announcement on 14-03-2019, saying it can ...
- Saliency Detection via Graph-Based Manifold Ranking
Saliency Detection via Graph-Based Manifold Ranking https://www.yuque.com/lart/papers 本文不是按照之前的论文那样, ...
- docker--在centos镜像安装mysql
一.安装centos镜像 1.拉取最新版本centos镜像(拉取centos7 则使用centos:7即可) docker pull centos:lasted 2.查看已有镜像 docker ima ...
- tomcat 请求处理流程分析（基于nio）
在这里我先简单的说下bio和nio的区别 这里我以电话客服的情况来解释 bio 一个客户对应一个客服, 假如客户比较麻烦,中途不挂电话,或者去做其他事情了,而客服资源会被一直占用 导致的后果是系统处理 ...
- linux性能监控(转)
vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况.这个命令是我查看Linux/Unix最 ...
- 《Miracle-House团队》项目需求分析改进
(一)团队项目需求分析改进 一.<西小餐项目需求规格说明书>的不足 通过老师和其他同学的指正和建议,我们发现上次的需求规格说明书存在以下不足: 1.需求规格文档不够完整和规范: 2.系统设 ...
- Linux任务计划命令 :crontab -e
crond是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务工具,并且会自动启动crond进程,crond ...
- TestNG的使用方法
本文转载自于:https://blog.csdn.net/qq_24373725/article/category/7432624 TestNG介绍 TestNG是Java中的一个测试 ...
- shutil模块和os模块对比
一.shutil -- 是一种高层次的文件操作工具类似于高级API,而且主要强大之处在于其对文件的复制与删除操作更是比较支持好. 1.shutil.copy(src,dst)复制一个文件到另一个目录下 ...
- linux shell数组赋值方法（常用）
http://blog.csdn.net/shaobingj126/article/details/7395161 Bash中,数组变量的赋值有两种方法: (1) name = (value1 ... ...