ng-repeat-fast/site/css/animations.less

Faster ng-repeat realization that caches DOM nodes.

@z: -100px;


@keyframes star-wars {
  0% { transform: translate3d(0, 0, @z); opacity: 0; }
  100% { transform: translate3d(0, 0, 0); opacity: 1; }
}
@-webkit-keyframes star-wars {
  0% { transform: translate3d(0, 0, @z); opacity: 0; }
  100% { transform: translate3d(0, 0, 0); opacity: 1; }
}
@-moz-keyframes star-wars {
  0% { transform: translate3d(0, 0, @z); opacity: 0; }
  100% { transform: translate3d(0, 0, 0); opacity: 1;}
}



@keyframes slide-from-bottom {
  0% { transform: translateY(2000px); }
  100% { transform: translateY(0); }
}
@-webkit-keyframes slide-from-bottom {
  0% { transform: translateY(2000px); }
  100% { transform: translateY(0); }
}
@-moz-keyframes slide-from-bottom {
  0% { transform: translateY(2000px); }
  100% { transform: translateY(0); }
}



@keyframes slide-from-top {
  0% { transform: translateY(-500px); }
  100% { transform: translateY(0); }
}
@-webkit-keyframes slide-from-top {
  0% { transform: translateY(-500px); }
  100% { transform: translateY(0); }
}
@-moz-keyframes slide-from-top {
  0% { transform: translateY(-500px); }
  100% { transform: translateY(0); }
}



@keyframes opacity {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-webkit-keyframes opacity {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes opacity {
  0% { opacity: 0; }
  100% { opacity: 1; }
}



@keyframes shift-left-to-right {
  0% { transform: translateX(-500px); }
  100% { transform: translateX(0); }
}
@-webkit-keyframes shift-left-to-right {
  0% { transform: translateX(-500px); }
  100% { transform: translateX(0); }
}
@-moz-keyframes shift-left-to-right {
  0% { transform: translateX(-500px); }
  100% { transform: translateX(0); }
}



@keyframes rotation-y {
  0% { transform: rotateY(180deg); }
  100% { transform: rotateY(0deg); }
}
@-webkit-keyframes rotation-y {
  0% { transform: rotateY(180deg); }
  100% { transform: rotateY(0deg); }
}
@-moz-keyframes rotation-y {
  0% { transform: rotateY(180deg); }
  100% { transform: rotateY(0deg); }
}


@keyframes rotation-y2 {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
  100% { transform: rotateY(0deg); }
}
@-webkit-keyframes rotation-y2 {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
  100% { transform: rotateY(0deg); }
}
@-moz-keyframes rotation-y2 {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}