bauhaus animation

bauhaus animation

by Nick Hulea

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">
<article>
  <section class="section">
    <div class="container">
      <div class="columns is-centered">
        <div class="column has-text-centered">
          <svg style="width:60%;max-width:475px;" id="Layer" data-name="Layer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1706.3 104.42"><defs><style>.cls-1{fill:#fff;}</style></defs><title>presents</title><path class="cls-1" d="M2.48,11.78H59V25.12H38.55v55.1H22.81V25.12H2.48Z"/><path class="cls-1" d="M80.59,38.27h.28C83.81,33,88.78,29.9,95.59,29.9c10.76,0,17,7.18,17,18.13V80.22H98.25V50.79c0-5.34-2.85-8.93-8.18-8.93-5.61,0-9.39,4.51-9.39,10.76v27.6H66.24V11.78H80.68V30.64C80.68,31.1,80.68,35.05,80.59,38.27Z"/><path class="cls-1" d="M119.51,55.84c0-14.71,10.21-25.94,25.11-25.94a24,24,0,0,1,16.84,6.26c5.52,5.33,8,13.61,7.91,23.27h-35.7c.92,7.36,4.88,11.78,11.87,11.78,4.51,0,7.36-1.75,8.92-4.79h14C166,75.07,158,81.7,145.36,81.7,129.35,81.7,119.51,70.47,119.51,55.84Zm14.26-4.78h20.88c-.46-6.81-4.32-11-10-11C138,40.11,134.69,44.35,133.77,51.06Z"/><path class="cls-1" d="M249.5,71h-.28c-4,7.55-11.31,10.77-19.68,10.77-9.76,0-17.67-3.59-23.28-9.57-6-6.44-9.11-15.46-9.11-25.94,0-11.69,4.24-21.9,11.87-28.34,5.52-4.69,12.6-7.36,21.62-7.36,17.3,0,27.41,9.2,29.9,22.27H244.9c-1.66-5.06-6-9.3-13.8-9.3-12.14,0-18,9.85-18,22.73,0,13.15,7,22.72,18.21,22.72,9.66,0,15.46-6.53,15.55-13.43v-.28H233V43.61h28.61V80.22H250.79Z"/><path class="cls-1" d="M268.64,55.84c0-14.71,10.21-25.94,25.11-25.94a24,24,0,0,1,16.84,6.26c5.52,5.33,8,13.61,7.91,23.27H282.8c.92,7.36,4.88,11.78,11.87,11.78,4.51,0,7.36-1.75,8.93-4.79h14c-2.48,8.65-10.49,15.28-23.09,15.28C278.48,81.7,268.64,70.47,268.64,55.84Zm14.26-4.78h20.88c-.46-6.81-4.32-11-10-11C287.13,40.11,283.82,44.35,282.9,51.06Z"/><path class="cls-1"...

CSS

html,
svg,
* {
  background-color: #f8e71c;
}

article {
  padding: 0;
}

tagline {
  margin-top: 30px;
}

@media screen and (max-width: 1088px) {
  article {
    padding: 0 5%;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Firefox < 16 */

@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Internet Explorer */

@-ms-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Opera < 12.1 */

@-o-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideFromRight {
  from {
    right: -50em;
  }
  to {
    right: 0;
  }
}

/* Firefox < 16 */

@-moz-keyframes slideFromRight {
  from {
    right: -50em;
  }
  to {
    right: 0;
  }
}

/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes slideFromRight {
  from {
    right: -50em;
  }
  to {
    right: 0;
  }
}

/* Internet Explorer */

@-ms-keyframes slideFromRight {
  from {
    right: -50em;
  }
  to {
    right: 0;
  }
}

/* Opera < 12.1 */

@-o-keyframes slideFromRight {
  from {
    right: -50em;
  }
  to {
    right: 0;
  }
}

@keyframes slideFromLeft {
  from {
    left: -50em;
  }
  to {
    left: 0;
  }
}

/* Firefox < 16 */

@-moz-keyframes slideFromLeft {
  from {
    left: -50em;
  }
  to {
    left: 0;
  }
}

/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes slideFromLeft {
  from {
    left: -50em;
  }
  to {
    left: 0;
  }
}

/* Internet Explorer */

@-ms-keyframes slideFromLeft {
  from {
    left: -50em;
  }
  to {
    left: 0;
  }
}

/* Opera < 12.1 */

@-o-keyframes slideFromLeft {
  from {
    left: -50em;
  }
  to {
    left: 0;
  }
}

template {
  display: none !important;
}

.half-one-sec {
  animation-duration: 0.5s;
}

.one-sec {
  animation-duration: 1s;
}

.two-sec {
  animation-duration: 2s;
}

.three-sec {
 ...