123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152 |
- body,html{
- width: 100%;
- height: 100%;
- margin:0 auto;
- font-family:PingFangSC-Regular,sans-serif;
- }
- body{
- font-size: 16px;
- }
- a{
- color: #fff;
- }
- .container{
- width: 100%;
-
- background-color: #000;
- overflow: hidden;
- }
- @media screen and (min-width:1025px){
- .main{
- width: 62.5%;
- margin: 0 auto;
- }
- .wenan::before{
-
- width: 25%;
- top: 15px;
- left: 6%;
- }
- .wenan::after{
- width: 25%;
-
- top:15px;
- right: 6%;
- }
- .footer{
-
- padding: 20px 20% ;
- /* padding: 20px 384px\9; */
- }
- .footer .infobox{
- float: left;
-
- }
- .chuli{
- position: relative;
- top: 0;
-
- left:12px;
- }
- .team .iconbox p{
-
-
- font-size: 18px;
- }
- .team .iconbox{
- width: 20%;
- float: left;
- overflow: hidden;
- text-align: center;
- color: #b6885d;
-
- font-size: 18px;
- }
- .team .iconbox img{
- width: 70%;
- }
- .team-bottm .KStip{
-
- right: 6%;
- top: 35%;
- }
-
- .team-bottm .DYtip{
-
- left: 10%;
- bottom: 20%;
- }
- }
- @media screen and (min-width:768px) and (max-width:1024px){
- .main{
- width: 96%;
- margin: 0 auto;
- }
- .wenan::before{
- width: 25%;
- top: 15px;
-
- left: 60px;
- }
- .wenan::after{
- width: 25%;
-
- top: 15px;
-
- left: 60px;
- }
- .footer{
- padding: 20px 18%;
-
- }
- .footer .infobox{
- float: none;
-
- }
- .team .iconbox p{
-
- font-size: 12px;
- }
- .team .iconbox{
- width: 20%;
- float: left;
- overflow: hidden;
- text-align: center;
- color: #b6885d;
-
- font-size: 18px;
- }
- .team .iconbox img{
- width: 70%;
- }
- .team-bottm .KStip{
-
- right: 6%;
- top: 40%;
- }
-
- .team-bottm .DYtip{
- left: 10%;
- bottom: 15%;
- }
-
- }
- @media screen and (max-width:767px){
- .main{
- width: 99%;
- margin: 0 auto;
- }
- .wenan::before{
-
- width: 180px;
-
- top: 15px;
- left: 30px;
- }
- .wenan::after{
-
- width: 180px;
-
-
- top: 15px;
- left: 30px;
- }
- footer{
- padding: 20px 10%;
-
- }
- footer .infobox{
- float: none;
-
- }
- .team .iconbox p{
-
- font-size: 12px;
-
- /* white-space:nowrap */
-
- }
- .team .iconbox{
- width: 33.3%;
- float: left;
- overflow: hidden;
- text-align: center;
- color: #b6885d;
-
- font-size: 18px;
- margin-bottom: 30px;
- }
- .team .iconbox img{
- width: 70%;
- }
- .team .iconbox:last-child,.team .iconbox.four{
- width: 50%;
- float: left;
- overflow: hidden;
- text-align: center;
- color: #b6885d;
-
- font-size: 18px;
- margin-bottom: 0;
- }
- .team .iconbox.four img{
- width: 48%;
- margin-left: 30%;
- }
- .team .iconbox.four p{
-
- margin-left: 30%;
- }
- .team .iconbox.last img{
- width: 48.1%;
- margin-right: 20%;
- /* margin-bottom: 1.5px; */
- }
- .team .iconbox.last p{
- margin-right: 10%;
- }
- .team-bottm .KStip{
-
- right: 7%;
- top: 40%;
- }
-
- .team-bottm .DYtip{
- left: 11%;
- bottom: 15%;
- }
- }
- .header{
- width: 100%;
-
- height: 100px;
- overflow: hidden;
- }
- .header .icon{
-
- width: 70px;
-
- height: 100px;
- float: left;
- }
- .icon img{
- display: block;
- width: 100%;
-
- margin-top: 5px;
-
- }
- .nav{
- height: 100%;
- float: right;
- }
- .nav ul{
-
- margin: 0;
- padding: 0;
- height: 100%;
- overflow: hidden;
-
- line-height: 100px;
- }
- .nav ul li{
- float: left;
- height: 100%;
-
- line-height: 100px;
-
- font-size: 36px;
- color: #FFF;
- }
- .nav a{
- display: inline-block;
-
- width: 108px;
-
- height: 98px;
-
- line-height: 98px;
-
- font-size: 18px;
- font-family:PingFangSC-Regular,sans-serif;
- }
- .nav ul li.active{
- background-color: #b6885d;
- }
- /* bannner样式 */
- .banner{
- width: 100%;
- /* height: 6.64rem; */
- }
- #myvideo{
- width: 100%;
- height: 100%;
- }
- /* 作品展示 */
- .section{
-
- margin-top: 60px;
- }
- .showWork{
- position: relative;
- }
- .showWork .title{
- font-size: 36px;
- color: #b6885d;
- margin-bottom: 22px;
- }
- .showWork .title .yuandian{
- font-size: 40px;
- }
- .showWork .desc{
- font-size: 24px;
- color: #b6885d;
- margin-bottom: 55px;
- position: relative;
- }
- .wenan::before{
- content:"";
- display:inline-block;
-
- height: 3px;
- background-image: url(../images/line.png);
- background-size: contain;
- position: absolute;
-
- }
- .wenan::after{
- content:"";
- display:inline-block;
-
- height: 3px;
- background-image: url(../images/line.png);
- background-size: contain;
- position: absolute;
-
- }
- .videoshow{
- overflow: hidden;
- width: 78%;
- /* height: 4.3px; */
- margin: 0 auto ;
-
- }
- .videoshow .leftArrow{
- width:31px;
- height:64.8px;
- position: absolute;
- left: 0;
- top: 50%;
- cursor: pointer;
- }
- .videoshow .leftArrow img{
- position:absolute;
- top: 0;
- right: 0;
- }
- .videoshow .rightArrow{
- width:31px;
- height:64.8px;
- position: absolute;
- right: 0;
- top: 50%;
- cursor: pointer;
- }
- .videoshow .rightArrow img{
- position:absolute;
- top: 0;
- left: 0;
- }
- .videoshow .video{
- width: 100%;
- }
- .videoshow .video-item .video-title{
- margin-top: 14px;
- font-size:24px;
- color: #fff;
- text-align: center;
- margin: 0;
- padding: 0;
- white-space:nowrap
- }
- /* .videoshow::before{
- content:"";
- display:inline-block;
- width: 10%;
- background-image: url(../images/rightArrow.png);
- background-size: contain;
- position: absolute;
- } */
- .videoshow .video-item{
-
- float: left;
- width: 30%;
- margin-right: 3%;
- font-size:24px ;
- position: relative;
- }
- .box{
- font-size:24px ;
- }
- .videoshow .video-item:nth-child(4){
- margin-right: 0
- }
- .videoshow .video-item:hover{
- transform: translateY(-10px);
-
- }
- .hide{
- display: none;
- }
- .videoshow .video-item .play{
- width: 30%;
- position: absolute;
- top: 50%;
- margin-top: -15%;
- left: 50%;
- margin-left: -15%;
- cursor: pointer;
- opacity:1;
- z-index:3
- }
- .showWork .gomore{
- display: block;
- width: 142px;
- height: 46px;
- margin: 0 auto;
- font-size: 24px;
- margin-top: 40px;
- color: #b6885d;
- border: 1px solid #b6885d;
- border-radius: 10px;;
-
- line-height: 46px;
- }
- .company{
- margin-top: 60px;
- }
- .companyImg{
- width: 100%;
- margin-top: 38px;
- margin-bottom: 82px;
-
- }
- .companyImg img{
- width: 100%;
- margin-top: 40px;;
- }
- .team{
-
- overflow: hidden;
-
- }
- .showicon{
- display: flex;
- justify-content: space-around;
- flex-wrap:wrap
-
- }
- .team .iconbox p{
- margin-top: 10px;
- /* white-space:nowrap */
- }
- .teamImg{
- width: 100%;
-
- }
- .teamImg img{
- width: 100%;
- margin-top: 38px;;
- }
- .team-bottm{
-
- text-align: center;
- position: relative;
- /* overflow: hidden; */
- }
- .team-bottm .yrzh1{
- width: 25%;
- position: relative;
- top: 60px;
- left: 0%;
- margin-left:-5% ;
- }
- .team-bottm .kuaishou{
- width: 15%;
- position: absolute;
- top: 100px;
- right: 22%;
- display: none;
- }
- .kuaishou.show{
- display: inline-block;
- animation: bounceInRight 1.5s linear;
- -ms-animation: bounceInRight 1.5s linear;
- }
- .team-bottm .douyin{
- width: 17%;
- position: absolute;
-
- top: 60px;
- left: 23.5%;
- display: none;
- }
- .douyin.show{
- display: inline-block;
- animation: bounceInLeft 1.5s linear;
- -ms-animation: bounceInLeft 1.5s linear;
- }
- .team-bottm .KStip{
- width: 20%;
- position: absolute;
-
-
- display: inline-block;
- display: none;
- }
- .KStip.show{
- display: inline-block;
- animation: bounceInDown 1s linear;
- -ms-animation: bounceInDown 1s linear;
- }
- .team-bottm .DYtip{
- width: 20%;
- position: absolute;
-
- display: inline-block;
- display: none;
-
- }
- .DYtip.show{
- display: inline-block;
- animation: bounceInUp 1s linear;
- -ms-animation: bounceInUp 1s linear;
- }
- /* hezuokehu */
- .customers{
- margin-bottom: 42px;
- }
- .show-customers{
- display: flex;
- justify-content: space-around;
- overflow: hidden\0;
- }
- .show-customers .itembox{
- width: 11%;
- float: left\0;
- margin-right: 3%\0;
- }
- .itembox img{
- width: 100%;
- }
- /* 页脚 */
- .footer{
- box-sizing: border-box;
- width: 100%;
- background: #b6885d;
-
- }
- .footer .title{
- font-size: 20px;
- margin-bottom: 20px;
- width: 100%;
- }
-
- .footer ul{
- display: flex;
- justify-content: space-between;
- width: 100%;
- overflow: hidden;
- }
- .footer ul li{
- float: left;
- color: #fff;
- width: 16.6%\0;
- text-align: left\0;
-
- }
- .footer ul li span {
- font-size: 20px;
- }
- .footer .info{
- font-size: 16px;
- color: #fff;
- /* margin-top: 20px\0; */
- }
- .footer .infobox{
- text-align: left;
- margin-right: 30px;
- font-size: 16px;
- margin-bottom: 10px;
- }
- .footer .box{
-
- font-size: 18px;
- margin-right: 11px;
-
- }
- .footer .infobox img{
- width: 20px;
- }
- .clearfix::after{
- content: '';
- display: block;
- height: 0;
- clear: both;
- }
- .beian{
- text-align: left;
-
- }
- .beianinfo{
- display: inline-block;
- margin-left: 45px;
- }
- .footer .clear-right{
- margin-right: 0;
- }
- /* 返回顶部按钮 */
- .aside{
- display: block;
- width: 40px;
- height: 40px;
- position: fixed;
- bottom: 120px;
- right: 120px;
- cursor: pointer;
- display: none;
- }
- .aside img{
- width: 100%;
- position: absolute;
- top: 0;
- left: 0;
- }
- .aside.show{
- display: block;
- }
- .email{
- margin-left: 40px;
- }
- @-webkit-keyframes bounceInDown {
- 0%, 60%, 75%, 90%, 100% {
- -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- }
-
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(0, -3000px, 0);
- transform: translate3d(0, -3000px, 0);
- }
-
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(0, 25px, 0);
- transform: translate3d(0, 25px, 0);
- }
-
- 75% {
- -webkit-transform: translate3d(0, -10px, 0);
- transform: translate3d(0, -10px, 0);
- }
-
- 90% {
- -webkit-transform: translate3d(0, 5px, 0);
- transform: translate3d(0, 5px, 0);
- }
-
- 100% {
- -webkit-transform: none;
- transform: none;
- }
- }
- @keyframes bounceInDown {
- 0%, 60%, 75%, 90%, 100% {
- -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- }
-
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(0, -3000px, 0);
- transform: translate3d(0, -3000px, 0);
- }
-
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(0, 25px, 0);
- transform: translate3d(0, 25px, 0);
- }
-
- 75% {
- -webkit-transform: translate3d(0, -10px, 0);
- transform: translate3d(0, -10px, 0);
- }
-
- 90% {
- -webkit-transform: translate3d(0, 5px, 0);
- transform: translate3d(0, 5px, 0);
- }
-
- 100% {
- -webkit-transform: none;
- transform: none;
- }
- }
- @-webkit-keyframes bounceInDown {
- 0%, 60%, 75%, 90%, 100% {
- -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- }
-
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(0, -3000px, 0);
- transform: translate3d(0, -3000px, 0);
- }
-
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(0, 25px, 0);
- transform: translate3d(0, 25px, 0);
- }
-
- 75% {
- -webkit-transform: translate3d(0, -10px, 0);
- transform: translate3d(0, -10px, 0);
- }
-
- 90% {
- -webkit-transform: translate3d(0, 5px, 0);
- transform: translate3d(0, 5px, 0);
- }
-
- 100% {
- -webkit-transform: none;
- transform: none;
- }
- }
- @-ms-keyframes bounceInDown {
- 0%, 60%, 75%, 90%, 100% {
- -ms-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- }
-
- 0% {
- opacity: 0;
- -ms-transform: translate3d(0, -3000px, 0);
- transform: translate3d(0, -3000px, 0);
- }
-
- 60% {
- opacity: 1;
- -ms-transform: translate3d(0, 25px, 0);
- transform: translate3d(0, 25px, 0);
- }
-
- 75% {
- -ms-transform: translate3d(0, -10px, 0);
- transform: translate3d(0, -10px, 0);
- }
-
- 90% {
- -ms-transform: translate3d(0, 5px, 0);
- transform: translate3d(0, 5px, 0);
- }
-
- 100% {
- -ms-transform: none;
- transform: none;
- }
- }
- .bounceInDown {
-
- -webkit-animation-name: bounceInDown;
- animation-name: bounceInDown ;
- }
-
- @-webkit-keyframes bounceInLeft {
- 0%, 60%, 75%, 90%, 100% {
- -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- }
-
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(-3000px, 0, 0);
- transform: translate3d(-3000px, 0, 0);
- }
-
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(25px, 0, 0);
- transform: translate3d(25px, 0, 0);
- }
-
- 75% {
- -webkit-transform: translate3d(-10px, 0, 0);
- transform: translate3d(-10px, 0, 0);
- }
-
- 90% {
- -webkit-transform: translate3d(5px, 0, 0);
- transform: translate3d(5px, 0, 0);
- }
-
- 100% {
- -webkit-transform: none;
- transform: none;
- }
- }
- @-webkit-keyframes bounceInLeft {
- 0%, 60%, 75%, 90%, 100% {
- -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- }
-
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(-3000px, 0, 0);
- transform: translate3d(-3000px, 0, 0);
- }
-
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(25px, 0, 0);
- transform: translate3d(25px, 0, 0);
- }
-
- 75% {
- -webkit-transform: translate3d(-10px, 0, 0);
- transform: translate3d(-10px, 0, 0);
- }
-
- 90% {
- -webkit-transform: translate3d(5px, 0, 0);
- transform: translate3d(5px, 0, 0);
- }
-
- 100% {
- -webkit-transform: none;
- transform: none;
- }
- }
-
- @keyframes bounceInLeft {
- 0%, 60%, 75%, 90%, 100% {
- -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- }
-
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(-3000px, 0, 0);
- transform: translate3d(-3000px, 0, 0);
- }
-
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(25px, 0, 0);
- transform: translate3d(25px, 0, 0);
- }
-
- 75% {
- -webkit-transform: translate3d(-10px, 0, 0);
- transform: translate3d(-10px, 0, 0);
- }
-
- 90% {
- -webkit-transform: translate3d(5px, 0, 0);
- transform: translate3d(5px, 0, 0);
- }
-
- 100% {
- -webkit-transform: none;
- transform: none;
- }
- }
- @-ms-keyframes bounceInLeft {
- 0%, 60%, 75%, 90%, 100% {
- -ms-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- }
-
- 0% {
- opacity: 0;
- -ms-transform: translate3d(-3000px, 0, 0);
- transform: translate3d(-3000px, 0, 0);
- }
-
- 60% {
- opacity: 1;
- -ms-transform: translate3d(25px, 0, 0);
- transform: translate3d(25px, 0, 0);
- }
-
- 75% {
- -ms-transform: translate3d(-10px, 0, 0);
- transform: translate3d(-10px, 0, 0);
- }
-
- 90% {
- -ms-transform: translate3d(5px, 0, 0);
- transform: translate3d(5px, 0, 0);
- }
-
- 100% {
- -ms-transform: none;
- transform: none;
- }
- }
- .bounceInLeft {
-
- -webkit-animation-name: bounceInLeft;
- animation-name: bounceInLeft ;
- }
-
- @-webkit-keyframes bounceInRight {
- 0%, 60%, 75%, 90%, 100% {
- -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- }
-
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(3000px, 0, 0);
- transform: translate3d(3000px, 0, 0);
- }
-
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(-25px, 0, 0);
- transform: translate3d(-25px, 0, 0);
- }
-
- 75% {
- -webkit-transform: translate3d(10px, 0, 0);
- transform: translate3d(10px, 0, 0);
- }
-
- 90% {
- -webkit-transform: translate3d(-5px, 0, 0);
- transform: translate3d(-5px, 0, 0);
- }
-
- 100% {
- -webkit-transform: none;
- transform: none;
- }
- }
-
- @keyframes bounceInRight {
- 0%, 60%, 75%, 90%, 100% {
- -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- }
-
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(3000px, 0, 0);
- transform: translate3d(3000px, 0, 0);
- }
-
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(-25px, 0, 0);
- transform: translate3d(-25px, 0, 0);
- }
-
- 75% {
- -webkit-transform: translate3d(10px, 0, 0);
- transform: translate3d(10px, 0, 0);
- }
-
- 90% {
- -webkit-transform: translate3d(-5px, 0, 0);
- transform: translate3d(-5px, 0, 0);
- }
-
- 100% {
- -webkit-transform: none;
- transform: none;
- }
- }
- @-ms-keyframes bounceInRight {
- 0%, 60%, 75%, 90%, 100% {
- -ms-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- }
-
- 0% {
- opacity: 0;
- -ms-transform: translate3d(3000px, 0, 0);
- transform: translate3d(3000px, 0, 0);
- }
-
- 60% {
- opacity: 1;
- -ms-transform: translate3d(-25px, 0, 0);
- transform: translate3d(-25px, 0, 0);
- }
-
- 75% {
- -ms-transform: translate3d(10px, 0, 0);
- transform: translate3d(10px, 0, 0);
- }
-
- 90% {
- -ms-transform: translate3d(-5px, 0, 0);
- transform: translate3d(-5px, 0, 0);
- }
-
- 100% {
- -ms-transform: none;
- transform: none;
- }
- }
- .bounceInRight {
-
- -webkit-animation-name: bounceInRight;
- animation-name: bounceInRight;
- }
-
- @-webkit-keyframes bounceInUp {
- 0%, 60%, 75%, 90%, 100% {
- -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- }
-
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(0, 3000px, 0);
- transform: translate3d(0, 3000px, 0);
- }
-
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(0, -20px, 0);
- transform: translate3d(0, -20px, 0);
- }
-
- 75% {
- -webkit-transform: translate3d(0, 10px, 0);
- transform: translate3d(0, 10px, 0);
- }
-
- 90% {
- -webkit-transform: translate3d(0, -5px, 0);
- transform: translate3d(0, -5px, 0);
- }
-
- 100% {
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- }
- }
-
- @keyframes bounceInUp {
- 0%, 60%, 75%, 90%, 100% {
- -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- }
-
- 0% {
- opacity: 0;
- -webkit-transform: translate3d(0, 3000px, 0);
- transform: translate3d(0, 3000px, 0);
- }
-
- 60% {
- opacity: 1;
- -webkit-transform: translate3d(0, -20px, 0);
- transform: translate3d(0, -20px, 0);
- }
-
- 75% {
- -webkit-transform: translate3d(0, 10px, 0);
- transform: translate3d(0, 10px, 0);
- }
-
- 90% {
- -webkit-transform: translate3d(0, -5px, 0);
- transform: translate3d(0, -5px, 0);
- }
-
- 100% {
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- }
- }
- @-ms-keyframes bounceInUp {
- 0%, 60%, 75%, 90%, 100% {
- -ms-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
- }
-
- 0% {
- opacity: 0;
- -ms-transform: translate3d(0, 3000px, 0);
- transform: translate3d(0, 3000px, 0);
- }
-
- 60% {
- opacity: 1;
- -ms-transform: translate3d(0, -20px, 0);
- transform: translate3d(0, -20px, 0);
- }
-
- 75% {
- -ms-transform: translate3d(0, 10px, 0);
- transform: translate3d(0, 10px, 0);
- }
-
- 90% {
- -ms-transform: translate3d(0, -5px, 0);
- transform: translate3d(0, -5px, 0);
- }
-
- 100% {
- -ms-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- }
- }
- .bounceInUp {
- -webkit-animation-name: bounceInUp;
- animation-name: bounceInUp;
- }
-
|