CSS3动画库animate.css详解

演示网站animate.css

【概括】

   虽说IE9以及更早版本的IE浏览器都不支持css3动画,但是IE6-8浏览器已是旧时代了。使用谷歌浏览器、火狐浏览器、IE10+浏览器以及移动端浏览器等这些支持css3动画的浏览器的人数越来越多,所以如果很简单的就能让一部分人获得更好的用户体验,那何乐而不为呢

   接下来,我们先了解下css3动画,然后讲解animate.css的用法

【css3动画简介】

从广义上来讲,css3动画可以分为两种:过渡动画和关键帧动画

这里我简单概括下,具体详解我在之前文章里做过介绍

【分类】

下面分别介绍下过渡动画transition和关键帧动画keyframes

(1)过渡动画transition

   过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动画。所谓的状态就是指大小、位置、颜色、变形(transform)等等这些属性。css过渡只能定义首和尾两个状态,所以是最简单的一种动画。

   要想使一个元素产生过渡动画,首先要在这个元素上用transition属性定义动画的各种参数。可定义的参数有

transition-property:规定对哪个属性进行过渡
transition-duration:定义过渡的时间,默认是0
transition-timing-function:定义过渡动画的缓动效果,如淡入、淡出等,默认是 ease
transition-delay:规定过渡效果的延迟时间,即在过了这个时间后才开始动画,默认是0

    为了书写方便,也可以把这四个属性按照以上顺序简写在一个 transition 属性上

   如果是使属性的默认值,则可以省略,例如:

div{transition:width 3s;}相当于div{transition:width 3s ease 0;}

   如果想要同时过渡多个属性,可以用逗号隔开,如:

div{transition:width 3s, height 3s, background-color 3s;}

  使用transtion属性只是规定了要如何去过渡,要想让动画发生,还得要有元素状态的改变。如何改变元素状态呢,当然就是在css中给这个元素定义一个类(:hover等伪类也可以),这个类描述的是过渡动画结束时元素的状态。

   这样,当我们把鼠标移动到div上的时候,div的状态发生了变化,就能看到宽度从100到400,高度从100到400,背景颜色从黑到红的,过渡时间为3秒的过渡效果了。

   除了使用hover等系统提供的伪类外,我们也可以随意的定义自己的类,然后想要过渡时就通过js把类加到元素上面。

(2)关键帧动画keyframes

   不同于第一种的过渡动画只能定义首尾两个状态,关键帧动画可以定义多个状态,或者用关键帧来说的话,过渡动画只能定义第一帧和最后一帧这两个关键帧,而关键帧动画则可以定义任意多的关键帧,因而能实现更复杂的动画效果。

   关键帧动画的定义方式也比较特殊,它使用了一个关键字 @keyframes 来定义动画。具体格式为:

@keyframes 动画名称{
      时间点 {元素状态}
      时间点 {元素状态}
      …
}

   例如:

   CSS3动画库animate.css详解

   这段代码定义了一个名为demo,且有5个关键帧的动画。0% ,10% 等这些表示的是时间点,是相对于整个动画的持续时间来说的,时间点之后的花括号里则是元素的状态属性集合,描述了这个元素在这个时间点的状态,动画发生时,就是从第一个状态到第二个状态进行过渡,然后从第二个状态到第三个状态进行过渡,直到最后一个状态。一般来说,0%和100%这两个关键帧是必须要定义的。

   关键帧的书写方式很灵活,一行可以写多个关键帧,甚至它们之间的空格也是可以不要的

   注意:为了达到最佳的浏览器兼容效果,在实际书写代码的时候,还必须加上各大浏览器的私有前缀

   CSS3动画库animate.css详解

【animate.css简介】

   animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果。

   虽然借助 animate.css 能够很方便、快速的制作 CSS3 动画效果,但还是建议看看 animate.css 的代码,也许你能从中学到一些东西。

【兼容】

浏览器兼容:当然是只兼容支持 CSS3 animate 属性的浏览器,他们分别是:IE10+、Firefox、Chrome、Opera、Safari。

【animate.css用法】

   animate.css是一个css3动画库,可以到github上去下载,里面预设了很多种常用的动画。而且使用也很简单,因为它是把不同的动画绑定到了不同的类里,所以我们想要使用哪种动画的时候,只需要简单的把那个相应的类添加到元素上就行了:

   首先在head中引入下载的animate.css文件:

<link rel="stylesheet" type="text/css" href="animate.css">
   然后你想要哪个元素进行动画,就给那个元素添加上animated类 以及特定的动画类名,animated是每个要进行动画的元素都必须要添加的类。

   假设使用jquery,要给一个id为demo的元素添加一个摇动的动画,因为摇动的动画类名为shake,所以代码是这样的:

$(document).ready(function(){
        $(".gradient").addClass('animated pulse');
})
   这样载入页面,元素就能动起来了。你也可以在动画完成后,把动画类移除,以便可以再次进行同一个动画。
$(document).ready(function(){
        $(".gradient").addClass('animated pulse');
        setTimeout(function(){
            $(".gradient").removeClass('pulse');
        },1000)
})
   有些动画效果最后会让元素不可见,比如淡出、向左滑动等等,可能你又需要将 class 删除,比如:
$(function(){
    $('#dowebok').addClass('animated bounce');
    setTimeout(function(){
        $('#dowebok').removeClass('bounce');
    }, 1000);
});

相关推荐