x

CSS animations

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

3,091 Views
Message 1 of 5
Report
4 REPLIES 4

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

3,080 Views
Message 2 of 5
Report

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.

3,069 Views
Message 3 of 5
Report

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.

3,062 Views
Message 4 of 5
Report

Did you get any helpful answers yet?

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

1,257 Views
Message 5 of 5
Report