css3动画简介以及动画库animate.css的使用

在这个年代，你要是不懂一点点css3的知识，你都不好意思说你是个美工。美你妹啊，请叫我前端工程师好不好。呃。。好吧，攻城尸。。。呵呵，作为一个攻城尸，没有点高端大气上档次的东西怎么能行呢，那么css3的动画就绝对是值得你拥有了，虽说IE9以及更早版本的IE浏览器都不支持css3动画，但是IE6-8浏览器已是江河日下，使用谷歌浏览器、火狐浏览器、IE10+浏览器以及移动端浏览器等这些支持css3动画的浏览器的人数越来越多，所以如果很简单的就能让一部分人获得更好的用户体验，那何乐而不为呢。

从广义上来讲，css3动画可以分为两种。

过渡动画

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

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

transition-property：规定对哪个属性进行过渡

transition-duration：定义过渡的时间，默认是0

transition-timing-function：定义过渡动画的缓动效果，如淡入、淡出等，默认是 ease

transition-delay：规定过渡效果的延迟时间，即在过了这个时间后才开始动画，默认是0

QQ截图20131102123530 

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

QQ截图20131102123530

如果是使属性的默认值，则可以省略：

QQ截图20131102123530 相当于：QQ截图20131102123530

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

QQ截图20131102123530

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

QQ截图20131102123530

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

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

QQ截图20131102123530

关键帧动画

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

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

@keyframes 动画名称{

      时间点 {元素状态}

      时间点 {元素状态}

      …

}

例如：

QQ截图20131102123530

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

关键帧的书写方式很灵活，一行可以写多个关键帧。

QQ截图20131102123530

甚至它们之间的空格也是可以不要的。

现在我们知道了怎么去定义一个关键帧动画了，那怎么去实现这个动画呢？其实很简单，只要把这个动画绑定到某个要进行动画的元素上就行了。

把动画绑定到元素上，我们可以使用animation属性。animation属性有以下这些：

QQ截图20131102123530

像前面讲的transition属性一样，也可以把这些animation属性简写到一个animation中，使用默认值的也可以省略掉。但 animation-play-state 属性不能简写到animation中。

QQ截图20131102123530

只要像这样把定义好的动画绑定到元素上，就能实现关键帧动画了，而不是像第一种过渡动画那样，需要一个状态的改变才能触发动画。

QQ截图20131102123530

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

QQ截图20131102123530

animate.css的使用

animate.css是一个css3动画库，可以到github上去下载，里面预设了很多种常用的动画，可以先在本页看下演示效果，使用也很简单，因为它是把不同的动画绑定到了不同的类里，所以我们想要使用哪种动画的时候，只需要简单的把那个相应的类添加到元素上就行了：

 

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

QQ截图20131102123530

然后你想要哪个元素进行动画，就给那个元素添加上animated类 以及特定的动画类名，animated是每个要进行动画的元素都必须要添加的类。

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

QQ截图20131102123530

这样载入页面，元素就能动起来了。你也可以在动画完成后，把动画类移除，以便可以再次进行同一个动画。

QQ截图20131102123530

至于动画的配置参数，比如动画持续时间，动画的执行次数等等，你可以在你的的元素上自行定义，覆盖掉animate.css里面所定义的就行了。

QQ截图20131102123530

注意这些属性还要记得加上各浏览器的前缀。

总之是很灵活的，说到底不就是一个css文件吗，一看就懂的，你在里面想怎么整就怎么整，不想用它提供的类名，就在里面改掉就行了。如果你只想用里面的部分动画，也可以把那些要使用的动画分离出来，它的官网也提供了这样的功能。

下面展示了animate.css里面提供的所有动画，动画名就是类名，你想使用哪个动画，加上这个类名就行了。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>animate - CSS3</title>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700">
    <link rel="stylesheet" type="text/css" href="http://daneden.github.io/animate.css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="http://daneden.github.io/animate.css/style.css">
</head>
<body>
    <header class="site__header island">
        <div class="wrap">
            <span id="animationSandbox" style="display: block;"><h1 class="site__title mega">Animate.css</h1></span>
            <span class="beta subhead">Just-add-water CSS animations</span>
        </div>
    </header><!-- /.site__header -->

    <main class="site__content island" role="content">
        <div class="wrap">
            <form>
                <select class="input input--dropdown js--animations">
                    <optgroup label="Attention Seekers">
                        <option value="bounce">bounce</option>
                        <option value="flash">flash</option>
                        <option value="pulse">pulse</option>
                        <option value="rubberBand">rubberBand</option>
                        <option value="shake">shake</option>
                        <option value="swing">swing</option>
                        <option value="tada">tada</option>
                        <option value="wobble">wobble</option>
                        <option value="jello">jello</option>
                    </optgroup>

                    <optgroup label="Bouncing Entrances">
                        <option value="bounceIn">bounceIn</option>
                        <option value="bounceInDown">bounceInDown</option>
                        <option value="bounceInLeft">bounceInLeft</option>
                        <option value="bounceInRight">bounceInRight</option>
                        <option value="bounceInUp">bounceInUp</option>
                    </optgroup>

                    <optgroup label="Bouncing Exits">
                        <option value="bounceOut">bounceOut</option>
                        <option value="bounceOutDown">bounceOutDown</option>
                        <option value="bounceOutLeft">bounceOutLeft</option>
                        <option value="bounceOutRight">bounceOutRight</option>
                        <option value="bounceOutUp">bounceOutUp</option>
                    </optgroup>

                    <optgroup label="Fading Entrances">
                        <option value="fadeIn">fadeIn</option>
                        <option value="fadeInDown">fadeInDown</option>
                        <option value="fadeInDownBig">fadeInDownBig</option>
                        <option value="fadeInLeft">fadeInLeft</option>
                        <option value="fadeInLeftBig">fadeInLeftBig</option>
                        <option value="fadeInRight">fadeInRight</option>
                        <option value="fadeInRightBig">fadeInRightBig</option>
                        <option value="fadeInUp">fadeInUp</option>
                        <option value="fadeInUpBig">fadeInUpBig</option>
                    </optgroup>

                    <optgroup label="Fading Exits">
                        <option value="fadeOut">fadeOut</option>
                        <option value="fadeOutDown">fadeOutDown</option>
                        <option value="fadeOutDownBig">fadeOutDownBig</option>
                        <option value="fadeOutLeft">fadeOutLeft</option>
                        <option value="fadeOutLeftBig">fadeOutLeftBig</option>
                        <option value="fadeOutRight">fadeOutRight</option>
                        <option value="fadeOutRightBig">fadeOutRightBig</option>
                        <option value="fadeOutUp">fadeOutUp</option>
                        <option value="fadeOutUpBig">fadeOutUpBig</option>
                    </optgroup>

                    <optgroup label="Flippers">
                        <option value="flip">flip</option>
                        <option value="flipInX">flipInX</option>
                        <option value="flipInY">flipInY</option>
                        <option value="flipOutX">flipOutX</option>
                        <option value="flipOutY">flipOutY</option>
                    </optgroup>

                    <optgroup label="Lightspeed">
                        <option value="lightSpeedIn">lightSpeedIn</option>
                        <option value="lightSpeedOut">lightSpeedOut</option>
                    </optgroup>

                    <optgroup label="Rotating Entrances">
                        <option value="rotateIn">rotateIn</option>
                        <option value="rotateInDownLeft">rotateInDownLeft</option>
                        <option value="rotateInDownRight">rotateInDownRight</option>
                        <option value="rotateInUpLeft">rotateInUpLeft</option>
                        <option value="rotateInUpRight">rotateInUpRight</option>
                    </optgroup>

                    <optgroup label="Rotating Exits">
                        <option value="rotateOut">rotateOut</option>
                        <option value="rotateOutDownLeft">rotateOutDownLeft</option>
                        <option value="rotateOutDownRight">rotateOutDownRight</option>
                        <option value="rotateOutUpLeft">rotateOutUpLeft</option>
                        <option value="rotateOutUpRight">rotateOutUpRight</option>
                    </optgroup>

                    <optgroup label="Sliding Entrances">
                        <option value="slideInUp">slideInUp</option>
                        <option value="slideInDown">slideInDown</option>
                        <option value="slideInLeft">slideInLeft</option>
                        <option value="slideInRight">slideInRight</option>
                    </optgroup>

                    <optgroup label="Sliding Exits">
                        <option value="slideOutUp">slideOutUp</option>
                        <option value="slideOutDown">slideOutDown</option>
                        <option value="slideOutLeft">slideOutLeft</option>
                        <option value="slideOutRight">slideOutRight</option>
                    </optgroup>

                    <optgroup label="Zoom Entrances">
                        <option value="zoomIn">zoomIn</option>
                        <option value="zoomInDown">zoomInDown</option>
                        <option value="zoomInLeft">zoomInLeft</option>
                        <option value="zoomInRight">zoomInRight</option>
                        <option value="zoomInUp">zoomInUp</option>
                    </optgroup>

                    <optgroup label="Zoom Exits">
                        <option value="zoomOut">zoomOut</option>
                        <option value="zoomOutDown">zoomOutDown</option>
                        <option value="zoomOutLeft">zoomOutLeft</option>
                        <option value="zoomOutRight">zoomOutRight</option>
                        <option value="zoomOutUp">zoomOutUp</option>
                    </optgroup>

                    <optgroup label="Specials">
                        <option value="hinge">hinge</option>
                        <option value="rollIn">rollIn</option>
                        <option value="rollOut">rollOut</option>
                    </optgroup>
                </select>

                <button class="butt js--triggerAnimation">Animate it</button>
            </form>
            <!-- <hr />
            <p class="meta"><a href="https://raw.github.com/daneden/animate.css/master/animate.css" download="animate.css">Download Animate.css</a> or <a href="//github.com/daneden/animate.css">View on GitHub</a></p>
            <p><small>Another thing from <a href="//daneden.me">Daniel Eden</a>.</small></p> -->
        </div>
    </main><!-- /.site__content -->

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    function testAnim(x) {
        $('#animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
            $(this).removeClass();
        });
    };

    $(document).ready(function(){
        $('.js--triggerAnimation').click(function(e){
            e.preventDefault();
            var anim = $('.js--animations').val();
            testAnim(anim);
        });

        $('.js--animations').change(function(){
            var anim = $(this).val();
            testAnim(anim);
        });
    });
    </script>
</body>
</html>

 

posted @ 2016-08-18 10:20  jiangxiaobo  阅读(560)  评论(0)  编辑  收藏  举报