CSS 3.0 常用动画收集

先说一个今天在开发过程中遇到的问题。

对同一个元素同时使用transform和animation，transform会失效。
解决办法：就是在这个元素的外层再加一层div，对外层的div进行transform，对内层div进行animation就可以解决了。

CSS常用动画库

animates.css
github地址 https://github.com/daneden/animate.css
查看演示地址 https://daneden.github.io/animate.css/

Hover.css http://ianlunn.github.io/Hover/

Magic动画库制作CSS3动画特效 http://www.17sucai.com/pins/demoshow/10001

CSS动画简介 http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

一，CSS常用代码

/*边框圆角*/
border-radius: 6px;
/*圆型*/
border-radius: 50%;
/*边框阴影*/
box-shadow: 1px 1px 1px #666; /*语法：box-shadow: h-shadow v-shadow blur spread color inset(outset);*/
/*文本效果*/
.text-style {
    text-shadow: 5px 5px 5px #FF0000; /*规定文字水平阴影、垂直阴影、模糊距离，以及阴影的颜色*/
    word-wrap: break-word; /*允许长单词换行到下一行*/
    text-overflow: ellipsis; /*显示省略符号来代表被修剪的文本 配合white-space:nowrap; overflow:hidden;使用*/
}
/*CSS 3.0 2D---移动、旋转、放大/缩小、翻转 3D---X轴旋转、Y轴旋转 */
.transform {
    transform: translate(50px, 100px); /*从其当前位置移动 left top*/
    transform: rotate(30deg); /*顺时针旋转给定的角度(允许负值--逆时针旋转)。*/
    transform: scale(2, 4); /*尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数*/
    transform: skew(30deg, 20deg); /*翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数*/
    transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0); /*把所有 2D 转换方法组合在一起*/
    transform: rotateX(120deg); /*围绕其 X 轴以给定的度数进行旋转*/
    transform: rotateY(130deg); /*围绕其 Y 轴以给定的度数进行旋转*/
    -ms-transform: rotateY(130deg); /* IE 9 */
    -webkit-transform: rotateY(130deg); /* Safari and Chrome */
    -o-transform: rotateY(130deg); /* Opera */
    -moz-transform: rotateY(130deg); /* Firefox */
}

