WebJamApps/breakpointministries

View on GitHub
static/base/_animations.scss

Summary

Maintainability
Test Coverage
/* splash is in the index.ejs file, used for the initial page load animation */

.splash {
    text-align: center;
    margin: 10% 0 0;
    box-sizing: border-box;
  }

  .splash .message {
    font-size: 72px;
    line-height: 72px;
    text-shadow: rgba(0, 0, 0, 0.5) 0 0 15px;
    text-transform: uppercase;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }

  .splash .fa-spinner {
    text-align: center;
    display: inline-block;
    font-size: 72px;
    margin-top: 50px;
  }

// KEYFRAMES

@keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes fadeInRight {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      -ms-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
    }

    100% {
      opacity: 1;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;
    }
  }

  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

// ANIMATION DEFINITIONS

@-webkit-keyframes fadeInRight {
    0% {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }

    100% {
      opacity: 1;
      transform: none;
    }
  }