body, html { width: 100%; height: 100%; margin: 0 auto; font-family: PingFangSC-Regular, sans-serif; } body { font-size: 16px; } a { color: #fff; transition: color 0.5s; } .a-color { color: black; } .phone-class { display: none; } .container { width: 100%; background-color: #f2f2f2; overflow: hidden; } .background-image-all-index { height: 80vh; } .background-image-all { position: relative; display: flex; justify-content: center; } /* bannner样式 */ .banner { width: 100%; /* height: 6.64rem; */ } .banner-box { width: 100%; min-height: 1.5rem; background-color: white; position: relative; padding-bottom: 0.4rem; } .banner-title { position: absolute; top: 28%; font-size: 0.6rem; color: white; } .banner-title-content { position: absolute; top: 40%; font-size: 0.35rem; color: white; padding: 0.2rem 0; } .banner-img { width: 100%; height: auto; } .main-content { position: relative; top: -1rem; 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: 10%; } .main-content-title-border { border-bottom: 2px solid black; padding-bottom: 0.145rem; } .main-content-core { width: 100%; display: flex; justify-content: space-around; margin-top: 0.5rem; } .core-box { width: 25%; 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; min-height: 0.8rem; } .core-ball { width: 1.2rem; height: 1.2rem; border-radius: 50%; background-color: #e8e8e8; position: relative; margin-bottom: 0.235rem; } .case-title { margin-top: 0.375rem; text-align: left; font-size: 0.24rem; color: #ffffff; padding-left: 0.105rem; border-left: 2px solid #ffffff; } .case-box { display: flex; justify-content: space-between; height: 100%; } .case-bg-img { width: 100%; height: auto; } .case-box .case-one-box { height: 85%; width: 48%; display: flex; flex-direction: column; justify-content: space-around; color: #ffffff; font-weight: bold; cursor: pointer; } .case-box .case-one-box-right { height: 85%; width: 48%; 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.3621rem; margin-bottom: 0.11rem; } .left-box-title-small { font-size: 0.16rem; } .left-box-title-small-show { font-size: 0.001rem; display: none; } .main-content-core ul { display: flex; justify-content: space-around; height: 1rem; } .time-horizontal-content { padding: 0.6rem 0 1.5rem 0; } .time-horizontal { list-style-type: none; border-top: 2px solid #1b1f25; padding: 0px; margin: 0px; position: relative; top: 1rem; font-size: 0.18rem; width: 90%; font-weight: 600; } .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.67rem; 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: 42%; font-size: 0.18rem; font-weight: 600; } .two:before { content: "2020年"; position: absolute; top: 1.1rem; left: 42%; font-size: 0.18rem; font-weight: 600; } .three:before { content: "2021年"; position: absolute; top: 1.1rem; left: 42%; font-size: 0.18rem; font-weight: 600; } .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; flex-shrink: 0; } .partner1-main .img-yuan img, .partner2-main .img-yuan img, .partner3-main .img-yuan img { width: 100%; } .partner1-main .img-yuan:hover { transition: all 0.5s; transform: scale(1.1); } .partner2-main .img-yuan:hover { transition: all 0.5s; transform: scale(1.1); } .partner3-main .img-yuan:hover { transition: all 0.5s; transform: scale(1.1); } .partner-bg-img { height: 6.5rem; } .partner1-main, .partner2-main, .partner3-main { width: 100%; display: flex; justify-content: space-around; flex-shrink: 0; margin-top: -1%; } .partner1-main div:first-child { left: -0.92rem; top: 1.2rem; width: 1.78rem; height: 1.78rem; margin: 0 6%; } .partner1-main div:nth-child(2) { left: 2.6rem; top: 1.68rem; width: 1.4rem; height: 1.4rem; margin: 5% 0 0 0; } .partner1-main div:nth-child(3) { left: 4.9rem; top: 1.56rem; width: 1.5rem; height: 1.5rem; margin: 2% 0 0 8%; } .partner1-main div:nth-child(4) { left: 7.22rem; top: 1.68rem; width: 1.4rem; height: 1.4rem; margin: 0 5% 0 12%; } .partner2-main div:nth-child(1) { left: 0rem; top: 3rem; width: 1.6rem; height: 1.6rem; margin: 0 3% 3% 3%; } .partner2-main div:nth-child(2) { left: 1.7rem; top: 3.4rem; width: 1.4rem; height: 1.4rem; margin: 0 3% 3% 3%; } .partner2-main div:nth-child(3) { left: 3.6rem; top: 3.5rem; width: 1.32rem; height: 1.32rem; margin: 3%; } .partner2-main div:nth-child(4) { left: 5.22rem; top: 3.3rem; width: 1.14rem; height: 1.14rem; background-color: #cd0f31; margin: 6% 3% 0 3%; } .partner2-main div:nth-child(5) { left: 6.6rem; top: 3.8rem; width: 1.6rem; height: 1.6rem; } .partner2-main div:nth-child(6) { left: 8.7rem; top: 2.3rem; width: 1.8rem; height: 1.8rem; margin: 0 3% 3% 3%; } .partner3-main div:nth-child(1) { left: -0.92rem; top: 4.8rem; width: 1.4rem; height: 1.4rem; } .partner3-main div:nth-child(2) { left: 2.6rem; top: 5.2rem; width: 1rem; height: 1rem; } .partner3-main div:nth-child(3) { left: 4.9rem; top: 5.2rem; width: 1.2rem; height: 1.2rem; } .partner3-main div:nth-child(4) { left: 8.6rem; top: 5rem; width: 1.4rem; height: 1.4rem; background-color: #003a46; } @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; height: 50%; width: auto; margin-top: 25px; } .nav { height: 100%; float: right; } .nav ul { margin: 0; padding: 0; height: 100%; /* overflow: hidden; */ line-height: 100px; } .nav ul li { float: left; height: 95%; /* line-height: 100px; */ font-size: 36px; color: black; font-weight: 500; } .nav a { display: inline-block; width: 130px; height: 98px; /* line-height: 98px; */ font-size: 18px; font-family: PingFangSC-Regular, sans-serif; } .nav ul li:hover a { color: black; transition: all 0.5s; } .nav ul li.active { /* background-color: white; */ border-bottom: 2px solid black; } .nav ul li.active a { background-color: white; border-bottom: 3px solid black; color: black; /* color: black; */ } #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 .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 .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: rgb(27, 31, 37); } .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.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; } } @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; 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; 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; 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); } } @-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); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; }