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引 ...
随机推荐
- 使用Json.net对Json进行遍历
公司使用了一种伪Json, 当value为字符串并且以"@"开头时, 要替换成真实的值, 比如{"name":"@countryName"} ...
- win10修改TXT文件的关联软件
打开注册表,按下面路径找: HKEY_CLASSES_ROOT -> txtfile -> shell -> open -> command 在右边可以看到一个默认文件,原来的 ...
- 如何在SpringBoot项目中使用拦截器
相比springmvc,springboot中拦截器不需要在xml中配置,只需定义拦截器类 implements HandlerInterceptor 和拦截器拦截路径的配置类extends WebM ...
- zookeeper测试代码
package com.sjt.test; import java.util.List; import java.util.concurrent.CountDownLatch; import org. ...
- 安装composer Failed to decode zlib stream 问题解决方法
https://getcomposer.org/download/ 页面下载最新版本 composer.phar 放到php.exe 页面下.创建一个.bat文件,存入下面内容 @ECHO OFF p ...
- 【转】【机器学习】R 正则化函数 scale
源:http://blog.163.com/shen_960124/blog/static/60730984201582594011277/ 1. 数据的中心化 所谓数据的中心化是指数据集中的各项数据 ...
- C++解题报告 ： 迭代加深搜索之 ZOJ 1937 Addition Chains
此题不难,主要思路便是IDDFS(迭代加深搜索),关键在于优化. 一个IDDFS的简单介绍,没有了解的同学可以看看: https://www.cnblogs.com/MisakaMKT/article ...
- LOJ-10096（强连通+bfs）
题目链接:传送门 思路: 强连通缩点,重建图,然后广搜找最长路径. #include<iostream> #include<cstdio> #include<cstrin ...
- centos 6.5升级openssl
1.下载升级版本 wget https://www.openssl.org/source/openssl-1.1.0i.tar.gz 2.安装 zlib zlib-devel yum -y insta ...
- 编译Spark源码
Spark编译有两种处理方式,第一种是通过SBT,第二种是通过Maven.作过Java工作的一般对于Maven工具会比较熟悉,这边也是选用Maven的方式来处理Spark源码编译工作. 在开始编译工作 ...