/*渐变效果*/
.linear-gradient {
    width: 400px;
    height: 60px;
    /* 底色 */
    background-color: #063053;
    /* chrome 2+, safari 4+; multiple color stops */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
    /* chrome 10+, safari 5.1+ */
    /*background-image: -webkit-linear-gradient(#063053, #395873, #5c7c99);*/
    /* firefox; multiple color stops */
    /*background-image: -moz-linear-gradient(top, #063053, #395873, #5c7c99);*/
    /* ie 6+ */
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');*/
    /* ie8 + */
    /*-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";*/
    /* ie10 */
    /*background-image: -ms-linear-gradient(#063053, #395873, #5c7c99);*/
    /* opera 11.1 */
    /*background-image: -o-linear-gradient(#063053, #395873, #5c7c99);*/
    /* 标准写法 */
    background-image: linear-gradient(#063053, #395873, #5c7c99);
}
/*带角度的渐变效果*/ 
background-image: linear-gradient(180deg, #5e00b7, #d76c00);
/*多个颜色的渐变效果*/
background-image: linear-gradient(red, green, blue, purple, orange);
/*径向渐变做大背景*/
.gradient1   {
    width: 400px;
    height: 400px;
    background-color: #4B770A;
    background-image: -webkit-gradient(radial,
    50% 200, 1,
    50% 200, 200,
    from(rgba(255, 255, 255, 0.3)),
    to(rgba(255, 255, 255, 0)));
    /*//仅实现了webkit下的效果*/
 
}

二，单个能直接拿来用的CSS 3.0 动画

（一），hover时的动画

1，360°旋转 修改rotate(旋转度数)

div
.box {
    width: 100px;
    height: 100px;
    background: #fac;
}
.transform1 {
    transition: All 0.4s ease-in-out;
    -webkit-transition: All 0.4s ease-in-out;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;
}

.transform1:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
}

2，放大 修改scale(放大的值)

div
.box {
    width: 100px;
    height: 100px;
    background: #fac;
}
.transform2 {
    transition: All 0.4s ease-in-out;
    -webkit-transition: All 0.4s ease-in-out;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;
}

.transform2:hover {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
}

3，旋转放大 修改rotate(旋转度数) scale(放大值)

div
.box {
    width: 100px;
    height: 100px;
    background: #fac;
}
.transform3 {
    transition: All 0.4s ease-in-out;
    -webkit-transition: All 0.4s ease-in-out;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;
}

.transform3:hover {
    transform: rotate(360deg) scale(1.2);
    -webkit-transform: rotate(360deg) scale(1.2);
    -moz-transform: rotate(360deg) scale(1.2);
    -o-transform: rotate(360deg) scale(1.2);
    -ms-transform: rotate(360deg) scale(1.2);
}

4，上下左右移动 修改translate(x轴,y轴)

div
.box {
    width: 100px;
    height: 100px;
    background: #fac;
}
.transform4 {
    transition: All 0.4s ease-in-out;
    -webkit-transition: All 0.4s ease-in-out;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;
}

.transform4:hover {
    transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
}

以上动画通过用SCSS改造

// 执行动画以及执行时间设定
@mixin dz($time:0.25s){
    -webkit-transition: all $time ease-in-out;
    -moz-transition: all $time ease-in-out;
    -o-transition: all $time ease-in-out;
    -ms-transition: all $time ease-in-out;
    transition: all $time ease-in-out;
}
// 宣传动画调用
@mixin xz($deg:360){
    transform:rotate($deg+deg);
    -webkit-transform:rotate($deg+deg);
    -moz-transform:rotate($deg+deg);
    -o-transform:rotate($deg+deg);
    -ms-transform:rotate($deg+deg);
}
// 放大动画
@minxin fd($s1:1.2){
    transform:scale($s1);
    -webkit-transform:scale($s1);
    -moz-transform:scale($s1);
    -o-transform:scale($s1);
    -ms-transform:scale($s1);
}
// 旋转放大动画
@mixin xzfd($deg:360,$s1:1.2){
    transform:rotate($deg+deg) scale($s1);
    -webkit-transform:rotate($deg+deg) scale($s1);
    -moz-transform:rotate($deg+deg) scale($s1);
    -o-transform:rotate($deg+deg) scale($s1);
    -ms-transform:rotate($deg+deg) scale($s1);
}
// 移动动画
@mixin yd($s1:0,$s2:0){
    transform:translate($s1,$s2);
    -webkit-transform:translate($s1,$s2);
    -moz-transform:translate($s1,$s2);
    -o-transform:translate($s1,$s2);
    -ms-transform:translate($s1,$s2);
}
使用方法
#somebox{
    @include dz();
    &:hover {
        @include yd(-10px,-10px);
    }
}

5，鼠标悬停抖动效果

WechatIMG63.jpeg

Hover Me

.lanren {
   margin: 100px auto;
   width: 100px;
   text-align: center;
    height: 40px;
    line-height: 40px;
    border: 1px solid #CCC;
    border-radius: 2px;
}
.lanren:hover {
   animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
   transform: translate3d(0, 0, 0);
   backface-visibility: hidden;
   perspective: 1000px;
}
@keyframes shake {
   10%, 90% {
      transform: translate3d(-1px, 0, 0);
   }
   20%, 80% {
      transform: translate3d(2px, 0, 0);
   }
   30%, 50%, 70% {
      transform: translate3d(-4px, 0, 0);
   }
   40%, 60% {
      transform: translate3d(4px, 0, 0);
   }
}

6，圆形边框hover动画

circle.png

html

 
    
circle
 
    

css

      .svg-wrapper {
           position: relative;
           transform: translateY(-50%);
           margin: 100px 100px;
           width: 164px;
       }
       .shape {
           stroke-dasharray: 0 540;
           stroke-dashoffset: -474;
           stroke-width: 1px;
           stroke: #19f6e8;
           border-radius: 100%;
           transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
       }
       .text {
           font-family: 'Roboto Condensed';
           font-size: 22px;
           line-height: 164px;
           letter-spacing: 8px;
           height:164px;
           color: #b03e00;
           top: 0;
           position: absolute;
           left:0;
           width:164px;
           text-align: center;
       }
       .svg-wrapper:hover .shape {
           stroke-width: 2px;
           stroke-dashoffset: 0;
           stroke-dasharray: 760;
           border-radius: 100%;
       }

