Can not get CSS animation to work in Shopify - html

Question

I cannot get my animation to animate in my Shopify page. 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.
https://codepen.io/marvindanig/pen/avLRJz
html
<div class="toy-train">
<div class="engine">
<div class="window">
<div class="engine-main">
<div class="smokes">
<span></span>
</div>
</div>
</div>
<div class="engine-body">
<div class="wheels">
<div class="big-wheel"></div>
<div class="normal-wheel"></div>
</div>
</div>
</div>
<div class="locomotive">
<div class="trash"></div>
<div class="wheels">
<div class="normal-wheel"></div>
<div class="normal-wheel"></div>
</div>
</div>
<div class="tracks">
<span></span>
<span></span>
</div>
</div>
CSS
#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 > 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 > div:before {
content: "";
position: absolute;
width: 100%;
border-bottom: .1vw solid #000;
top: 50%;
margin-top: -.1vw;
}
.wheels > 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 > div {
top: 2.2vw;
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.locomotive .wheels > 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;
}
}
}

Answer 1

Just close the first selector or remove it:
#about-us{ to #about-us{}
#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 > 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 > div:before {
content: "";
position: absolute;
width: 100%;
border-bottom: .1vw solid #000;
top: 50%;
margin-top: -.1vw;
}
.wheels > 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 > div {
top: 2.2vw;
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.locomotive .wheels > 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;
}
}
}
<div class="toy-train">
<div class="engine">
<div class="window">
<div class="engine-main">
<div class="smokes">
<span></span>
</div>
</div>
</div>
<div class="engine-body">
<div class="wheels">
<div class="big-wheel"></div>
<div class="normal-wheel"></div>
</div>
</div>
</div>
<div class="locomotive">
<div class="trash"></div>
<div class="wheels">
<div class="normal-wheel"></div>
<div class="normal-wheel"></div>
</div>
</div>
<div class="tracks">
<span></span>
<span></span>
</div>
</div>