CSS animations

[vegasmods]

Ive been trying to put css animations can someone help me?

CSS

HTML, BODY {
  height: 100%;
  }

$colors: #360745, #D61C59, #E7D84B, #EFEAC5, #1B8798;

BODY {
  background: hsl(200,70,11);
  background-size: .12em 100%;
  font: 16em/1 Arial;
}

.text--line {
  font-size: .5em;
  }

svg {
  position: absolute;
  width: 100%;
  height: 100%;
  }

$max: 5;
$stroke-step: 7%; 
.text-copy {
  fill: none;
  stroke: white;
  stroke-dasharray: $stroke-step $stroke-step * ($max - 1);
  stroke-width: 3px;
  
  animation: stroke-offset 9s infinite linear;
  
  @for $item from 1 through $max {
    $stroke-color: nth($colors, $item);
    
    &:nth-child(#{$item}) {
      stroke: $stroke-color;
      stroke-dashoffset: $stroke-step * $item;
      }
    }
  }

@keyframes stroke-offset {
  50% {
    stroke-dashoffset: $stroke-step * $max;  
    stroke-dasharray: 0 $stroke-step * $max*2.5;
  }
}

<svg viewBox="0 0 800 600">
  <symbol id="s-text">
    <text text-anchor="middle"
          x="50%"
          y="35%"
          class="text--line"
          >
      Vegas
    </text>
    <text text-anchor="middle"
          x="50%"
          y="68%"
          class="text--line2"
          >
      Hacks
    </text>
    
  </symbol>
  
  <g class="g-ants">
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
  </g>
  
  
</svg>

HTML

[BJ5]

Pretty complicated stuff! How are you including this on your site? With an embed code element?

[vegasmods]

well i know i need to add the CSS first in the edit HTML and CSS page. Then put the embedded code with the HTML inside it.

[BJ5]

Depending on the CSS it's possible the default theme CSS is overriding some of this.  Hard to say, though.  Are you seeing anything in the source code on your live site? If the code for it shows, you might be able to tell there if something is being overridden.

[ShaunaL]

Did you get any helpful answers yet?

I'm trying animate a CSS spinning loader. A simple enough task, but not working in Weebly?