×

用CSS3实现广告的展示动画特效

作者:andy0012018.03.06来源:Web前端之家浏览:16830评论:1
关键词:CSS3广告

用CSS3实现广告的展示动画特效,不需要用JS哦,大家可以学习下,很多地方都可以用到,还在等什么呢,代码奉上啦!

展示图:

图片.png

DEMO代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>用CSS3实现广告的展示动画特效 - Web前端之家</title>
    <meta charset="utf-8" />
    <style>
        html,body{
            margin:0px;
        }
        .gwd-pagedeck{
            position:relative;
        }
        .gwd-pagedeck >.gwd-page{
            position:absolute;
            left:0;
            top:0;
            width: 336px;
            height: 280px;
            background:#000;
            overflow:hidden;
            cursor:pointer;
        }
        .gwd-page-content{
            position:absolute;
            background-color:transparent;
            width: 336px;
            height: 280px;
        }
        .gwd-img01{
            position:absolute;
            left:0;
            top:0;
            width: 336px;
            height: 280px;
            transform:scale3d(1.3,1.3,1.3);
            -moz-transform:scale3d(1.3,1.3,1.3);
            -webkit-transform:scale3d(1.3,1.3,1.3);
            transform-style:preserve-3d;
            -moz-transform-style:preserve-3d;
            -webkit-transform-style:preserve-3d;
        }
        .gwd-animation01{
            animation:gwd-animation01 8.844s linear 0s 1 normal forwards;
            -moz-animation:gwd-animation01 8.844s linear 0s 1 normal forwards;
            -webkit-animation:gwd-animation01 8.844s linear 0s 1 normal forwards;
        }
        .gwd-img02{
            position:absolute;
            left:0;
            top:0;
            width: 336px;
            height: 280px;
            opacity:0;
            transform:scale3d(1.3,1.3,1.3);
            -moz-transform:scale3d(1.3,1.3,1.3);
            -webkit-transform:scale3d(1.3,1.3,1.3);
            transform-style:preserve-3d;
            -webkit-transform-style:preserve-3d;
            -moz-transform-style:preserve-3d;
        }
        .gwd-animation02{
            animation:gwd-animation02 14.6s linear 0s 1 normal forwards;
            -moz-animation:gwd-animation02 14.6s linear 0s 1 normal forwards;
            -webkit-animation:gwd-animation02 14.6s linear 0s 1 normal forwards;
        }
        .gwd-img03{
            position:absolute;
            top:-78px;
            left:155px;
            opacity:1;
            width:165px;
            height:66px;
            transform-style:preserve-3d;
            -webkit-transform-style:preserve-3d;
            -moz-transform-style:preserve-3d;
        }
        .gwd-animation03{
            animation:gwd-animation03 .6s linear 0s 1 normal forwards;
            -moz-animation:gwd-animation03 .6s linear 0s 1 normal forwards;
            -webkit-animation:gwd-animation03 .6s linear 0s 1 normal forwards;
        }
        .gwd-img04{
            position: absolute;
            top: -74px;
            width: 33px;
            height: 49px;
            left: 162px;
        }
         .gwd-animation04{
             animation:gwd-animation04 2.2s linear 0s 1 normal forwards;
             -moz-animation:gwd-animation04 2.2s linear 0s 1 normal forwards;
             -webkit-animation:gwd-animation04 2.2s linear 0s 1 normal forwards;
         }
         .gwd-img05{
             position:absolute;
             left:160px;
             top:-36px;
             width:88px;
             height:15px;
             transform-style:preserve-3d;
            -moz-transform-style:preserve-3d;
            -webkit-transform-style:preserve-3d;
            transform:translate3d(47px,0px,0px);
            -moz-transform:translate3d(47px,0px,0px);
            -webkit-transform:translate3d(47px,0px,0px);
         }
         .gwd-animation05{
             animation:gwd-animation05 1.8s linear 0s 1 normal forwards;
             -moz-animation:gwd-animation05 1.8s linear 0s 1 normal forwards;
             -webkit-animation:gwd-animation05 1.8s linear 0s 1 normal forwards;
         }
         .gwd-img06{
            position: absolute;
            height: 1px;
            left: 159px;
            top: -45px;
            transform-style:preserve-3d;
            -moz-transform-style:preserve-3d;
            -webkit-transform-style:preserve-3d;
            transform:translate3d(47px,0px,0px);
            -moz-transform:translate3d(47px,0px,0px);
            -webkit-transform:translate3d(47px,0px,0px);
         } 
         .gwd-animation06{
             animation:gwd-animation06 2.6s linear 0s 1 normal forwards;
             -moz-animation:gwd-animation06 2.6s linear 0s 1 normal forwards;
             -webkit-animation:gwd-animation06 2.6s linear 0s 1 normal forwards;
         }
         .gwd-img07{
             position:absolute;
             top: -62px;
             opacity: 1;
             left: 207px;
             width: 104px;
             height: 14px;
         } 
         .gwd-animation07{
             animation:gwd-animation07 9.56s linear 0s 1 normal forwards;
             -moz-animation:gwd-animation07 9.56s linear 0s 1 normal forwards;
             -webkit-animation:gwd-animation07 9.56s linear 0s 1 normal forwards;
         }
         .gwd-img08{
             position: absolute;
             left: 119px;
             top: 39px;
             opacity:0;
             width:6px;
             height:6px;
             transform-style:preserve-3d;
            -moz-transform-style:preserve-3d;
            -webkit-transform-style:preserve-3d;
            transform:translate3d(46px,3px,0px);
            -moz-transform:translate3d(46px,3px,0px);
            -webkit-transform:translate3d(46px,3px,0px);
         } 
         .gwd-animation08{
             animation:gwd-animation08 9.973s linear 0s 1 normal forwards;
             -moz-animation:gwd-animation08 9.973s linear 0s 1 normal forwards;
             -webkit-animation:gwd-animation08 9.973s linear 0s 1 normal forwards;
         }
         .gwd-img09{
            position: absolute;
            left: 138px;
            top: 97px;
            opacity: 0;
            width: 44px;
            height: 21px;
            transform-style:preserve-3d;
            -moz-transform-style:preserve-3d;
            -webkit-transform-style:preserve-3d;
            transform:translate3d(138px,0,0);
            -moz-transform:translate3d(138px,0,0);
            -webkit-transform:translate3d(138px,0,0);
         } 
         .gwd-animation09{
             animation:gwd-animation09 8.846s linear  0s 1 normal forwards;
             -moz-animation:gwd-animation09 8.846s linear  0s 1 normal forwards;
             -webkit-animation:gwd-animation09 8.846s linear  0s 1 normal forwards;
         }
         .gwd-img10{
             position:absolute;
             width: 218px;
             height: 21px;
             left: 138px;
             top: 124px;
             opacity: 0;
             ransform-style:preserve-3d;
             -moz-transform-style:preserve-3d;
             -webkit-transform-style:preserve-3d;
             transform:translate3d(-37px,0,0);
             -moz-transform:translate3d(-37px,0,0);
             -webkit-transform:translate3d(-37px,0,0);
         } 
         .gwd-animation10{
             animation:gwd-animation10 8.6s linear  0s 1 normal forwards;
             -moz-animation:gwd-animation10 8.6s linear  0s 1 normal forwards;
             -webkit-animation:gwd-animation10 8.6s linear  0s 1 normal forwards;
         }
         .gwd-img11{
             position: absolute;
             top: 10px;
             opacity: 0;
             height: 13px;
             left: 206px;
             width: 26px;
         } 
         .gwd-animation11{
             animation:gwd-animation11 14.24s linear  0s 1 normal forwards;
             -moz-animation:gwd-animation11 14.24s linear  0s 1 normal forwards;
             -webkit-animation:gwd-animation11 14.24s linear  0s 1 normal forwards;
         }
         .gwd-img12{
             position: absolute;
             width: 6px;
             height: 6px;
             left: 151px;
             top: 28px;
             transform-style: preserve-3d;
             -webkit-transform-style: preserve-3d;
             -moz-transform-style: preserve-3d;
             opacity: 0;
             transform: translate3d(18px, 11px, 0);
             -webkit-transform: translate3d(18px, 11px, 0);
             -moz-transform: translate3d(18px, 11px, 0);
         } 
         .gwd-animation12{
             animation:gwd-animation12 14.34s linear  0s 1 normal forwards;
             -moz-animation:gwd-animation12 14.34s linear  0s 1 normal forwards;
             -webkit-animation:gwd-animation12 14.34s linear  0s 1 normal forwards;
         }
         .gwd-img13{
             position: absolute;
             top: 99px;
             left: 236px;
             opacity: 0;
             width: 42px;
             height: 20px;
             transform-style: preserve-3d;
             -webkit-transform-style: preserve-3d;
             -moz-transform-style: preserve-3d;
             transform: translate3d(42px, 30px, 0);
             -webkit-transform: translate3d(42px, 30px, 0);
             -moz-transform: translate3d(42px, 30px, 0);
         } 
         .gwd-animation13{
             animation:gwd-animation13 14.541s linear  0s 1 normal forwards;
             -moz-animation:gwd-animation13 14.541s linear  0s 1 normal forwards;
             -webkit-animation:gwd-animation13 14.541s linear  0s 1 normal forwards;
         }
         .gwd-img14{
             height: 22px;
             width: 240px;
             left: 134px;
             top: 126px;
             opacity: 0;
             position:absolute;
             transform-style: preserve-3d;
             -webkit-transform-style: preserve-3d;
             -moz-transform-style: preserve-3d;
             transform: translate3d(-54px, 30px, 0);
             -webkit-transform: translate3d(-54px, 30px, 0);
             -moz-transform: translate3d(-54px, 30px, 0);
         } 
         .gwd-animation14{
             animation:gwd-animation14 15.24s linear  0s 1 normal forwards;
             -moz-animation:gwd-animation14 15.24s linear  0s 1 normal forwards;
             -webkit-animation:gwd-animation14 15.24s linear  0s 1 normal forwards;
         }
         .gwd-img15{
             display: block;
             left: 0px;
             position: absolute;
             width: 336px;
             height: 280px;
             top: 280px;
             transform:translate3d(0,0,0);
             -moz-transform:translate3d(0,0,0);
             -webkit-transform:translate3d(0,0,0);
         } 
         .gwd-animation15{
             animation:gwd-animation15 15.494s linear 0s 1 normal forwards;
             -moz-animation:gwd-animation15 15.494s linear 0s 1 normal forwards;
             -webkit-animation:gwd-animation15 15.494s linear 0s 1 normal forwards;
         }
         .gwd-img16{
            display: block;
            height: 23px;
            left: 98px;
            opacity: 0;
            position: absolute;
            top: 209px;
            width: 138px;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            transform: translate3d(-6px, 26px, 0);
            -webkit-transform: translate3d(-6px, 26px, 0);
            -moz-transform: translate3d(-6px, 26px, 0);
         } 
         .gwd-animation16{
             animation:gwd-animation16 2.974s linear 17s 1 normal forwards;
             -moz-animation:gwd-animation16 2.974s linear 17s 1 normal forwards;
             -webkit-animation:gwd-animation16 2.974s linear 17s 1 normal forwards;
         }
         .gwd-img17{
            display: block;
            left: 95px;
            opacity: 0;
            position: absolute;
            top: 0px;
            width: 174px;
            height: 64px;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            transform: translate3d(-14px, -1px, 0);
            -webkit-transform: translate3d(-14px, -1px, 0);
            -moz-transform: translate3d(-14px, -1px, 0);
         } 
         .gwd-animation17{
             animation:gwd-animation17 .8s linear 16.16s 1 normal forwards;
             -moz-animation:gwd-animation17 .8s linear 16.16s 1 normal forwards;
             -webkit-animation:gwd-animation17 .8s linear 16.16s 1 normal forwards;
         }
         .gwd-img18{
            display: block;
            left: -44px;
            opacity: 0;
            position: absolute;
            top: 273px;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            width: 117px;
            height: 35px;
            transform: translate3d(145px, -132px, 0);
            -webkit-transform: translate3d(145px, -132px, 0);
            -moz-transform: translate3d(145px, -132px, 0);
         } 
         .gwd-animation18{
             animation:gwd-animation18 2.053s linear 17.907s 1 normal forwards;
             -moz-animation:gwd-animation18 2.053s linear 17.907s 1 normal forwards;
             -webkit-animation:gwd-animation18 2.053s linear 17.907s 1 normal forwards;
         }
        @keyframes gwd-animation01{
            0%{
                transform:scale3d(1.3,1.3,1.3);
                -moz-transform:scale3d(1.3,1.3,1.3);
                -webkit-transform:scale3d(1.3,1.3,1.3);
                width: 336px;
                height: 280px;
                animation-timing-function:linear;
                -moz-animation-timing-function:linear;
                -webkit-animation-timing-function:linear;
            }
            100%{
                transform:scale3d(1,1,1);
                -moz-transform:scale3d(1,1,1);
                -webkit-transform:scale3d(1,1,1);
                width: 336px;
                height: 280px;
                animation-timing-function:linear;
                -moz-animation-timing-function:linear;
                -webkit-animation-timing-function:linear;
            }
        }
        @-webkit-keyframes gwd-animation01{
            0%{
                transform:scale3d(1.3,1.3,1.3);
                -moz-transform:scale3d(1.3,1.3,1.3);
                -webkit-transform:scale3d(1.3,1.3,1.3);
                width: 336px;
                height: 280px;
                animation-timing-function:linear;
                -moz-animation-timing-function:linear;
                -webkit-animation-timing-function:linear;
            }
            100%{
                transform:scale3d(1,1,1);
                -moz-transform:scale3d(1,1,1);
                -webkit-transform:scale3d(1,1,1);
                width: 336px;
                height: 280px;
                animation-timing-function:linear;
                -moz-animation-timing-function:linear;
                -webkit-animation-timing-function:linear;
            }
        }
        @keyframes gwd-animation02{
            0%{
                opacity:0;
                transform:scale3d(1.3,1.3,1.3);
                -moz-transform:scale3d(1.3,1.3,1.3);
                -webkit-transform:scale3d(1.3,1.3,1.3);
                animation-timing-function:linear;
                -moz-animation-timing-function:linear;
                -webkit-animation-timing-function:linear;
            }
            60.27%{
                 opacity:0;
                transform:scale3d(1.3,1.3,1.3);
                -moz-transform:scale3d(1.3,1.3,1.3);
                -webkit-transform:scale3d(1.3,1.3,1.3);
                animation-timing-function:linear;
                -moz-animation-timing-function:linear;
                -webkit-animation-timing-function:linear;
            }
            63.7%{
                opacity:1;
                transform:scale3d(1.25714,1.25714,1.25714);
                -moz-transform:scale3d(1.25714,1.25714,1.25714);
                -webkit-transform:scale3d(1.25714,1.25714,1.25714);
                animation-timing-function:linear;
                -moz-animation-timing-function:linear;
                -webkit-animation-timing-function:linear;
            }
            100%{
                 opacity:1;
                transform:scale3d(1,1,1);
                -moz-transform:scale3d(1,1,1);
                -webkit-transform:scale3d(1,1,1);
                animation-timing-function:linear;
                -moz-animation-timing-function:linear;
                -webkit-animation-timing-function:linear;
            }
        }
        @keyframes gwd-animation03{
            0%{
                top:-78px;
                left:155px;
                opacity:1;
                animation-timing-function:linear;
                -moz-animation-timing-function:linear;
                -webkit-animation-timing-function:linear;
            }
           100%{
               top:0px;
               left:155px;
               opacity:1;
               animation-timing-function:linear;
               -moz-animation-timing-function:linear;
               -webkit-animation-timing-function:linear;
           }

        }
        @keyframes gwd-animation04{
            0%{
                top: -74px;
                left: 162px;
                animation-timing-function:linear;
                -moz-animation-timing-function:linear;
                -webkit-animation-timing-function:linear;
            }
            66.67%{
                top: -74px;
                left: 162px;
                animation-timing-function:linear;
                -moz-animation-timing-function:linear;
                -webkit-animation-timing-function:linear;
            }
            100%{
                top: 10px;
                left: 162px;
                animation-timing-function:linear;
                -moz-animation-timing-function:linear;
                -webkit-animation-timing-function:linear;
            }
        }
        @keyframes gwd-animation05{
            0%{
                top:-36px;
                transform:translate3d(47px,0px,0px);
                -moz-transform:translate3d(47px,0px,0px);
                -webkit-transform:translate3d(47px,0px,0px);
                animation-timing-function:linear;
                -moz-animation-timing-function:linear;
                -webkit-animation-timing-function:linear;
            }
            63.64%{
                top:-36px;
                transform:translate3d(47px,0px,0px);
                -moz-transform:translate3d(47px,0px,0px);
                -webkit-transform:translate3d(47px,0px,0px);
                animation-timing-function:linear;
                -moz-animation-timing-function:linear;
                -webkit-animation-timing-function:linear;
            }
            100%{
                top:32px;
                transform:translate3d(47px,10px,0px);
                -moz-transform:translate3d(47px,10px,0px);
                -webkit-transform:translate3d(47px,10px,0px);
                animation-timing-function:linear;
                -moz-animation-timing-function:linear;
                -webkit-animation-timing-function:linear;
            }
        }
        @keyframes gwd-animation06{
            0%{
                transform: translate3d(47px, 0, 0);
                -webkit-transform: translate3d(47px, 0, 0);
                -moz-transform: translate3d(47px, 0, 0);
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
            69.23%{
                transform: translate3d(47px, 0, 0);
                -webkit-transform: translate3d(47px, 0, 0);
                -moz-transform: translate3d(47px, 0, 0);
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
            100%{
                transform: translate3d(47px, 79px, 0);
                -webkit-transform: translate3d(47px, 79px, 0);
                -moz-transform: translate3d(47px, 79px, 0);
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
        }
        @keyframes gwd-animation07{
            0%{
             top: -62px;
             left: 207px;
             opacity: 1;
             animation-timing-function: linear;
             -webkit-animation-timing-function: linear;
             -moz-animation-timing-function: linear;
            }
            29.29%{
             top: -62px;
             left: 207px;
             opacity: 1;
             animation-timing-function: linear;
             -webkit-animation-timing-function: linear;
             -moz-animation-timing-function: linear;
            }
            39.56%{
             top: 15px;
             left: 207px;
             opacity: 1;
             animation-timing-function: linear;
             -webkit-animation-timing-function: linear;
             -moz-animation-timing-function: linear;
            }
            94.21%{
             top: 15px;
             left: 207px;
             opacity: 1;
             animation-timing-function: linear;
             -webkit-animation-timing-function: linear;
             -moz-animation-timing-function: linear;
            }
            100%{
             top: 1px;
             left: 207px;
             opacity: 0;
             animation-timing-function: linear;
             -webkit-animation-timing-function: linear;
             -moz-animation-timing-function: linear;
            }
        }
        @keyframes gwd-animation08{
            0%{
             opacity:0;
             width:6px;
             height:6px;
             transform:translate3d(46px,3px,0px);
            -moz-transform:translate3d(46px,3px,0px);
            -webkit-transform:translate3d(46px,3px,0px);
            animation-timing-function: linear;
             -webkit-animation-timing-function: linear;
             -moz-animation-timing-function: linear;
            }
            24.06%{
             opacity:0;
             width:8px;
             height:8px;
             transform:translate3d(46px,3px,0px);
            -moz-transform:translate3d(46px,3px,0px);
            -webkit-transform:translate3d(46px,3px,0px);
            animation-timing-function: linear;
             -webkit-animation-timing-function: linear;
             -moz-animation-timing-function: linear;
            }
            29.08%{
             opacity:1;
             width:8px;
             height:8px;
             transform:translate3d(46px,3px,0px);
            -moz-transform:translate3d(46px,3px,0px);
            -webkit-transform:translate3d(46px,3px,0px);
            animation-timing-function: linear;
             -webkit-animation-timing-function: linear;
             -moz-animation-timing-function: linear;
            }
            96.59%{
             opacity:1;
             width:8px;
             height:8px;
             transform:translate3d(46px,3px,0px);
            -moz-transform:translate3d(46px,3px,0px);
            -webkit-transform:translate3d(46px,3px,0px);
            animation-timing-function: linear;
             -webkit-animation-timing-function: linear;
             -moz-animation-timing-function: linear;
            }
            100%{
             opacity:0;
             width:20px;
             height:20px;
             transform:translate3d(46px,3px,50px);
            -moz-transform:translate3d(46px,3px,50px);
            -webkit-transform:translate3d(46px,3px,50px);
            animation-timing-function: linear;
             -webkit-animation-timing-function: linear;
             -moz-animation-timing-function: linear;
            }
        }
        @keyframes gwd-animation09{
            0%{
                opacity:0;
                transform:translate3d(138px,0px,0px);
                -moz-transform:translate3d(138px,0px,0px);
                -webkit-transform:translate3d(138px,0px,0px);
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
            38.44%{
                opacity:0;
                transform:translate3d(138px,10px,0px);
                -moz-transform:translate3d(138px,10px,0px);
                -webkit-transform:translate3d(138px,10px,0px);
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
            53.13%{
                opacity:1;
                transform:translate3d(138px,-19px,0px);
                -moz-transform:translate3d(138px,-19px,0px);
                -webkit-transform:translate3d(138px,-19px,0px);
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
            94.44%{
                opacity:1;
                transform:translate3d(138px,-19px,0px);
                -moz-transform:translate3d(138px,-19px,0px);
                -webkit-transform:translate3d(138px,-19px,0px);
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
            100%{
                opacity:0;
                transform:translate3d(138px,18px,0px);
                -moz-transform:translate3d(138px,18px,0px);
                -webkit-transform:translate3d(138px,18px,0px);
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
        }
        @keyframes gwd-animation10{
            0%{
                opacity:0;
                transform:translate3d(-37px,0,0);
                -moz-transform:translate3d(-37px,0,0);
                -webkit-transform:translate3d(-37px,0,0);
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
            44.19%{
                opacity:0;
                transform:translate3d(-37px,17px,0);
                -moz-transform:translate3d(-37px,17px,0);
                -webkit-transform:translate3d(-37px,17px,0);
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
            60.47%{
                opacity:1;
                transform:translate3d(-37px,-14px,0);
                -moz-transform:translate3d(-37px,-14px,0);
                -webkit-transform:translate3d(-37px,-14px,0);
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
            90.55%{
                opacity:1;
                transform:translate3d(-37px,-14px,0);
                -moz-transform:translate3d(-37px,-14px,0);
                -webkit-transform:translate3d(-37px,-14px,0);
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
            100%{
                opacity:0;
                transform:translate3d(-37px,18px,0);
                -moz-transform:translate3d(-37px,18px,0);
                -webkit-transform:translate3d(-37px,18px,0);
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
        }
        @keyframes gwd-animation11{
            0%{
                top: 10px;
                left: 206px;
                opacity: 0;
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
            67.42%{
                top: 15px;
                left: 206px;
                opacity: 0;
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
            70.93%{
                top: 15px;
                left: 206px;
                opacity: 1;
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
            100%{
                top: 15px;
                left: 206px;
                opacity: 1;
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
        }
        @keyframes gwd-animation12{
            0%{
                opacity: 0;
                transform: translate3d(18px, 11px, 0);
                -webkit-transform: translate3d(18px, 11px, 0);
                -moz-transform: translate3d(18px, 11px, 0);
                width: 6px;
                height: 6px;
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
            33.47%{
                transform: translate3d(18px, 11px, 0);
                -webkit-transform: translate3d(18px, 11px, 0);
                -moz-transform: translate3d(18px, 11px, 0);
                width: 8px;
                height: 8px;
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
            69.74%{
                opacity: 0;
                transform: translate3d(18px, 11px, 0);
                -webkit-transform: translate3d(18px, 11px, 0);
                -moz-transform: translate3d(18px, 11px, 0);
                width: 8px;
                height: 8px;
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
            73.22%{
                opacity: 1;
                transform: translate3d(18px, 11px, 0);
                -webkit-transform: translate3d(18px, 11px, 0);
                -moz-transform: translate3d(18px, 11px, 0);
                width:8px;
                height: 8px;
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
            100%{
                opacity: 1;
                transform: translate3d(18px, 11px, 0);
                -webkit-transform: translate3d(18px, 11px, 0);
                -moz-transform: translate3d(18px, 11px, 0);
                width:8px;
                height: 8px;
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
        }
        @keyframes gwd-animation13{
            0%{
                transform: translate3d(42px, 30px, 0);
                -webkit-transform: translate3d(42px, 30px, 0);
                -moz-transform: translate3d(42px, 30px, 0);
                opacity: 0;
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
            76.33%{
                transform: translate3d(42px, 11px, 0);
                -webkit-transform: translate3d(42px, 11px, 0);
                -moz-transform: translate3d(42px, 11px, 0);
                opacity: 0;
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
            83.9%{
                transform: translate3d(42px, -20px, 0);
                -webkit-transform: translate3d(42px, -20px, 0);
                -moz-transform: translate3d(42px, -20px, 0);
                opacity: 1;
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
            100%{
                transform: translate3d(42px, -20px, 0);
                -webkit-transform: translate3d(42px, -20px, 0);
                -moz-transform: translate3d(42px, -20px, 0);
                opacity: 1;
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
        }
        @keyframes gwd-animation14{
            0%{
                transform: translate3d(-54px, 0, 0);
                -webkit-transform: translate3d(-54px, 0, 0);
                -moz-transform: translate3d(-54px, 0, 0);
                opacity: 0;
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
            75.47%{
                transform: translate3d(-54px, 9px, 0);
                -webkit-transform: translate3d(-54px, 9px, 0);
                -moz-transform: translate3d(-54px, 9px, 0);
                opacity: 0;
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
            82.68%{
                transform: translate3d(-54px, -15px, 0);
                -webkit-transform: translate3d(-54px, -15px, 0);
                -moz-transform: translate3d(-54px, -15px, 0);
                opacity: 1;
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
            100%{
                transform: translate3d(-54px, -15px, 0);
                -webkit-transform: translate3d(-54px, -15px, 0);
                -moz-transform: translate3d(-54px, -15px, 0);
                opacity: 1;
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
        }
        @keyframes gwd-animation15{
            0%{
                top: 280px;
                transform:translate3d(0,0,0);
                -moz-transform:translate3d(0,0,0);
                -webkit-transform:translate3d(0,0,0);
                animation-timing-function:linear;
                -moz-animation-timing-function:linear;
                -webkit-animation-timing-function:linear;
            }
            98.8%{
                top: 280px;
                transform:translate3d(0,0,0);
                -moz-transform:translate3d(0,0,0);
                -webkit-transform:translate3d(0,0,0);
                animation-timing-function:linear;
                -moz-animation-timing-function:linear;
                -webkit-animation-timing-function:linear;
            }
            100%{
                top: 0px;
                transform:translate3d(0,0,0);
                -moz-transform:translate3d(0,0,0);
                -webkit-transform:translate3d(0,0,0);
                animation-timing-function:linear;
                -moz-animation-timing-function:linear;
                -webkit-animation-timing-function:linear;
            }
        }
        @keyframes gwd-animation16{
            0%{
                transform: translate3d(-6px, 26px, 0);
                -webkit-transform: translate3d(-6px, 26px, 0);
                -moz-transform: translate3d(-6px, 26px, 0);
                opacity: 0;
                width: 154px;
                height: 26px;
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
            31.41% {
                transform: translate3d(-6px, 26px, 0);
                -webkit-transform: translate3d(-6px, 26px, 0);
                -moz-transform: translate3d(-6px, 26px, 0);
                opacity: 1;
                width: 154px;
                height: 26px;
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
            100%{
                transform: translate3d(-6px, 26px, 0);
                -webkit-transform: translate3d(-6px, 26px, 0);
                -moz-transform: translate3d(-6px, 26px, 0);
                opacity: 1;
                width: 154px;
                height: 26px;
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
        }
        @keyframes gwd-animation17{
            0%{
                transform: translate3d(-14px, -1px, 0);
                -webkit-transform: translate3d(-14px, -1px, 0);
                -moz-transform: translate3d(-14px, -1px, 0);
                opacity: 0;
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
            100%{
                transform: translate3d(-14px, 39px, 0);
                -webkit-transform: translate3d(-14px, 39px, 0);
                -moz-transform: translate3d(-14px, 39px, 0);
                opacity: 1;
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
        }
        @keyframes gwd-animation18{
            0%{
                transform: translate3d(145px, -132px, 0);
                -webkit-transform: translate3d(145px, -132px, 0);
                -moz-transform: translate3d(145px, -132px, 0);
                opacity: 0;
                width: 132px;
                height: 39px;
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;

            }
            38.97%{
                transform: translate3d(145px, -149px, 0);
                -webkit-transform: translate3d(145px, -149px, 0);
                -moz-transform: translate3d(145px, -149px, 0);
                opacity: 1;
                width: 132px;
                height: 39px;
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
            100%{
                transform: translate3d(145px, -149px, 0);
                -webkit-transform: translate3d(145px, -149px, 0);
                -moz-transform: translate3d(145px, -149px, 0);
                opacity: 1;
                width: 132px;
                height: 39px;
                animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
            }
        }
    </style>
</head>
<body>
    <div class="gwd-pagedeck">
        <div class="gwd-page">
            <div class="gwd-page-content">
                <img class="gwd-img01 gwd-animation01" src="http://s0.2mdn.net/6835009/1501144998422/336x280Dreamy%20Plan2_A_glacier_DBM/1387-Franz-Josef-Glacier-West-Coast-Fraser-Clements.png"/>
                <img class="gwd-img02 gwd-animation02" src="http://s0.2mdn.net/6835009/1501144998422/336x280Dreamy%20Plan2_A_glacier_DBM/___2.png"/>
                <img class="gwd-img03 gwd-animation03" src="http://s0.2mdn.net/6835009/1501144998422/336x280Dreamy%20Plan2_A_glacier_DBM/BG.png"/>
                <img class="gwd-img04 gwd-animation04" src="http://s0.2mdn.net/6835009/1501144998422/336x280Dreamy%20Plan2_A_glacier_DBM/MAP_2.png" />
                <img class="gwd-img05 gwd-animation05" src="http://s0.2mdn.net/6835009/1501144998422/336x280Dreamy%20Plan2_A_glacier_DBM/___logo.png"/>
                <img class="gwd-img06 gwd-animation06" src="http://s0.2mdn.net/6835009/1501144998422/336x280Dreamy%20Plan2_A_glacier_DBM/line_1.png" />
                <img class="gwd-img07 gwd-animation07" src="http://s0.2mdn.net/6835009/1501144998422/336x280Dreamy%20Plan2_A_glacier_DBM/_________.png" />
                <img class="gwd-img08 gwd-animation08" src="http://s0.2mdn.net/6835009/1501144998422/336x280Dreamy%20Plan2_A_glacier_DBM/___.png" />
                <img class="gwd-img09 gwd-animation09" src="http://s0.2mdn.net/6835009/1501144998422/336x280Dreamy%20Plan2_A_glacier_DBM/_____________1.png" />
                <img class="gwd-img10 gwd-animation10" src="http://s0.2mdn.net/6835009/1501144998422/336x280Dreamy%20Plan2_A_glacier_DBM/_____________2.png" />
                <img class="gwd-img11 gwd-animation11" src="http://s0.2mdn.net/6835009/1501144998422/336x280Dreamy%20Plan2_A_glacier_DBM/1-___.png" />
                <img class="gwd-img12 gwd-animation12" src="http://s0.2mdn.net/6835009/1501144998422/336x280Dreamy%20Plan2_A_glacier_DBM/320x50_0001s_0000s_0000s_0003____.png" />
                <img class="gwd-img13 gwd-animation13" src="http://s0.2mdn.net/6835009/1501144998422/336x280Dreamy%20Plan2_A_glacier_DBM/______________1.png" />
                <img class="gwd-img14 gwd-animation14" src="http://s0.2mdn.net/6835009/1501144998422/336x280Dreamy%20Plan2_A_glacier_DBM/______________2.png" />
                <div class="mask"></div>
                <img class="gwd-img15 gwd-animation15" src="http://s0.2mdn.net/6835009/1501144998422/336x280Dreamy%20Plan2_A_glacier_DBM/___2_1.png"/>
                <img class="gwd-img16 gwd-animation16" src="http://s0.2mdn.net/6835009/1501144998422/336x280Dreamy%20Plan2_A_glacier_DBM/Logo_1.png" />
                <img class="gwd-img17 gwd-animation17" src="http://s0.2mdn.net/6835009/1501144998422/336x280Dreamy%20Plan2_A_glacier_DBM/__________.png" />
                <img class="gwd-img18 gwd-animation18" src="http://s0.2mdn.net/6835009/1501144998422/336x280Dreamy%20Plan2_A_glacier_DBM/____1_2.png" />
                <div class=""></div>
            </div>
        </div>
    </div>
</body>
</html>


您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/CSS3SDFJSJKDJFSKDJFL1234.html

网友评论文明上网理性发言 已有1人参与

发表评论:

评论列表

  • dconc dconc  发布于 2018-03-06 10:31:00   回复该评论
  • CSS3动画效果挺不错的,为啥不能循环啊。