editor.js/src/styles/animations.css
2019-06-12 20:38:16 +03:00

103 lines
1.4 KiB
CSS

.wobble {
animation-name: wobble;
animation-duration: 400ms;
}
/**
* @author Nick Pettit - https://github.com/nickpettit/glide
*/
@keyframes wobble {
from {
transform: translate3d(0, 0, 0);
}
15% {
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
transform: translate3d(2%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
transform: translate3d(-3%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
transform: translate3d(2%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
transform: translate3d(-1%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
transform: scale3d(0.9, 0.9, 0.9);
}
20% {
transform: scale3d(1.03, 1.03, 1.03);
}
60% {
transform: scale3d(1, 1, 1);
}
}
@keyframes selectionBounce {
from,
20%,
40%,
60%,
80%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
50% {
transform: scale3d(1.01, 1.01, 1.01);
}
70% {
transform: scale3d(1, 1, 1);
}
}
@keyframes buttonClicked {
from,
20%,
40%,
60%,
80%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
transform: scale3d(0.95, 0.95, 0.95);
}
60% {
transform: scale3d(1.02, 1.02, 1.02);
}
80% {
transform: scale3d(1, 1, 1);
}
}