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 class="transform1 box">div</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 class="transform2 box">div</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 class="transform3 box">div</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 class="transform4 box">div</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
<div class="lanren">Hover Me</div>

.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

<div class="svg-wrapper"> 
    <svg height="166" width="166" xmlns="http://www.w3.org/2000/svg"> 
         <circle cx="83" fill="#f5f5f5" cy="83" r="81" class="shape" height="166" width="166"></circle> 
         <div class="text">circle</div> 
    </svg>
</div>

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

<div class="myButton">myButton</div>

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代码

<!-- 适配主逻辑 START -->
<script type="text/javascript">
    //适配函数
    function reset() {
        var wrapo = document.getElementById('wrap'),
                clientW = document.documentElement.clientWidth || document.body.clientWidth,
                designw = 640,
                scaleRate = clientW / designw;
        wrapo.style.cssText = "-webkit-transform-origin:0 0;transform-origin:0 0;webkit-transform:scale(" + scaleRate + ");transform:scale(" + scaleRate + ");"
    }
    //初始进来执行一次适配
    reset();
    //当屏幕旋转的时候，再次执行一次适配
    window.addEventListener('resize', function () {
        setTimeout(function () {
            reset();
        }, 100);
    }, false)
</script>
<!-- 适配主逻辑 END -->

html代码

<div id="wrap">
    <div class="up_down">从上往下透明切入</div>
    <div class="down_up">从下往上透明切入</div>
    <div class="right_left">从右往左透明切入</div>
    <div class="left_right">从左往右透明切入</div>
    <div class="opacityan">透明进入</div>
    <div class="rotatean">旋转</div>
    <div class="scale_rotate">缩放透明入场</div>
    <div class="flip_warp">
        <div class="flip">3D翻转</div>
    </div>
    <div class="watering_opean">
        <div class="watering"></div>
    </div>
</div>

公用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

<!-- loading结构 START -->
<div class="loading">
    <div class="loading-con" id="loading-line"></div>
    <p class="per-num" id="loading-per">0%</p>
</div>
<!-- loading结构 END -->

js

 <script>
var imgarr = [
'[http://himg2.huanqiu.com/attachment2010/2012/0525/20120525042526697.jpg'](http://himg2.huanqiu.com/attachment2010/2012/0525/20120525042526697.jpg'), 
'[http://www.chinanews.com/cr/2015/1119/2634365829.jpg'](http://www.chinanews.com/cr/2015/1119/2634365829.jpg'),               
'[http://www.cssn.cn/zt/zt_xkzt/zt_jsxzt/jsx_jjnh/nh_rtzx/201412/W020141208537235397889.jpg'](http://www.cssn.cn/zt/zt_xkzt/zt_jsxzt/jsx_jjnh/nh_rtzx/201412/W020141208537235397889.jpg'), 
'[http://www.cssn.cn/zt/zt_xkzt/zt_jsxzt/jsx_jjnh/nh_rtzx/201412/W020141208537235397889.jpg'](http://www.cssn.cn/zt/zt_xkzt/zt_jsxzt/jsx_jjnh/nh_rtzx/201412/W020141208537235397889.jpg'),              
'[http://www.xinhuanet.com/world/titlepic/111547/1115479659_title0h.jpg'](http://www.xinhuanet.com/world/titlepic/111547/1115479659_title0h.jpg'), 
'[http://www.redjun.com/uploads/allimg/150123/102302G57-4.jpg'](http://www.redjun.com/uploads/allimg/150123/102302G57-4.jpg'),         
'[http://www.gzsrex.com/Uploads/201405/53686507a525b.jpg'](http://www.gzsrex.com/Uploads/201405/53686507a525b.jpg'), 
'[http://pic39.nipic.com/20140316/3344588_235616333189_2.jpg'](http://pic39.nipic.com/20140316/3344588_235616333189_2.jpg') ],
//要加载的图片地址，此处是直接从网上找的，模拟效果用，实现场景要换成真的

loadingL = document.getElementById("loading-line"),   //进度条
loadingPer = document.getElementById("loading-per");   //进度值   

//改变进度函数
function changefn(num) {
    loadingL.style.width = num + '%';     
    loadingPer.innerHTML = num + '%';   
}

function loadingfn() {
    var imgo = new Image(),//图像对象
    imglen = imgarr.length - 1,
    count = 0,
    pernum = 0;
    imgo.src = imgarr[count];
    imgo.onload = function () {
        count++;
        pernum = parseInt(count / imglen * 100);
        changefn(pernum);
        if (count == imglen) {
            //这里执行页面初始化工作
            alert('图片加载完成喽！可以进入初始化')
            return;
        }           
        this.src = imgarr[count];
    };
    imgo.onerror = function() {
        //这里执行页面初始化工作
        alert('图片出错直接加载完成喽！可以进入初始化')
    };
}
loadingfn();
</script>

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

<div class="spinner1">
    <div class="rect1"></div>
    <div class="rect2"></div>
    <div class="rect3"></div>
    <div class="rect4"></div>
    <div class="rect5"></div>
</div>

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

<div class="spinner">  
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>

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


<div class="spinner">
  <div class="spinner-container container1">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
  </div>
  <div class="spinner-container container2">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
  </div>
  <div class="spinner-container container3">
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
    <div class="circle4"></div>
  </div>
</div>

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);
  }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,607评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,047评论 2赞 379
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,496评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,405评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,400评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,479评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,883评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,535评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,743评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,309评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,881评论 3赞 306
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2赞 342

推荐阅读更多精彩内容