app/assets/stylesheets/base/animations.scss
@keyframes rotate {
from {
-webkit-transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0deg);
}
}
@keyframes rotate-inverted {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes alert-show {
0% {
opacity: 0.50;
transform: translateY(100%) translateX(-50%);
}
10% {
transform: translateY(0%) translateX(-50%);
opacity: 1;
}
76% {
transform: scale(1) translateX(-50%);
}
77%{
transform: scale(1.5) translateX(-33.5%);
}
80% {
transform: scale(1) translateX(-50%);
}
85% {
transform: translateY(0%) translateX(-50%);
opacity: 1;
}
95% {
transform: translateY(0%) translateX(-50%);
opacity: 1;
}
100% {
opacity: 0.50;
transform: translateY(100%) translateX(-50%);
}
}
@keyframes shining {
from {
box-shadow: 0px 0px 5px 2px #0066cc;
}
to {
box-shadow: 0px 0px 5px 2px #0066cc;
}
}
@keyframes pulse-blue {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7)
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(33, 150, 243, 0)
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(33, 150, 243, 0)
}
}
.pulse-blue {
box-shadow: 0 0 0 0 #2196F3;
animation: pulse-blue 2s infinite;
}
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}