css3动画收录

/* 上下晃动 5px */
@keyframes icon-arrow-shake {
    0%,50%,100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    25% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }
}


/* 顺时针旋转 360° */
@keyframes clockwise {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 逆时针旋转 360° */
@keyframes anticlockwise {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

/* 逆时针旋转 60°,然后复原 */
@keyframes nReRotate60 {
    0%,100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-60deg);
    }
}

/* 顺时针旋转 90° */
@keyframes rotate90 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(90deg);
    }
}

/* 逆时针旋转 90°,然后复原 */
@keyframes nReRotate90 {
    0%,100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-90deg);
    }
}

/* 顺时针旋转 90°,然后复原 */
@keyframes reRotate90 {
    0%,100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(90deg);
    }
}

/* 顺时针旋转 180° */
@keyframes rotate180 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(180deg);
    }
}

@keyframes box-in {
    0%,10% {
        transform: scale(.3,.3);
        -webkit-transform: scale(.3,.3);
        opacity: .2
    }

    90%,100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 1
    }
}

@keyframes fade-in {
    0%,10% {
        opacity: .2
    }

    90%,100% {
        opacity: 1
    }
}


@keyframes blink {
    0% { opacity: .8; }
    50% { opacity: .4; }
    100% { opacity: .8; }
}

@-webkit-keyframes blink{
    0% { opacity: .8; }
    50% { opacity: .4; }
    100% { opacity: .8; }
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
  }
}

@keyframes wideIn {
    0%{
        width: 0;
    }
}
@-webkit-keyframes wideIn {
    0%{
        width: 0;
    }
}

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

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

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: -webkit-transform3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
  }
}

@keyframes scalIn {
    0%{
        opacity: 0.5;
        transform: scale(0);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}
@-webkit-keyframes scalIn {
    0%{
        opacity: 0.5;
        -webkit-transform: scale(0);
    }
    100%{
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

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

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

@keyframes bounce{
    0%{
        top: 0;
    }
    25%{
        top: -5px;
    }
    50%{
        top:0;
    }
    75%{
        top: 15px;
    }
    100%{
        top:0;
    }
}
@-webkit-keyframes bounce{
    0%{
        top: 0;
    }
    25%{
        top: -5px;
    }
    50%{
        top:0;
    }
    75%{
        top: 15px;
    }
    100%{
        top:0;
    }
}