简单CSS3动画制作

浏览数：50 / 时间：2015年06月09日

最近需要用到了一些CSS3动画，基本用Animate.css（https://github.com/daneden/animate.css）可以处理，但按需也要扩展了一些动画如下：

@charset "UTF-8";
/*!
    2015.03.21 Nelson Kuang
    Animate.css扩展动画
*/

/*
    @creator: Nelson Kuang
    @name: rotate 绕中心旋转
    @usage: <div class="rotate">Example</div>
    */
@-webkit-keyframes rotate {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes rotate {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

.rotate {
    -webkit-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

/*
    @creator: Nelson Kuang
    @name: fadeInPendingFadeOutUp 先渐现，停留2s，再向上滑动并逐渐消失
    @usage:可单独使用keyframes或者与Animate.css结合使用 如：<div class="animated infinite fadeInPendingFadeOutUp">Example</div>
    */
@-webkit-keyframes fadeInPendingFadeOutUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    25% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    75% {
        /*pending*/
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

@keyframes fadeInPendingFadeOutUp {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    75% {
        /*pending*/
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

.animated.fadeInPendingFadeOutUp {
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
}
/*
    @creator: Nelson Kuang
    @name: fadeInUp2D 向上滑动并渐现， 因Animate.css的fadeInUp不支持iphone6 plus，自己用2d重写
    @usage:可单独使用keyframes或者与Animate.css结合使用 如：<div class="animated infinite fadeInUp2D">Example</div>
    */
@-webkit-keyframes fadeInUp2D {
  from {
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp2D {
  from {
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }

  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUp2D {
  -webkit-animation-name: fadeInUp2D;
  animation-name: fadeInUp2D;
}