css3中 transition 与 animation用法介绍

在 CSS3 出现之前,网页上的动画都是靠 JavaScript 来实现的,在这个时代,你可能会经常看见这样的代码片段:

setTimeout(funcntion() {
  document.getElementById("test").style.opacity += 0.1;
}, 300)
上面这段代码片段就实现了这个 id 所描述内容的透明度渐变。

这样写起来看上去比较复杂,可维护性也比较差。除此之外,在移动端的性能也很是捉急。

CSS3 时代

石器时代终于过去,黎明已经到来,CSS3 的动画效果也随之而来。

CSS3 中有关动画的常用属性有 transition 与 transform。

transition

中文释义:"过渡"。最基本的场景在于 :hover 的过渡中:

.box {
  width: 100px;
  height: 200px;
  background: red;
  transition: all 1s ease;
}
.box:hover {
  width: 200px;
  height: 100px;
  background: yellow;
}
JS Bin on jsbin.com

上面这段代码实现了一个简单的过渡效果,涉及其 width, height, background; 过渡时间为 1s;过渡方式为 ease;在 hover 的时候触发。

transition 这个属性有四个参数: property duration timing-function delay;。分别代码过渡属性,延时时间,过渡方法函数,过渡延迟。

即:

transition: property duration timing-function delay;
需要注意的有下面几点:

property 这个位置不是能写所有的属性,比如 display 就是不行的。这是因为需要用 property 来计算过渡的各项指针,像 display 这种么没有明确数值标记的是万万不能达到效果的。

timing-function 是一个神奇的东西,如果你曾经接触过 贝赛尔曲线 肯定就知道其中的奥秘了。它的存在会让你的过渡效果不是那么的生硬,不管是淡进淡出还是其他复杂的过渡效果,他都能平滑的处理。一般情况下我们使用常用的ease, ease-in, ease-out, linear 就能满足大部分的需求了,如果你有更高的需求,可以通过http://web.chacuo.net/css3beziertool 来定制。

delay 表示延迟,即动画开始的延迟时间

如果要实现多段动画,比如首先大小进行变化,然后背景颜色进行变化也是可以的。 比如: transition: width 1s ease, background 1s ease 1s;

就实际情况来说,利用 :hover 来触发动画往往不是特别实际的。一般情况下,我们在实际开发中都是往往通过添加或删除 class 来触发动画的。

<div id="box"></div>

#box {
  width: 100px;
  height: 200px;
  background: yellow;
}
.red {
  width: 200px;
  height: 100px;
  background: red;
}

window.onload = function() {
  setTimeout(function() {
      document.getElementById("box").className = "red";
  }, 100)
}
JS Bin on jsbin.com

配合 transform 就能够实现更加酷炫的动画了。

JS Bin on jsbin.com

除了上面这个简单的旋转,还可以实现更加实用的效果呢 :)

选项卡切换“背景颜色”滑动

<div class="box">
    <div class="box-content" id="box1"></div>
    <div class="box-content" id="box2"></div>
    <div class="box-switch" id="box-switch"></div>
  </div>

.box {
  height: 100px;
  width: 300px;
}
.box {
  position: relative;
}
.box-content {
  display: inline-block;
  height: 100px;
  width: 140px;
  border: 1px solid red;
  cursor: pointer;
}
.box-switch {
  position: absolute;
  left: 1px;
  top: 1px;
  height: 100px;
  width: 140px;
  background: green;
  transition: .15s ease-out;
  transform: translateZ(0); // 开启硬件加速
}
.box-switch-on {
  left: 147px;
}

window.onload = function() {
  var _box1 = document.getElementById("box1"),
      _box2 = document.getElementById("box2");

  var _box_switch = document.getElementById("box-switch");

  _box1.addEventListener('click', function() {
    _box_switch.className = "box-switch"; 
  }, false);

  _box2.addEventListener('click', function() {
    _box_switch.className = "box-switch box-switch-on"; 
  }, false);

}
效果如下:

JS Bin on jsbin.com

记得做动画的时候别忘记开启硬件加速,不然在移动设备上可能会有性能问题,更详细的介绍参见在桌面端和移动端用CSS开启硬件加速

如果你不是为了兼容低级 PC 浏览器,最好不要使用 left 的这种方式,因为这样可能会造成重排(reflow/relayout),请使用 transform: translateX(147px); 的这种方式。 相关讨论参见在移动端使用transform: translate代替top left marg等做位移有好处么 ?, 感谢 @banbanchs

关于更加详细的 transform 介绍,可以参见 《好吧,CSS3 3D transform变换,不过如此》

animation

用上面所说的 transition 来实现动画无疑是非常优雅的,但是实现动画的种类貌似还是有限制的,那么如何去实现比较随心所欲的动画呢? 这个时候可能就需要 animation 的出场了。

animation 依旧非常简单,它需要你申明动画执行的时间和动画执行的函数即可:

.box {
   width: 100px;
   height: 200px;
   background: red;
 }
 .box:hover {
   animation: 1s rainbow forwards;
 }

@keyframes rainbow {
  50% {
    width: 200px;
    background: yellow;
  }
  100% {
    height: 100px;
    background: green;
  }
}
关于更加详细的 animation 介绍可以参见 《CSS 动画简介》

Vue 中怎么搞?

在 MV* 的框架中,都是不建议对 DOM 进行直接操作的,一般来说,都提供了一些自己框架的接口,比如 Vue 中:

过渡-Vue中文文档

对 show v-for 都做了一些钩子,我们可以借助这些钩子结合相关的生命周期实现相关的动画

时间: 2024-10-22 10:09:42

css3中 transition 与 animation用法介绍的相关文章

弄清 CSS3 的 transition 和 animation

原文:弄清 CSS3 的 transition 和 animation 弄清 CSS3 的 transition 和 animation transition transition 属性是transition-property,transition-duration,transition-timing-function,transition-delay的简称,用于设定一个元素的两个状态,不同的状态可以用伪类,比如:hover, :active 或者是通过 javascript 动态设定.IE10

Excel2007中网格线的基本用法介绍

Excel2007中网格线的基本用法介绍 Excel2007中的网格线在编辑.打印操作中都会用到.下面讲解Excel2007软件中网格线的一些基本用法. 1.隐藏/显示网格线 通过"视图"选项卡菜单中的"网格线"复选框开关,你可以设置网格线在编辑表时候的显示与否,   2.打印输出网格线设置 Excel中默认的网格线在打印时候是不会输出的,除非你进行了单元格的边框设置.设置方法:"开始"选项卡菜单中"字体"栏的"边框

Python中的with...as用法介绍

  这篇文章主要介绍了Python中的with...as用法介绍,本文直接给出用法实例,需要的朋友可以参考下 这个语法是用来代替传统的try...finally语法的. 代码如下: with EXPRESSION [ as VARIABLE] WITH-BLOCK 基本思想是with所求值的对象必须有一个__enter__()方法,一个__exit__()方法. 紧跟with后面的语句被求值后,返回对象的__enter__()方法被调用,这个方法的返回值将被赋值给as后面的变量.当with后面的

css3中transition和display的坑

 不知道大家做css3动画的时候遇到过这种情景没? 用opacity实现淡入淡出的效果.噢!good!一切正常 给个栗子: <!DOCTYPE html>   <html>   <meta charset="uft-8">  <head>   <style>  .div1{       background: red;  }  .div2 {       width:100px;       height:100px;    

CSS3 的 transition 和 animation 区别

transition transition 属性是 transition-property, transition-duration, transition-timing-function, transition-delay 的简称,用于设定一个元素的两个状态,不同的状态可以用伪类,比如:hover, :active 或者是通过 javascript 动态设定.IE10+支持. 所以 transition 的初始值为: transition-delay: 0s; transition-durat

PHP中extract函数各种用法介绍

直接上代码:  代码如下 复制代码 <?php $my_array = array("a" => "Cat","b" => "Dog", "c" => "Horse"); extract($my_array); echo "$a = $a; $b = $b; $c = $c"; ?> 猜猜会会出现什么结果? 输出:  代码如下 复制代码

几种有用的变型 PHP中循环语句的用法介绍_php技巧

PHP手册中对它的语法定义如下: for (expr1; expr2; expr3) statement 下面说说for语句几种有用的变型. 1.无限循环 首先是人尽皆知的无限循环(亦可称"死循环").由于空表达式null在语法上是有效的,所以我们可以把for语句的三个表达式留空,这样就会产生不断执行for嵌套语句的效果. for (;;) { //放置需要不断执行的语句 } ?> 虽然有一些任务会使用到无限循环,但是大多数程序任务,特别是PHP所能涉及的领域,在使用无限循环时都

C++中strtok()函数的用法介绍_C 语言

函数原型:char *strtok(char *s, const char *delim);Function:分解字符串为一组字符串.s为要分解的字符串,delim为分隔符字符串.Description:strtok()用来将字符串分割成一个个片段.参数s指向欲分割的字符串,参数delim则为分割字符串,当strtok()在参数s的字符串中发现到参数delim的分割字符时 则会将该字符改为\0 字符.在第一次调用时,strtok()必需给予参数s字符串,往后的调用则将参数s设置成NULL.每次调

java中运算符与表达式用法介绍

1. 对两个整型变量进行除法.取模和自加运算 (1) 在项目MyProject2中创建DivModDemo类. (2) 在代码编辑器中输入以下代码:  代码如下 复制代码 public class DivModDemo {     /**      * @param args      */     public static void main(String[] args) {         // TODO Auto-generated method stub         int a=8