css3的动画特效--元素旋转（transition，animation）

开发中，视觉要你实现一个元素的旋转问题，好比说以下图所示：

思路：首先动画动效确定离不开anmimation动画。

和transition动画同样，animation动画也是CSS3动画的一种，这类动画能够理解为是一种关键帧动画，它能够预先为动画设置多个节点，在每一个节点中含有不一样的状态属性，经过使用animation动画咱们能够获得更为复杂的动画效果。

注意：transition是为页面元素设置某个须要产生动画效果的属性，如宽度（width）、高度（height）、透明度（opacity），甚至3D旋转等，并使得这些属性的值在发生变化时产生相应的过渡效果。咱们经常在制做相似按钮鼠标通过和移出效果时使用transition。通俗地说，transition是简化版的CSS3动画，而animation则是强化版的CSS3动画。在平常开发中transition的使用频率更高一些，咱们每每只有在遇到transition没法解决的问题时，才会转而使用animation。

 

一、dom元素准备

准备一个span元素做为图标的载体（也可使用其余元素，如div、a、button等）

<span class="close">Close</span>

使用设置了icon字体的伪元素来生成图标图案，首先引入这个font-family

@font-face {
                font-family: 'icon-font';
                src: url('font/flat-ui-icons-regular.ttf'), url('font/flat-ui-icons-regular.eot'), url('font/flat-ui-icons-regular.woff'), url('font/flat-ui-icons-regular.svg');
            }
            
            .close {
                font-size: 0px;
                /*使span中的文字不显示*/
                cursor: pointer;
                /*使鼠标指针显示为手型*/
                display: block;
                width: 20px;
                height: 30px;
                line-height: 42px;
                border-radius: 50%;
                /*使背景形状显示为圆形*/
                background: #FFF;
                color: #8b8ab3;
                text-align: center;
            }
            
            .close::before {
                content: "\e609";
                font-family: 'icon-font';
                speak: none;
                font-size: 20px;
                display: block;
            }

添加了speak:none属性来为该元素加强可访问性，使得有阅读障碍的浏览者不会被插入的伪元素中的无心义字符所困扰。

 

二、transition使用

为鼠标指针的滑过状态设置一些动画效果。在此，咱们但愿当鼠标指针滑过期，图标在1秒内匀速旋转360度。咱们在此先复习一下transition动画的用法。

.close:hover::before{
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg); -webkit-transition:-webkit-transform 1s linear;
    transition:transform 1s linear;
}

代码中，咱们使用了transform属性来实现图标的旋转，而且设置了transition动画，将变化的属性名称设置为transform。测试页面，如今咱们将看到图标的旋转效果。

PS：在设置旋转属性时，须要加上deg做为度数单位，即便是旋转0度也须要一样添加这一单位。此外，transform只是一种变换属性，其自己不能生成动画效果，它只能经过与transition或animation属性的配合才能产生动画效果。

发现问题：当前的图标只会旋转一次，而后将中止下来。

 

三、animation属性

而若是咱们但愿图标可以一直不停旋转，则须要请出animation动画。使用animation动画的前提是先制做动画的各个关键帧。

@-webkit-keyframes spin {
                from {
                    -webkit-transform: rotate(0deg);
                }
                to {
                    -webkit-transform: rotate(360deg);
                }
            }
            
            @keyframes spin {
                from {
                    transform: rotate(0deg);
                }
                to {
                    transform: rotate(360deg);
                }
            }

咱们使用了keyframes关键字来定义了一个名为spin的关键帧动画，在该动画中使用了from关键字来指定动画的起始状态，to关键字来指定动画的结束状态。在起始状态中设置transform属性的旋转度为0度，在结束状态中设置该旋转度为360度。此外，咱们还添加了-webkit-前缀以确保动画在webkit浏览器中的兼容性。

指定了spin关键帧动画后，咱们就能够在图标中运用这一动画，代码以下：

.close:hover::before {
                /*-webkit-transform: rotate(360deg);
                transform: rotate(360deg);
                -webkit-transition: -webkit-transform 1s linear;
                transition: transform 1s linear;*/
                -webkit-animation: spin 1s linear 1s 5 alternate;
                animation: spin 1s linear infinite;
            }

在以上代码中，咱们设置了鼠标滑过状态下伪元素的animation属性，该属性的第一个参数是动画名称，即spin，第2个参数是动画时长，在此设置为1秒，第3个属性为速度曲线，在此设置为匀速运动，第4个属性infinite参数表示动画将无限循环，若是咱们只但愿动画循环必定次数，则能够将其修改成相应的数字，一次能够不用设置。

animation动画添加各类参数

（1）infinite参数，表示动画将无限循环。在速度曲线和播放次数之间还能够插入一个时间参数，用以设置动画延迟的时间。如但愿使图标在1秒钟后再开始旋转，并旋转两次，代码以下

.close:hover::before{
    -webkit-animation: spin 1s linear 1s 2;
    animation: spin 1s linear 1s 2;
}

（2）alternate参数。animation动画中加入反向播放参数alternate。在加入该参数后，动画将在偶数次数时反向播放动画。

.close:hover::before{
    -webkit-animation: spin 1s linear 1s 2 alternate;
    animation: spin 1s linear 1s 2 alternate;
}

 

欢迎访问：

一、云商城isv系统http://isv.suningcloud.com/mpisv-web/index

 二、云商城消费者门户http://www.suningcloud.com/promotion/index/experience_center.html