MediaWiki:Common.less/animations.less

From The Kingkiller Chronicle Wiki
Jump to navigation Jump to search

Note: After saving, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
// <pre>
/* ================
      animations
   ================ */

@keyframes slide-up {

    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes slide-down {

    from {
        opacity: 0;
        transform: translateY(-1rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

/* ================
        classes
   ================ */

.slide-up {
    animation: .8s @ease-out-quad both slide-up;
}

.slide-up-2 {
    animation: .8s .3s @ease-out-quad both slide-up;
}

.slide-up-3 {
    animation: .8s .6s @ease-out-quad both slide-up;
}

.slide-down {
    animation: .8s @ease-out-quad both slide-down;
}

.slide-down-2 {
    animation: .8s .3s @ease-out-quad both slide-down;
}

.slide-down-3 {
    animation: .8s .6s @ease-out-quad both slide-down;
}