gitter-badger / movers.css Goto Github PK

movers.css is a collection of CSS based animations designed to make life easier! Please see below for a full list of current animations and a guide on how to use the library and add the animations to your own code.

This library is currently still a work in progress so please continue to check back for updates and new animations.

@-webkit-keyframes enterRight {
  0% {
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

@keyframes enterRight {
  0% {
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

.selector {
  -webkit-animation-name: enterRight;
          animation-name: enterRight;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: cubic-bezier(.64,.03,.39,1.49);
          animation-timing-function: cubic-bezier(.64,.03,.39,1.49);
}

Then change .selector to the element, #id or .class of the item you would like to animate.

Each animation can be customised and tweaked by changing the CSS properties such as animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-fill-mode etc. You can also tweak colours, border-colours and anything else within your own stylesheet to truly customise your work.

Due to the number of animations included and the size of the movers.css file, i recommend only adding the code for the animations that you wish to use to maximise performance and minimise any impact on loading time from an extra css file.