12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- // Animation Setter ---------------------------------------------------- //
- .fadeIn {
- animation-name: fadeIn;
- animation-duration: .3s;
- animation-fill-mode: forwards;
- animation-timing-function: $timing;
- }
- .fadeOut {
- animation-name: fadeOut;
- animation-duration: .3s;
- animation-fill-mode: forwards;
- animation-timing-function: $timing;
- }
- // Fade -------------------------------------------------------------- //
- @keyframes fadeIn {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
- }
- @keyframes fadeOut {
- 0% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- }
- }
- // Move -------------------------------------------------------------- //
- @keyframes moveBackground {
- 0% {
- background-position-x: 0px;
- }
- 100% {
- background-position-x: -100px;
- }
- }
- // Zoom -------------------------------------------------------------- //
- @keyframes zoomIn {
- 0% {
- opacity: 0;
- transform: scale(.8);
- }
- 100% {
- opacity: 1;
- transform: scale(1);
- }
- }
- @keyframes zoomOut {
- 0% {
- opacity: 1;
- transform: scale(1);
- }
- 100% {
- opacity: 0;
- transform: scale(.8);
- }
- }
- // PopIn -------------------------------------------------------------- //
- @keyframes popIn {
- 0% {
- opacity: 0;
- transform: scale(0);
- }
- 100% {
- opacity: 1;
- transform: scale(1);
- }
- }
- // Pulse -------------------------------------------------------------- //
- @keyframes pulse {
- 0% {
- opacity: 1;
- }
- 50% {
- opacity: .3;
- }
- 100% {
- opacity: 1;
- }
- }
|