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: #f2f2f2; overflow: hidden; } .pc-class{ display: none; } .background-image-all { position: relative; display: flex; justify-content: center; height: 80%; } .banner-box { width: 100%; min-height: 2rem; background-color: white; position: relative; } .banner-title { position: absolute; top: 28%; font-size: 0.6rem; color: white; } .banner-title-content { position: absolute; top: 48%; font-size: 0.35rem; color: white; } .banner-img { width: 100%; height: auto; max-height: 100%; } .header .icon { width: 0.7rem; width: 70px\9; height: 1rem; height: 100px\9; float: left; } .icon img { display: block; height: 36%; width: auto; margin-top: 0.3rem; margin-top: 5px\9; } .main-content { position: relative; top: -0.8rem; z-index: 5; } .main-content-title { width: 100%; font-size: 0.35rem; text-align: center; border-bottom: 1px solid black; display: flex; justify-content: center; position: absolute; top: 0.2rem; } .main-content-title-border { border-bottom: 2px solid black; padding-bottom: 0.145rem; } .main-content-core { width: 100%; display: flex; justify-content: space-around; flex-wrap: wrap; } .core-box { margin: 0.5rem; width: 35%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .core-box h5 { font-size: 0.24rem; } .core-box p { font-size: 0.16rem; } .core-ball { width: 1.6rem; height: 1.6rem; border-radius: 50%; background-color: #e8e8e8; margin-bottom: 0.235rem; position: relative; } .excellent-cases { } .case-title { margin-top: 0.375rem; text-align: left; font-size: 0.186rem; color: #ffffff; padding-left: 0.105rem; border-left: 2px solid #ffffff; } .case-box { display: flex; justify-content: space-between; height: 100%; } .case-box .case-one-box { height: 75%; width: 55%; display: flex; flex-direction: column; justify-content: space-around; color: #ffffff; font-weight: bold; cursor: pointer; } .case-bg-img { width: 100%; height: 4rem; } .case-box .case-one-box-right { height: 85%; width: 45%; display: flex; justify-content: center; align-items: center; color: #ffffff; font-weight: bold; cursor: pointer; } .left-box-title { text-align: left; } .left-box-title-active { color: #00aeff; margin-left: 0.65rem; transition: all 0.5s; } .active-hide { opacity: 0.5; transition: all 0.5s; } .left-box-title-big { font-size: 0.36rem; margin-bottom: 0.11rem; } .phone-none { display: none; } .left-box-title-small { font-size: 0.01rem; display: none; } .left-box-title-small-show { font-size: 0.001rem; /* display: none; */ } .main-content-core ul { display: flex; justify-content: space-around; height: 2rem; } .time-horizontal-content { padding: 0.6rem 0; } .time-horizontal { list-style-type: none; border-top: 2px solid #1b1f25; padding: 0px; margin: 0px; position: relative; top: 1rem; font-size: 0.1453rem; width: 90%; font-weight: 400; } .time-horizontal li { float: left; position: absolute; text-align: center; width: 25%; padding-top: 10px; top: -1.6rem; } .time-horizontal li b:before { content: ""; position: absolute; top: 1.46rem; left: 47%; width: 0.21rem; height: 0.21rem; border: 2px solid #1b1f25; border-radius: 50%; background-color: white; /* margin: 20px; */ } .one:before { content: "2019年"; position: absolute; top: 1.9rem; left: 36%; font-size: 0.1453rem; font-weight: 400; } .two:before { content: "2020年"; position: absolute; top: 1.9rem; left: 36%; font-size: 0.1453rem; font-weight: 400; } .three:before { content: "2021年"; position: absolute; top: 1.9rem; left: 36%; font-size: 0.1453rem; font-weight: 400; } .partner-bg-img { height: 6rem !important; } .partner1-main,.partner2-main,.partner3-main { width: 100%; display: flex; justify-content: space-around; /* flex-wrap: wrap; */ /* margin-top: 0.5rem; */ } .partner1-main .img-yuan,.partner2-main .img-yuan,.partner3-main .img-yuan { border-radius: 50%; overflow: hidden; background: white; /* position: absolute; */ display: flex; align-items: center; width: 1.2rem; height: 1.2rem; margin: 0.1rem 0; flex-shrink: 0; } .partner1-main .img-yuan:hover { transform: scale(1.3); } .partner1-main .img-yuan img,.partner2-main .img-yuan img,.partner3-main .img-yuan img { width: 100%; } @media screen and (min-width: 414px) { .time-horizontal li { float: left; position: absolute; text-align: center; width: 25%; padding-top: 10px; top: -1.2rem; } .time-horizontal li b:before { content: ""; position: absolute; top: 1.06rem; left: 47%; width: 0.21rem; height: 0.21rem; border: 2px solid #1b1f25; border-radius: 50%; background-color: white; /* margin: 20px; */ } .one:before { content: "2019年"; position: absolute; top: 1.5rem; left: 36%; font-size: 0.1453rem; font-weight: 400; } .two:before { content: "2020年"; position: absolute; top: 1.5rem; left: 36%; font-size: 0.1453rem; font-weight: 400; } .three:before { content: "2021年"; position: absolute; top: 1.5rem; left: 36%; font-size: 0.1453rem; font-weight: 400; } } @media screen and (min-width: 1025px) { .main { width: 62.5%; margin: 0 auto; } .header .icon { width: 0.7rem; width: 70px\9; height: 1rem; height: 100px\9; float: left; } .icon img { display: block; height: 50%; width: auto; margin-top: 0.3rem; margin-top: 5px\9; } .wenan::before { width: 25%; top: 0.15rem; left: 6%; } .wenan::after { width: 25%; top: 0.15rem; top: 15px\9; right: 6%; } .footer { padding: 0.2rem 20%; padding: 20px 20% \9; } .footer .infobox { float: left; } .chuli { position: relative; top: 0; left: 0.12rem; left: 12px\9; } .email { margin-left: 0.4rem; } .team .iconbox p { font-size: 0.18rem; font-size: 18px\9; } .team .iconbox { width: 20%; float: left; overflow: hidden; text-align: center; color: #b6885d; font-size: 0.18rem; font-size: 18px\9; } .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; } .header .icon { width: 0.7rem; width: 70px\9; height: 1rem; height: 100px\9; float: left; } .icon img { display: block; height: 36%; width: auto; margin-top: 0.3rem; margin-top: 5px\9; } .wenan::before { width: 25%; top: 0.15rem; top: 15px\9; left: 0.6rem; left: 60px\9; } .wenan::after { width: 25%; top: 0.15rem; top: 15px\9; right: 0.6rem; left: 60px\9; } .footer { padding: 0.2rem 2%; } .footer .infobox { float: none; } .team .iconbox p { font-size: 0.12rem; } .team .iconbox { width: 20%; float: left; overflow: hidden; text-align: center; color: #b6885d; font-size: 0.18rem; } .team .iconbox img { width: 70%; } .team-bottm .KStip { right: 6%; top: 40%; } .team-bottm .DYtip { left: 10%; bottom: 15%; } .time-horizontal li { float: left; position: absolute; text-align: center; width: 25%; padding-top: 10px; top: -0.8rem; } .time-horizontal li b:before { content: ""; position: absolute; top: 0.65rem; left: 47%; width: 0.21rem; height: 0.21rem; border: 2px solid #1b1f25; border-radius: 50%; background-color: white; /* margin: 20px; */ } .one:before { content: "2019年"; position: absolute; top: 1.1rem; left: 36%; font-size: 0.1453rem; font-weight: 400; } .two:before { content: "2020年"; position: absolute; top: 1.1rem; left: 36%; font-size: 0.1453rem; font-weight: 400; } .three:before { content: "2021年"; position: absolute; top: 1.1rem; left: 36%; font-size: 0.1453rem; font-weight: 400; } } @media screen and (max-width: 767px) { .main { width: 96%; margin: 0 auto; } .wenan::before { width: 1.8rem; top: 0.15rem; left: 0.3rem; } .wenan::after { width: 1.8rem; top: 0.15rem; right: 0.3rem; } .footer { padding: 0.2rem 2%; } .footer .infobox { float: none; } .team .iconbox p { font-size: 0.12rem; font-size: 12px\9; /* white-space:nowrap */ } .team .iconbox { width: 33.3%; float: left; overflow: hidden; text-align: center; color: #b6885d; font-size: 0.18rem; font-size: 18px\9; margin-bottom: 0.3rem; } .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: 0.18rem; font-size: 18px\9; 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%; } .video { height: 3.55rem; } } .header { width: 100%; height: 1rem; height: 100px\9; overflow: hidden; } .nav { height: 100%; float: right; } .nav ul { margin: 0; padding: 0; height: 100%; overflow: hidden; line-height: 1rem; line-height: 100px\9; } .nav ul li { float: left; height: 100%; padding: 0 5px; line-height: 1rem; line-height: 100px\9; font-size: 0.36rem; font-size: 36px\9; color: #fff; } .nav a { display: inline-block; /* width: 1.08rem; width: 108px\9; */ height: 0.98rem; height: 98px\9; line-height: 0.98rem; line-height: 98px\9; font-size: 0.18rem; font-size: 18px\9; 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: 0.6rem; margin-top: 60px\9; } .showWork { position: relative; } .showWork .title { font-size: 0.36rem; color: #b6885d; margin-bottom: 0.22rem; } .showWork .title .yuandian { font-size: 0.4rem; } .showWork .desc { font-size: 0.24rem; color: #b6885d; margin-bottom: 0.55rem; 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.3rem; */ margin: 0 auto; } .videoshow .leftArrow { width: 0.31rem; height: 0.648rem; position: absolute; left: 0; top: 50%; cursor: pointer; } .videoshow .leftArrow img { position: absolute; top: 0; right: 0; } .videoshow .video { width: 100%; } .videoshow .video-item .video-title { margin-top: 14px; font-size: 0.24rem; color: #fff; text-align: center; margin: 0; padding: 0; white-space: nowrap; } .videoshow .video-item { float: left; width: 30%; margin-right: 3%; font-size: 0.24rem; position: relative; } .box { font-size: 0.24rem; } .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; z-index: 3; } .showWork .gomore { display: block; width: 1.42rem; height: 0.46rem; margin: 0 auto; font-size: 0.24rem; margin-top: 0.4rem; color: #b6885d; border: 1px solid #b6885d; border-radius: 0.1rem; line-height: 0.46rem; } .company { margin-top: 0.6rem; } .companyImg { width: 100%; margin-top: 0.38px; margin-bottom: 0.82rem; } .companyImg img { width: 100%; margin-top: 0.4rem; } .team { overflow: hidden; } .showicon { display: flex; justify-content: space-around; flex-wrap: wrap; } .team .iconbox p { margin-top: 0.1rem; /* white-space:nowrap */ } .teamImg { width: 100%; } .teamImg img { width: 100%; margin-top: 0.38rem; } .team-bottm { text-align: center; position: relative; /* overflow: hidden; */ } .team-bottm .yrzh1 { width: 25%; position: relative; top: 0.6rem; left: 0%; margin-left: -5%; } .team-bottm .kuaishou { width: 15%; position: absolute; top: 1rem; 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: 0.6rem; 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: 0.42rem; } .show-customers { display: flex; justify-content: space-around; } .show-customers .itembox { width: 11%; } .itembox img { width: 100%; } /* 页脚 */ .footer { box-sizing: border-box; width: 100%; background: rgb(27, 31, 37); } .footer .title { font-size: 0.2rem; margin-bottom: 0.2rem; } .footer ul { display: flex; justify-content: space-between; } .footer ul li { float: left; color: #fff; } .footer ul li span { font-size: 0.2rem; } .footer .info { font-size: 0.16rem; color: #fff; } .footer .infobox { text-align: left; margin-right: 0.3rem; font-size: 0.16rem; margin-bottom: 0.1rem; } .footer .box { overflow: hidden; font-size: 0.18rem; margin-right: 0.11rem; } .footer .infobox img { width: 0.2rem; } .clearfix::after { content: ""; display: block; height: 0; clear: both; } .beian { text-align: left; } .beianinfo { display: inline-block; margin-left: 0.45rem; } .footer .clear-right { margin-right: 0; } /* 返回顶部按钮 */ .aside { display: block; width: 0.3rem; height: 0.3rem; position: fixed; bottom: 0.4rem; right: 0.4rem; cursor: pointer; display: none; } .aside img { width: 100%; position: absolute; top: 0; left: 0; } .aside.show { display: block; } @keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 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.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 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.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 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.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 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; -ms-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 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.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 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.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 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.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 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; -ms-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 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.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 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.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 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; -ms-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 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.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 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); } } .bounceInUp { -webkit-animation-name: bounceInUp; -ms-animation-name: bounceInUp; animation-name: bounceInUp; } @-ms-keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -ms-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 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); } }