@keyframes slide {
from {
left: 0;
}
to {
left: 75%;
}
}
.stage:hover .ball {
animation-name: slide;
animation-duration: 2s;
}
@keyframes slide {
0% {
left: 0;
top: 0;
}
50% {
top: 50%;
}
100% {
left: 75%;
top: 0;
}
}
.stage:hover .ball {
animation-name: slide;
animation-duration: 2s;
}
@keyframes slide {
0% {
left: 0;
top: 0;
}
50% {
top: 50%;
}
100% {
left: 75%;
top: 0;
}
}
.stage:hover .ball {
animation-name: slide;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes slide {
0% {
left: 0;
top: 0;
}
50% {
top: 50%;
}
100% {
left: 75%;
top: 0;
}
}
.stage:hover .ball {
animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes slide {
0% {
left: 0;
top: 0;
}
50% {
top: 50%;
}
100% {
left: 75%;
top: 0;
}
}
.stage:hover .ball {
animation-name: slide;
animation-duration: 2s;
animation-timing-function:
cubic-bezier (.13,-0.19,1,-0.24);
animation-iteration-count: infinite;
animation-direction: alternate;
}
.stage .ball:hover {
animation-play-state: paused;
}
@keyframes slide {
0% {
left: 0;
top: 0;
}
50% {
top: 50%;
background: #51E5FF;
}
100% {
left: 75%;
top: 0;
background: #EC368D;
}
}
.stage:hover .ball {
animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes slide {
0% {
left: 0;
top: 0;
opacity: 1;
}
50% {
top: 50%;
background: #51E5FF;
opacity: 0.75;
}
100% {
left: 75%;
top: 0;
background: #EC368D;
opacity: 1;
}
}
.stage:hover .tool {
transform: translate(0, 0);
opacity: 1;
transition: 500ms ease-out;
}
.tool {
opacity: 0;
transform: translate(0, 75%);
transition: all 800ms ease-out;
will-change: transform;
transform: translateZ(0);
}
.element {
will-change: transform;
}