Thread Options
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
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
Reply
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
4 REPLIES 4
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.
Reply
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- 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.
Reply
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report