/* Animations */ .clouds { opacity: 0.7; width: 100%; height: 362px; position: relative; overflow: hidden; margin-top: 70px; margin-bottom: 400px; } .clouds > div { width: 2526px; background: url(images/cloud.png); height: 100%; transform: translate3d(0, 0, 0); } .clouds .mover-1 { animation: moveSlideshow 15s linear infinite; } @keyframes moveSlideshow { 100% { transform: translateX(-20%); } } @keyframes jump { from, 20%, 53%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transform: translate3d(0,0,0); } 40%, 43% { animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transform: translate3d(0, -15px, 0); } 70% { animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transform: translate3d(0, -5px, 0); } 90% { transform: translate3d(0,-4px,0); } } .jump { animation:jump 4s infinite; transform-origin: center bottom; } @keyframes flip { from { transform: perspective(400px) rotate3d(0, 1, 0, -360deg); animation-timing-function: ease-out; } 40% { transform: perspective(700px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); animation-timing-function: ease-out; } 50% { transform: perspective(700px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); animation-timing-function: ease-in; } 80% { transform: perspective(400px) scale3d(.95, .95, .95); animation-timing-function: ease-in; } to { transform: perspective(400px); animation-timing-function: ease-in; } } .flip:hover { backface-visibility: visible; animation:flip 1.3s; }