概述

之前写过css3 动画与display:none冲突的解决方案，但是最近却发现，使用animation效果比transition好得多，而且不和display:none冲突。下面我把相关新的记录下来，供以后开发时参考，相信对其他人也有用。

animation

css3的animation动画除了比transition动画多耗费一点资源之外，在其它方面真的碾压transition动画。比如：

  1. 不与display:none冲突。
  2. 能够自由设定循环次数。
  3. 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的更多相关文章

  1. CSS3动画 transition和animation的用法和区别

    transition和animation都是CSS3新增的特性,使用时需要加内核 浏览器 内核名称 W3C   IE  -ms-  Chrome/Safari -webkit-   Firefoc - ...

  2. 弄清 CSS3 的 transition 和 animation

    弄清 CSS3 的 transition 和 animation transition transition 属性是 transition-property, transition-duration, ...

  3. css3，transition，animation两种动画实现区别

    我们为页面设置动画时,往往会用到transition还有animation以及transfrom属性或者用到js. 其实通常情况下,对于使用js我们更加倾向于使用css来设置动画. transfrom ...

  4. css3中transition和animation的回调处理

    弱鸡最近在准备面试,网上找了一些题,发现一些基础题也完全答不好(┬＿┬)看来还是要再接再励啊w(ﾟДﾟ)w 言归正传,今天的主题是CSS3中的动画回调处理,这里动画执行完毕后触发的事件是transit ...

  5. 2018年1月17日总结 css3里transition 和animation 区别

    transition 和animation两个CSS3属性经常被用到实际项目中,想把它整理出来. 1.先介绍transition >>>>>  a. 在做项目中经常会遇见 ...

  6. CSS3动画效果之animation

    先解决上一篇的遗留问题. div { width: 300px; height: 200px; background-color: red; -webkit-animation: test1 2s; ...

  7. Css3动画-@keyframes与animation

    一.@keyframe 定义和用法 @keyframes是用来创建帧动画的,我们通过这个属性可以用纯css来实现一些动画效果. 一般格式是: @keyframes 动画名称{ 0%{ 动画开始时的样式 ...

  8. css3动画transition animation

    CSS动画简介  transition   animation transition过渡:css3通过transitions属性引入时间概念,通过开始.结束状态自动计算中间状态,实现状态改变的过渡效果 ...

  9. 大厂前端带来css3动画transition的使用和介绍全新认识动画

    CSS3中可以使用transition来做最简单动画效果,transition表示到一个元素的属性值发生变化时,我们可以看到页面元素从旧的属性慢慢变化为新的属性值的过程,这种效果不是立即变化的,而是体 ...

  10. css动画——transition和animation

    http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 第一部分:CSS Transition 在CSS 3引 ...

随机推荐

  1. 爬取qq号

    import reimport urllib.requestimport osimport jsonimport sslfrom collections import deque #把爬去的数据保存到 ...

  2. 配置Linux客户端使用socks5代理上网

    配置Linux客户端使用socks5代理上网   背景 有访问google或者其他海外网站需求的同学可能大都用过或者听过ss,在Windows.Mac.Android.IOS都有现成可用的客户端来协助 ...

  3. makefile入门-初步了解

    自己开始学习makefile是由于VScode配置工程文件,看别人的配置不是很懂,于是决定入门学习下makefile. 先来说说makefile是做什么用的:makefile可以实现工程的自动化编译, ...

  4. NC 部署问题

    1.was环境部署日志  IBM/WEBSPHERE/APPSERVER/PRORFILES/APPSRV01/LOGS/SERVER1/ 

  5. Gym - 101848B Almost AP 暴力

    题目链接:http://codeforces.com/gym/101848/problem/B 给出一串数字要你最多改动三个数字使这一串数字成为等差数列.因为最多改动三个数字所以可以先求出相邻两项的差 ...

  6. Python中logging日志模块的使用

    参考https://www.cnblogs.com/CJOKER/p/8295272.html

  7. MySQL语法大全_自己整理的学习笔记（MySQL语句 整理二）

    select * from emp; #注释 #--------------------------- #----命令行连接MySql--------- #启动mysql服务器 net start m ...

  8. mysql sql mode

    /usr/local/mysql/bin/mysqld --verbose --help | grep -A 1 'Default options' (1)关于配置文件路径 有时候,我发现虽然尝试修改 ...

  9. Liang-Barsky直线段裁剪算法

    Liang-Barsky直线段裁剪算法 梁友栋与Barsky提出的裁剪算法以直线的参数方程为基础,把判断直线段与窗口边界求交的 二维裁剪问题转化为求解一组不等式,确定直线段参数的一维裁剪问题.设起点为 ...

  10. 深入理解java虚拟机(一)-----java内存区域以及内存溢出异常

    概述 Java语言的一个非常重要的特点就是与平台的无关性.而使用Java虚拟机是实现这一特点的关键.一般的高级语言如果要在不同的平台上运行,至少需要编译成不同的目标代码.而引入Java语言虚拟机后,J ...