floatr/floatr.css

Float images across the background of a block element

@-webkit-keyframes top-to-bottom {
  0% {
    -webkit-transform: translateY(0); }
  5% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    -webkit-transform: translateY(100%); } }
@-moz-keyframes top-to-bottom {
  0% {
    -moz-transform: translateY(0); }
  5% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    -moz-transform: translateY(100%); } }
@keyframes top-to-bottom {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }
  5% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%); } }
@-webkit-keyframes left-to-right {
  0% {
    -webkit-transform: translateX(0); }
  5% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    -webkit-transform: translateX(100%); } }
@-moz-keyframes left-to-right {
  0% {
    -moz-transform: translateX(0); }
  5% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    -moz-transform: translateX(100%); } }
@keyframes left-to-right {
  0% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0); }
  5% {
    opacity: 1; }
  95% {
    opacity: 1; }
  100% {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%); } }
.floatr {
  display: flex;
  overflow: hidden;
  justify-content: space-around;
  align-items: flex-start; }
  .floatr.vertical {
    flex-direction: row; }
    .floatr.vertical .transition-wrapper {
      height: 100%;
      opacity: 0; }
      .floatr.vertical .transition-wrapper.active.forward {
        -webkit-animation-name: top-to-bottom;
        -moz-animation-name: top-to-bottom;
        animation-name: top-to-bottom;
        -webkit-animation-timing-function: linear;
        -moz-animation-timing-function: linear;
        animation-timing-function: linear; }
      .floatr.vertical .transition-wrapper.active.reversed {
        -webkit-animation-name: top-to-bottom;
        -moz-animation-name: top-to-bottom;
        animation-name: top-to-bottom;
        -webkit-animation-timing-function: linear;
        -moz-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-direction: reverse;
        -moz-animation-direction: reverse;
        animation-direction: reverse; }
  .floatr .image {
    width: auto; }
  .floatr.horizontal {
    flex-direction: column; }
    .floatr.horizontal .transition-wrapper {
      width: 100%;
      opacity: 0; }
      .floatr.horizontal .transition-wrapper.active.forward {
        -webkit-animation-name: left-to-right;
        -moz-animation-name: left-to-right;
        animation-name: left-to-right;
        -webkit-animation-timing-function: linear;
        -moz-animation-timing-function: linear;
        animation-timing-function: linear; }
      .floatr.horizontal .transition-wrapper.active.reversed {
        -webkit-animation-name: left-to-right;
        -moz-animation-name: left-to-right;
        animation-name: left-to-right;
        -webkit-animation-timing-function: linear;
        -moz-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-direction: reverse;
        -moz-animation-direction: reverse;
        animation-direction: reverse; }
  .floatr .image {
    height: auto; }
  .floatr .one-s {
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s; }
  .floatr .two-s {
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    animation-duration: 2s; }
  .floatr .five-s {
    -webkit-animation-duration: 5s;
    -moz-animation-duration: 5s;
    animation-duration: 5s; }
  .floatr .ten-s {
    -webkit-animation-duration: 10s;
    -moz-animation-duration: 10s;
    animation-duration: 10s; }
  .floatr .twenty-s {
    -webkit-animation-duration: 20s;
    -moz-animation-duration: 20s;
    animation-duration: 20s; }
  .floatr .thirty-s {
    -webkit-animation-duration: 30s;
    -moz-animation-duration: 30s;
    animation-duration: 30s; }
  .floatr .fifty-s {
    -webkit-animation-duration: 50s;
    -moz-animation-duration: 50s;
    animation-duration: 50s; }

/*# sourceMappingURL=floatr.css.map */