72 lines
812 B
CSS
72 lines
812 B
CSS
|
/*
|
||
|
* Animation Keyframes
|
||
|
*/
|
||
|
@charset "utf-8";
|
||
|
|
||
|
/* Spin */
|
||
|
@keyframes spin {
|
||
|
|
||
|
0% {
|
||
|
transform: rotate(0deg);
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
transform: rotate(360deg);
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
/* Fade out */
|
||
|
@keyframes fadeOut {
|
||
|
|
||
|
0% {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
opacity: 0;
|
||
|
display: none;
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
/* Fade in */
|
||
|
@keyframes fadeIn {
|
||
|
|
||
|
0% {
|
||
|
opacity: 0;
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
opacity: 1;
|
||
|
display: block;
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
/* Slide in from right */
|
||
|
@keyframes slideInFromRight { /* Requires position: relative to be set on the element */
|
||
|
|
||
|
0% {
|
||
|
right: -100%;
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
right: 0%;
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
/* Slide out to bottom */
|
||
|
@keyframes slideOutToBottom { /* Read comment above */
|
||
|
|
||
|
0% {
|
||
|
bottom: 0%;
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
bottom: -100%;
|
||
|
}
|
||
|
|
||
|
}
|