div.cs-skin-elastic { background: transparent; font-size: 16px; font-weight: 700; color: #fff; } .cs-skin-elastic > span { background-color: #E9585B; border: 3px solid #E9585B; z-index: 100; } .cs-skin-elastic > span::after { font-family: 'FontAwesome'; content: '\f078'; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .cs-skin-elastic .cs-options { overflow: visible; background: transparent; opacity: 1; visibility: visible; padding-bottom: 1.25em; pointer-events: none; } .cs-skin-elastic.cs-active .cs-options { pointer-events: auto; } .cs-skin-elastic .cs-options > ul::before { content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; -webkit-transform: scale3d(1,0,1); transform: scale3d(1,0,1); background: #fff; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .cs-skin-elastic.cs-active .cs-options > ul::before { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); -webkit-transition: none; transition: none; -webkit-animation: expand 0.6s ease-out; animation: expand 0.6s ease-out; } .cs-skin-elastic .cs-options ul li { opacity: 0; -webkit-transform: translate3d(0,-25px,0); transform: translate3d(0,-25px,0); -webkit-transition: opacity 0.15s, -webkit-transform 0.15s; transition: opacity 0.15s, transform 0.15s; } .cs-skin-elastic.cs-active .cs-options ul li { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; -webkit-transition: none; transition: none; -webkit-animation: bounce 0.6s ease-out; animation: bounce 0.6s ease-out; } .cs-skin-elastic .cs-options span { padding: 0.8em 1em; text-align: center; color: #424242; } .cs-skin-elastic .cs-options span:hover, .cs-skin-elastic .cs-options li.cs-focus span, .cs-skin-elastic .cs-options .cs-selected span { color: #E9585B; } @-webkit-keyframes expand { 0% { -webkit-transform: scale3d(1,0,1); } 25% { -webkit-transform: scale3d(1,1.2,1); } 50% { -webkit-transform: scale3d(1,0.85,1); } 75% { -webkit-transform: scale3d(1,1.05,1) } 100% { -webkit-transform: scale3d(1,1,1); } } @keyframes expand { 0% { -webkit-transform: scale3d(1,0,1); transform: scale3d(1,0,1); } 25% { -webkit-transform: scale3d(1,1.2,1); transform: scale3d(1,1.2,1); } 50% { -webkit-transform: scale3d(1,0.85,1); transform: scale3d(1,0.85,1); } 75% { -webkit-transform: scale3d(1,1.05,1); transform: scale3d(1,1.05,1); } 100% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); } } @-webkit-keyframes bounce { 0% { -webkit-transform: translate3d(0,-25px,0); opacity:0; } 25% { -webkit-transform: translate3d(0,10px,0); } 50% { -webkit-transform: translate3d(0,-6px,0); } 75% { -webkit-transform: translate3d(0,2px,0); } 100% { -webkit-transform: translate3d(0,0,0); opacity: 1; } } @keyframes bounce { 0% { -webkit-transform: translate3d(0,-25px,0); transform: translate3d(0,-25px,0); opacity:0; } 25% { -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); } 50% { -webkit-transform: translate3d(0,-6px,0); transform: translate3d(0,-6px,0); } 75% { -webkit-transform: translate3d(0,2px,0); transform: translate3d(0,2px,0); } 100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } }