/* 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;
}