7，渐变按钮

WechatIMG65.jpeg

html

myButton

css

 .myButton {
    width: 300px;
    height: 60px;
    line-height: 60px;
    text-align: center;
 
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
    background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
    background-color:#ededed;
 
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    cursor:pointer;
    color:#777777;
    font-family:arial;
    font-size:30px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffffff;
    margin-top: 100px;
}
.myButton:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));
    background:-moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
    background:-webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
    background:-o-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
    background:-ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
    background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed',GradientType=0);
    background-color:#dfdfdf;
}
.myButton:active {
    position:relative;
    top:1px;
}

（二），元素切入时的动画

元素宽度100%，高度自定义。另外，还需要根据不同屏幕宽度来做适配，屏幕翻转的时候重新适配一次。
适配的js代码

html代码

    
从上往下透明切入
    
从下往上透明切入
    
从右往左透明切入
    
从左往右透明切入
    
透明进入
    
旋转
    
缩放透明入场
    

        
3D翻转
    
    

        

    

公用css代码

#wrap {
    width: 640px;
    overflow: hidden;
}
#wrap > div {
    width: 100%;
    height: 86px;
    line-height: 86px;
    font-size: 30px;
    text-align: center;
    opacity: 0;
}

1，从左往右透明切入

/*从左往右透明切入*/
@-webkit-keyframes lran {
    0% {
        -webkit-transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        opacity: 1;
    }
}
 
@keyframes lran {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
 
.left_right {
    background: gray;
    -webkit-animation: lran 0.6s 1 1.8s forwards;
    animation: lran 0.6s 1 1.8s forwards;
}

2，从右往左透明切入

/*从右往左透明切入*/
@-webkit-keyframes rlan {
    0% {
        -webkit-transform: translateX(100%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        opacity: 1;
    }
}
 
@keyframes rlan {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
.right_left {
    background: green;
    -webkit-animation: rlan 0.6s 1 1.2s forwards;
    animation: rlan 0.6s 1 1.2s forwards;
}

3，从下往上透明切入

/*从下往上透明切入*/
@-webkit-keyframes btan {
    0% {
        -webkit-transform: translateY(100%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        opacity: 1;
    }
}
 
@keyframes btan {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
 
.down_up {
    background: blue;
    -webkit-animation: btan 0.6s 1 0.6s forwards;
    animation: btan 0.6s 1 0.6s forwards;
}

4，从上往下透明切入

/*从上往下透明切入*/
@-webkit-keyframes tban {
    0% {
        -webkit-transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        opacity: 1;
    }
}
 
@keyframes tban {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
 
.up_down {
    background: red;
    -webkit-animation: tban 0.6s 1 0s forwards;
    animation: tban 0.6s 1 0s forwards;
}

5，旋转动画

/*旋转动画*/
@-webkit-keyframes rotaan {
    0% {
        -webkit-transform: rotateZ(0deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: rotateZ(360deg);
        opacity: 1;
    }
}
 
@keyframes rotaan {
    0% {
        transform: rotateZ(0deg);
        opacity: 0;
    }
    100% {
        transform: rotateZ(360deg);
        opacity: 1;
    }
}
 
.rotatean {
    background: yellow;
    -webkit-animation: rotaan 0.6s 1 3s forwards;
    animation: rotaan 0.6s 1 3s forwards;
}

6，缩放透明入场

/*缩放透明入场*/
@-webkit-keyframes scalean {
    0% {
        -webkit-transform: scale(5);
        opacity: 0;
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}
 
@keyframes scalean {
    0% {
        transform: scale(5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
 
.scale_rotate {
    background: black;
    color: #fff;
    -webkit-animation: scalean 0.6s 1 3.6s forwards;
    animation: scalean 0.6s 1 3.6s forwards;
}

7，透明进入

/*透明进入*/
@-webkit-keyframes opean {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
 
@keyframes opean {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
 
.opacityan {
    background: purple;
    -webkit-animation: opean 0.6s 1 2.4s forwards;
    animation: opean 0.6s 1 2.4s forwards;
}
 
#wrap .flip_warp {
    -webkit-animation: opean 0.4s 1 4.2s forwards;
    animation: opean 0.4s 1 4.2s forwards;
    -webkit-perspective: 800px;
    perspective: 800px;
}
 
#wrap .watering_opean {
    width: 328.7px;
    height: 634px;
    position: fixed;
    top: 10px;
    right: 10px;
    -webkit-animation: opean 0.4s 1 5.2s forwards;
    animation: opean 0.4s 1 5.2s forwards;
}

8，3D翻转 ，上下两个有的时候需要结合使用

/*3D翻转*/
@-webkit-keyframes flipan {
    0% {
        -webkit-transform: rotateX(-180deg);
    }
    100% {
        -webkit-transform: rotateX(0);
    }
}
 
@keyframes flipan {
    0% {
        transform: rotateX(-180deg);
    }
    100% {
        transform: rotateX(0);
    }
}
 
#wrap .flip {
    background: black;
    color: #fff;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    -webkit-animation: flipan 0.6s 1 4.4s forwards;
    animation: flipan 0.6s 1 4.4s forwards;
}

9，序列帧动画

/*序列帧动画*/
@-webkit-keyframes wateringan {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -3287px 0;
    }
}
 
@keyframes wateringan {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -3287px 0;
    }
}
 
#wrap .watering {
    width: 328.7px;
    height: 634px;
    background: url(waterspr.png) no-repeat;
    -webkit-animation: wateringan 1s steps(10, end) 5.6s infinite;
    animation: wateringan 1s steps(10, end) 5.6s infinite;
}

waterspr.png 图片如下：

waterspr.png

（三），加载（loading）动画

1，进度条+数字展示

WechatIMG64.jpeg

html

    

    
0%

js

css

*{
    margin: 0;
    padding: 0;
}
.loading {
    width: 80%;
    height: 36px;
    background: #999;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    border-radius: 5px;
}
 
.loading-con {
    width: 0;
    height: 36px;
    background: green;
}
 
.per-num {
    width: 100%;
    height: 36px;
    line-height: 36px;
    text-align: center;
    color: #fff;
    font-size: 24px;
    position: absolute;
    top: 0;
    left: 0;
}

2，条形元素循环动画展示

WechatIMG61.jpeg

html

css

.spinner1 {
    margin: 100px auto;
    width: 50px;
    height: 60px;
    text-align: center;
    font-size: 10px;
    border: 1px solid #eaeaea;
}
 
.spinner1 > div {
    background-color: #67CF22;
    height: 100%;
    width: 6px;
    display: inline-block;
 
    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
}
 
.spinner1 .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}
 
.spinner1 .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}
 
.spinner1 .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}
 
.spinner1 .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}
 
@-webkit-keyframes stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
    20% { -webkit-transform: scaleY(1.0) }
}
 
@keyframes stretchdelay {
    0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }  20% {
           transform: scaleY(1.0);
           -webkit-transform: scaleY(1.0);
       }
}

3，圆形并排三个缩放动画展示

WechatIMG60.jpeg

html

css

.spinner {  margin: 100px auto 0;
  width: 150px;
  text-align: center;
}
 
.spinner > div {
  width: 30px;
  height: 30px;
  background-color: #67CF22;
 
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
 
.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
 
.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
 
@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}
 
@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

4，圆形环绕大圆旋转动画展示

WechatIMG62.jpeg

html

css

.spinner {  margin: 100px auto;
  width: 20px;
  height: 20px;
  position: relative;
}
 
.container1 > div, .container2 > div, .container3 > div {
  width: 6px;
  height: 6px;
  background-color: #333;
 
  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
 
.spinner .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
 
.container2 {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}
 
.container3 {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}
 
.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }
 
.container2 .circle1 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
 
.container3 .circle1 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
.container1 .circle2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
 
.container2 .circle2 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
 
.container3 .circle2 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
 
.container1 .circle3 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
 
.container2 .circle3 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
 
.container3 .circle3 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
 
.container1 .circle4 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
 
.container2 .circle4 {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
 
.container3 .circle4 {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
 
@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}
 
@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}