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引 ...
随机推荐
- vue中部分api解释 （$nextTick）
1:this.$nextTick(function(){ }) 传如的参数是一个函数 这个API主要是获取dom元素 为什么需要这个api,在vue框架开发中,更新dom是一个异步操作,如果更新完do ...
- 矩阵游戏(game)
矩阵游戏(game) --九校联考24OI__D1T1 问题描述 LZK发明一个矩阵游戏,大家一起来玩玩吧,有一个N行M列的矩阵.第一行的数字是1,2,-M,第二行的数字是M+1,M+2-2*M,以此 ...
- Chrome自定义滚动条
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 16px; height: 16px; background-color: #F5 ...
- sql语句性能优化
需要的准备知识 1最左前缀匹配 mysql会一直向右匹配直到遇到范围查询(>.<.between.like)就停止匹配, 对于where条件 a = 1 and b> 2 and c ...
- 常用JSON接口
地图接口阿里云根据地区名获取经纬度接口http://gc.ditu.aliyun.com/geocoding?a=苏州市 官方文档参数解释: 纬度,经度 type 001 (100代表道路,010代表 ...
- mysql数据库保存sesison会话
<?php header('Content-type:text/html;charset=gbk;'); date_default_timezone_set('PRC'); class db{ ...
- java将word文件转为pdf
import java.io.File; import com.jacob.activeX.ActiveXComponent;import com.jacob.com.Dispatch; public ...
- HttpServerUtility常用方法
//HttpServerUtility是一个工具类,为了在后台处理请求方便获取到一些常用的类型,Asp.net将很多常用的东西封装到这里. // 获取服务器的计算机名称. public string ...
- Scrum冲刺阶段7
成员今日完成的任务 人员 任务 何承华 美化会员查看安排界面 陈宇 后端设计 丁培辉 美化会员查看界面 温志铭 会员查看界面设计 杨宇潇 会员查看界面设计 张主强 服务器构建 成员遇到的问题 人员 问 ...
- #pragma常用预处理指令
#pragma pack(1):1字节对齐#pragma once:指定头文件被编译一次#pragma message("message"):编译时输出message文本#prag ...