title: Can not get CSS animation to work in Shopify
body: <p>I cannot get my animation to animate in my <a href="https://www.allabouttoytrains.com/pages/about-us" rel="nofollow noreferrer">Shopify page</a>. As you can see it is static and not moving how it should. I have decompiled the SASS to CSS, I have no errors in the inspect element tool. I am using the exact code from Codepen, I have the CSS in the theme.scss.liquid folder. So I'm stumped on why it's not working any help is appreciated.</p>
  
  <p><a href="https://codepen.io/marvindanig/pen/avLRJz" rel="nofollow noreferrer">https://codepen.io/marvindanig/pen/avLRJz</a></p>
  
  <p>html</p>
  
  <pre><code>&lt;div class="toy-train"&gt;
    &lt;div class="engine"&gt;
      &lt;div class="window"&gt;
        &lt;div class="engine-main"&gt;
          &lt;div class="smokes"&gt;
            &lt;span&gt;&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="engine-body"&gt;
        &lt;div class="wheels"&gt;
          &lt;div class="big-wheel"&gt;&lt;/div&gt;
          &lt;div class="normal-wheel"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="locomotive"&gt;
      &lt;div class="trash"&gt;&lt;/div&gt;
      &lt;div class="wheels"&gt;
        &lt;div class="normal-wheel"&gt;&lt;/div&gt;
        &lt;div class="normal-wheel"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="tracks"&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#about-us{
  
      body {
      background: linear-gradient(90deg, #1A2980 10%, #26D0CE 90%);
      height: 100vh;
      width: 100vw;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
    .toy-train {
      position: relative;
      width: 11vw;
    }
  
    .engine {
      float: right;
      position: relative;
    }
  
    .window {
      height: 2.8vw;
      width: 3vw;
      background-color: #194488;
      position: relative;
      border: .3vw solid #000;
    }
  
    .window:before,
    .window:after {
      content: "";
      position: absolute;
      left: 50%;
      border: .3vw solid #000;
    }
  
    .window:before {
      height: .7vw;
      background-color: #F82510;
      width: 4.5vw;
      margin-top: -1.3vw;
      margin-left: -2.6vw;
      border-radius: .8vw;
    }
  
    .window:after {
      margin-left: -.8vw;
      margin-top: .3vw;
      border-radius: 50%;
      height: 1.1vw;
      width: 1.1vw;
      background-color: #fff;
    }
  
    .engine-main {
      height: 1vw;
      width: 3.5vw;
      border: .3vw solid #000;
      background-color: #3D9A01;
      position: absolute;
      border-radius: 0 .8vw .8vw 0;
      right: -4.1vw;
      bottom: -.3vw;
    }
  
    .engine-main:before {
      content: "";
      height: 1vw;
      width: .8vw;
      background-color: #000;
      position: absolute;
      top: -1.1vw;
      left: .4vw;
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
      border-radius: 50% 50% 50% 50% / 90% 90% 40% 40%;
    }
  
    .engine-main:after {
      content: "";
      height: 1.2vw;
      width: .8vw;
      position: absolute;
      display: block;
      right: .5vw;
      top: -1.8vw;
      border-radius: 50% 50% 50% 50% / 90% 90% 40% 40%;
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
      z-index: -1;
      background-color: #194488;
      border: .3vw solid #000;
    }
  
    .engine-body {
      height: 1.7vw;
      width: 7.5vw;
      position: absolute;
      left: -.2vw;
      top: 3.0vw;
      background-color: #F69F00;
      border: .3vw solid #000;
      border-radius: .5vw;
    }
  
    .engine-body .big-wheel {
      top: .3vw;
      left: .2vw;
    }
  
    .engine-body .normal-wheel {
      left: 4.5vw;
      top: .5vw;
    }
  
    .engine-body:before {
      content: "";
      position: absolute;
      height: .5vw;
      width: .5vw;
      left: -1.1vw;
      bottom: .2vw;
      z-index: -1;
      background-color: #fff;
      border-radius: 50%;
      border: .3vw solid #000;
    }
  
    .wheels &gt; div {
      position: absolute;
      background-color: #F82510;
      border-radius: 50%;
      border: .3vw solid #000;
      -webkit-animation: wheel-rotate 1s linear infinite;
              animation: wheel-rotate 1s linear infinite;
    }
  
    .wheels &gt; div:before {
      content: "";
      position: absolute;
      width: 100%;
      border-bottom: .1vw solid #000;
      top: 50%;
      margin-top: -.1vw;
    }
  
    .wheels &gt; div:after {
      content: "";
      height: .8vw;
      width: .8vw;
      position: absolute;
      background-color: #000;
      border-radius: 50%;
      left: 50%;
      top: 50%;
      margin-left: -.4vw;
      margin-top: -.4vw;
    }
  
    .wheels .big-wheel {
      width: 2.2vw;
      height: 2.2vw;
      -webkit-animation-delay: -0.3s;
              animation-delay: -0.3s;
    }
  
    .wheels .normal-wheel {
      height: 2.0vw;
      width: 2.0vw;
      -webkit-animation-delay: -0.6s;
              animation-delay: -0.6s;
    }
  
    .locomotive {
      height: 3.5vw;
      width: 6.0vw;
      border: .3vw solid #000;
      background-color: #F69F00;
      border-radius: .5vw;
      position: relative;
      float: left;
      margin-top: 1.3vw;
    }
  
    .locomotive:before {
      content: "";
      width: 100%;
      background: linear-gradient(to right, #000000 0%, #000000 8%, #f69f00 8%, #f69f00 15%, #000000 15%, #000000 28%, #000000 34%, #f69f00 34%, #f69f00 65%, #000000 65%, #000000 65%, #000000 100%);
      height: .3vw;
      position: absolute;
      top: .6vw;
      left: 0;
    }
  
    .locomotive:after {
      content: "";
      width: 100%;
      background: linear-gradient(to right, #000000 0%, #000000 24%, #f69f00 24%, #f69f00 65%, #f69f00 65%, #000000 65%, #000000 85%, #f69f00 85%, #f69f00 90%, #000000 90%, #000000 100%);
      height: .3vw;
      position: absolute;
      top: 1.4vw;
      left: 0;
    }
  
    .locomotive .wheels &gt; div {
      top: 2.2vw;
      -webkit-animation-delay: -0.6s;
              animation-delay: -0.6s;
    }
  
    .locomotive .wheels &gt; div:first-child {
      -webkit-animation-delay: -0.9s;
              animation-delay: -0.9s;
    }
  
    .locomotive .normal-wheel:first-of-type {
      left: .2vw;
    }
  
    .locomotive .normal-wheel:last-of-type {
      right: .2vw;
    }
  
    .locomotive .trash {
      height: 3.5vw;
      width: 5.0vw;
      position: absolute;
      top: -1.8vw;
      border: .3vw solid #000;
      background-color: #3D9A01;
      border-radius: 50%;
      left: .2vw;
      z-index: -1;
    }
  
    .tracks {
      position: relative;
      width: 20vw;
      bottom: -1vw;
      overflow: hidden;
      height: .3vw;
    }
  
    .tracks span {
      display: inline;
      height: .3vw;
      width: 20vw;
      position: absolute;
      left: 20vw;
      background: linear-gradient(to right, black 0%, black 30%, transparent 30%, transparent 39%, black 39%, black 61%, black 65%, transparent 65%, transparent 70%, black 71%, black 100%);
      -webkit-animation: track 2s linear infinite;
              animation: track 2s linear infinite;
      -webkit-animation-fill-mode: forwards;
              animation-fill-mode: forwards;
    }
  
    .tracks span:nth-child(2) {
      -webkit-animation-delay: -1s;
              animation-delay: -1s;
    }
  
    .smokes:before,
    .smokes:after,
    .smokes span:before {
      display: block;
      content: "";
      height: .8vw;
      width: .8vw;
      background-color: #fff;
      border-radius: 50%;
      position: absolute;
      right: .8vw;
      top: 1.5vw;
      z-index: -1;
    }
  
    .smokes:before {
      -webkit-animation: smoke 1s linear infinite;
              animation: smoke 1s linear infinite;
    }
  
    .smokes span:before {
      -webkit-animation: smoke 1s linear infinite;
              animation: smoke 1s linear infinite;
      -webkit-animation-delay: -0.6s;
              animation-delay: -0.6s;
    }
  
    .smokes:after {
      -webkit-animation: smoke 1s linear infinite;
              animation: smoke 1s linear infinite;
      -webkit-animation-delay: -0.3s;
              animation-delay: -0.3s;
    }
  
    @-webkit-keyframes smoke {
      100% {
        top: -5vw;
        opacity: 0.5;
      }
    }
  
    @keyframes smoke {
      100% {
        top: -5vw;
        opacity: 0.5;
      }
    }
  
    @-webkit-keyframes wheel-rotate {
      100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
      }
    }
  
    @keyframes wheel-rotate {
      100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
      }
    }
  
    @-webkit-keyframes track {
      100% {
        left: -20vw;
      }
    }
  
    @keyframes track {
      100% {
        left: -20vw;
      }
    }
  
  }
  </code></pre>