Replicating 2 different flicker animations on an SVG

asasass · October 13, 2018, 7:43am

The flicker you can see on here:

Flicker

Intro

<div class="logo-load_w">

.logo-play_w svg path {
  stroke: #08f9ff;
  -webkit-animation: flicker-in-1 5s linear 5s infinite both;
  animation: flicker-in-1 5s linear 5s infinite both;
}

.logo-load_w svg path {
  stroke: #08f9ff;
  stroke-dasharray: 150;
  stroke-dashoffset: 1500;
  -webkit-animation: draw 20s infinite linear;
  animation: draw 20s infinite linear;
}

.cls-1 {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 4px;
}

.cls-1 {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 4px;
}

.cls-1 {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 4px;
}

.cls-1 {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 4px;
}

.cls-1 {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 4px;
}

.cls-1 {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 4px;
}

.cls-1 {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 4px;
}

.cls-1 {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 4px;
}

.cls-1 {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 4px;
}

.cls-1 {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 4px;
}

.cls-1 {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 4px;
}

/*
0% {
    opacity: 0;
}
10% {
    opacity: 0;
}
10.1% {
    opacity: 1;
}
10.2% {
    opacity: 0;
}
20% {
    opacity: 0;
}
20.1% {
    opacity: 1;
}
20.6% {
    opacity: 0;
}
30% {
    opacity: 0;
}
30.1% {
    opacity: 1;
}
30.5% {
    opacity: 1;
}
30.6% {
    opacity: 0;
}
45% {
    opacity: 0;
}
45.1% {
    opacity: 1;
}
50% {
    opacity: 1;
}
55% {
    opacity: 1;
}
55.1% {
    opacity: 0;
}
57% {
    opacity: 0;
}
57.1% {
    opacity: 1;
}
60% {
    opacity: 1;
}
60.1% {
    opacity: 0;
}
65% {
    opacity: 0;
}
65.1% {
    opacity: 1;
}
75% {
    opacity: 1;
}
75.1% {
    opacity: 0;
}
77% {
    opacity: 0;
}
77.1% {
    opacity: 1;
}
85% {
    opacity: 1;
}
85.1% {
    opacity: 0;
}
86% {
    opacity: 0;
}
86.1% {
    opacity: 1;
}
100% {
    opacity: 1;
}
0% {
    opacity: 0;
}
10% {
    opacity: 0;
}
10.1% {
    opacity: 1;
}
10.2% {
    opacity: 0;
}
20% {
    opacity: 0;
}
20.1% {
    opacity: 1;
}
20.6% {
    opacity: 0;
}
30% {
    opacity: 0;
}
30.1% {
    opacity: 1;
}
30.5% {
    opacity: 1;
}
30.6% {
    opacity: 0;
}
45% {
    opacity: 0;
}
45.1% {
    opacity: 1;
}
50% {
    opacity: 1;
}
55% {
    opacity: 1;
}
55.1% {
    opacity: 0;
}
57% {
    opacity: 0;
}
57.1% {
    opacity: 1;
}
60% {
    opacity: 1;
}
60.1% {
    opacity: 0;
}
65% {
    opacity: 0;
}
65.1% {
    opacity: 1;
}
75% {
    opacity: 1;
}
75.1% {
    opacity: 0;
}
77% {
    opacity: 0;
}
77.1% {
    opacity: 1;
}
85% {
    opacity: 1;
}
85.1% {
    opacity: 0;
}
86% {
    opacity: 0;
}
86.1% {
    opacity: 1;
}
100% {
    opacity: 1;
}
0% {
    opacity: 0;
}
10% {
    opacity: 0;
}
10.1% {
    opacity: 1;
}
10.2% {
    opacity: 0;
}
20% {
    opacity: 0;
}
20.1% {
    opacity: 1;
}
20.6% {
    opacity: 0;
}
30% {
    opacity: 0;
}
30.1% {
    opacity: 1;
}
30.5% {
    opacity: 1;
}
30.6% {
    opacity: 0;
}
45% {
    opacity: 0;
}
45.1% {
    opacity: 1;
}
50% {
    opacity: 1;
}
55% {
    opacity: 1;
}
55.1% {
    opacity: 0;
}
57% {
    opacity: 0;
}
57.1% {
    opacity: 1;
}
60% {
    opacity: 1;
}
60.1% {
    opacity: 0;
}
65% {
    opacity: 0;
}
65.1% {
    opacity: 1;
}
75% {
    opacity: 1;
}
75.1% {
    opacity: 0;
}
77% {
    opacity: 0;
}
77.1% {
    opacity: 1;
}
85% {
    opacity: 1;
}
85.1% {
    opacity: 0;
}
86% {
    opacity: 0;
}
86.1% {
    opacity: 1;
}
100% {
    opacity: 1;
}
0% {
    opacity: 0;
}
10% {
    opacity: 0;
}
10.1% {
    opacity: 1;
}
10.2% {
    opacity: 0;
}
20% {
    opacity: 0;
}
20.1% {
    opacity: 1;
}
20.6% {
    opacity: 0;
}
30% {
    opacity: 0;
}
30.1% {
    opacity: 1;
}
30.5% {
    opacity: 1;
}
30.6% {
    opacity: 0;
}
45% {
    opacity: 0;
}
45.1% {
    opacity: 1;
}
50% {
    opacity: 1;
}
55% {
    opacity: 1;
}
55.1% {
    opacity: 0;
}
57% {
    opacity: 0;
}
57.1% {
    opacity: 1;
}
60% {
    opacity: 1;
}
60.1% {
    opacity: 0;
}
65% {
    opacity: 0;
}
65.1% {
    opacity: 1;
}
75% {
    opacity: 1;
}
75.1% {
    opacity: 0;
}
77% {
    opacity: 0;
}
77.1% {
    opacity: 1;
}
85% {
    opacity: 1;
}
85.1% {
    opacity: 0;
}
86% {
    opacity: 0;
}
86.1% {
    opacity: 1;
}
100% {
    opacity: 1;
}


  <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 47.96 51.66"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:4px;}</style></defs><g id="Слой_2" data-name="Слой 2"><g id="play"><path class="cls-1" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83"></path></g></g></svg></div>

asasass · October 13, 2018, 7:51am

I think this goes with the intro one:


#logo-load_w svg {
    -webkit-animation: flicker-1 2s linear 2s infinite both;
    animation: flicker-1 2s linear 2s infinite both;
}
#logo-load svg {
    width: 70px;
    left: 50%;
    margin-left: -35px;
    top: 50%;
    margin-top: -35px;
    position: fixed;
}

0%, 100% {
    opacity: 1;
}
41.99% {
    opacity: 1;
}
42% {
    opacity: 0;
}
43% {
    opacity: 0;
}
43.01% {
    opacity: 1;
}
47.99% {
    opacity: 1;
}
48% {
    opacity: 0;
}
49% {
    opacity: 0;
}
49.01% {
    opacity: 1;
}
0%, 100% {
    opacity: 1;
}
41.99% {
    opacity: 1;
}
42% {
    opacity: 0;
}
43% {
    opacity: 0;
}
43.01% {
    opacity: 1;
}
47.99% {
    opacity: 1;
}
48% {
    opacity: 0;
}
49% {
    opacity: 0;
}
49.01% {
    opacity: 1;
}
0%, 100% {
    opacity: 1;
}
41.99% {
    opacity: 1;
}
42% {
    opacity: 0;
}
43% {
    opacity: 0;
}
43.01% {
    opacity: 1;
}
47.99% {
    opacity: 1;
}
48% {
    opacity: 0;
}
49% {
    opacity: 0;
}
49.01% {
    opacity: 1;
}
0%, 100% {
    opacity: 1;
}
41.99% {
    opacity: 1;
}
42% {
    opacity: 0;
}
43% {
    opacity: 0;
}
43.01% {
    opacity: 1;
}
47.99% {
    opacity: 1;
}
48% {
    opacity: 0;
}
49% {
    opacity: 0;
}
49.01% {
    opacity: 1;
}
0%, 100% {
    opacity: 1;
}
41.99% {
    opacity: 1;
}
42% {
    opacity: 0;
}
43% {
    opacity: 0;
}
43.01% {
    opacity: 1;
}
47.99% {
    opacity: 1;
}
48% {
    opacity: 0;
}
49% {
    opacity: 0;
}
49.01% {
    opacity: 1;
}
0%, 100% {
    opacity: 1;
}
41.99% {
    opacity: 1;
}
42% {
    opacity: 0;
}
43% {
    opacity: 0;
}
43.01% {
    opacity: 1;
}
47.99% {
    opacity: 1;
}
48% {
    opacity: 0;
}
49% {
    opacity: 0;
}
49.01% {
    opacity: 1;
}

TechnoBear · October 13, 2018, 7:52am

The animated triangle is nifty, but that background flicker is horrible; it makes me feel ill. I’d seriously rethink using it.

asasass · October 13, 2018, 7:56am

I want to know how it’s made, looks pretty cool. I believe it uses @keyframes which I don’t know how that works. Either @paulOB or @ray.h helped me with one of these before, or both. Most likely both.

coothead · October 13, 2018, 10:19am

Hi there asasass,

here is the draw method…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }

#triangle {
    display: block;
    padding: 0.5em;
    margin: auto;
    background-color: #20007d;
 }

#triangle path {
    stroke: #08f9ff;
    stroke-dasharray: 150;
    stroke-dashoffset: 1500;
    animation: draw 20s infinite linear;
}

@keyframes draw {
to {
    stroke-dashoffset: 0;
   }
 }
</style>

</head>
<body> 

<svg  
    id="triangle" 
    xmlns="http://www.w3.org/2000/svg" 
    width="80" 
    height="80" 
   viewBox="0 0 48 52">

 <defs>
  <style> 
   path {
       fill: none;
       stroke: #fff;
       stroke-miterlimit: 10;
       stroke-width: 4px;
    }
  </style>
 </defs>

 <g>
  <path d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83"/>
 </g>

</svg>

</body>
</html>

Note:- The animation does not work in IE11.

Please do not ask me for a flickering example.

coothead

asasass · October 13, 2018, 10:54am

Thanks for that.

Now I’m just waiting for the flickering one. Maybe that’s a more difficult one.

It’s the one where it flickers in and out.

coothead · October 13, 2018, 11:25am

Hi there asasass,

I wouldn’t have thought so.

But, on principal, I will never ever create flickering items.

coothead

asasass · October 13, 2018, 3:28pm

I’m working on this part:

@keyframes flicker - 1

0%, 100% {
    opacity: 1;
}
41.99% {
    opacity: 1;
}
42% {
    opacity: 0;
}
43% {
    opacity: 0;
}
43.01% {
    opacity: 1;
}
47.99% {
    opacity: 1;
}
48% {
    opacity: 0;
}
49% {
    opacity: 0;
}
49.01% {
    opacity: 1;
}

@keyframes flicker - 1

100% {
    opacity: 1;
}
41.99% {
    opacity: 1;
}
42% {
    opacity: 0;
}
43% {
    opacity: 0;
}
43.01% {
    opacity: 1;
}
47.99% {
    opacity: 1;
}
48% {
    opacity: 0;
}
49% {
    opacity: 0;
}
49.01% {
    opacity: 1;
}
@keyframes flicker - 1

 100% {
    opacity: 1;
}
41.99% {
    opacity: 1;
}
42% {
    opacity: 0;
}
43% {
    opacity: 0;
}
43.01% {
    opacity: 1;
}
47.99% {
    opacity: 1;
}
48% {
    opacity: 0;
}
49% {
    opacity: 0;
}
49.01% {
    opacity: 1;
}

@keyframes flicker - 1

0%, 100% {
    opacity: 1;
}
41.99% {
    opacity: 1;
}
42% {
    opacity: 0;
}
43% {
    opacity: 0;
}
43.01% {
    opacity: 1;
}
47.99% {
    opacity: 1;
}
48% {
    opacity: 0;
}
49% {
    opacity: 0;
}
49.01% {
    opacity: 1;
}

@keyframes flicker - 1

0%, 100% {
    opacity: 1;
}
41.99% {
    opacity: 1;
}
42% {
    opacity: 0;
}
43% {
    opacity: 0;
}
43.01% {
    opacity: 1;
}
47.99% {
    opacity: 1;
}
48% {
    opacity: 0;
}
49% {
    opacity: 0;
}
49.01% {
    opacity: 1;
}

PaulOB · October 13, 2018, 3:32pm

At the risking of annoying @coothead (and all your visitors) you could try something like this.

#triangle path {
    stroke: #08f9ff;
    stroke-dasharray: 150;
    stroke-dashoffset: 1500;
    animation: draw 5s infinite linear;
}

@keyframes draw {
0% {stroke-width: 0px;}
9% {stroke-width: 0px;}
10% {stroke-width: 4px;}
20% {stroke-width: 4px;} 
21% {stroke-width: 0px;} 
35% {stroke-width: 4px;}  
36% {stroke-width: 4px;}  
46% {stroke-width: 0px;}  
56% {stroke-width: 4px;}  
66% {stroke-width: 0px;}  
86% {stroke-width: 4px;}  
}

Just tweak until it suits.

asasass · October 13, 2018, 3:36pm

Isn’t this what goes with it?


  animation: flicker-1 2s linear 2s infinite both;

asasass · October 13, 2018, 3:38pm

Isn’t that different from this?


@keyframes flicker - 1

0%, 100% {
    opacity: 1;
}
41.99% {
    opacity: 1;
}
42% {
    opacity: 0;
}
43% {
    opacity: 0;
}
43.01% {
    opacity: 1;
}
47.99% {
    opacity: 1;
}
48% {
    opacity: 0;
}
49% {
    opacity: 0;
}
49.01% {
    opacity: 1;
}

@keyframes flicker - 1

100% {
    opacity: 1;
}
41.99% {
    opacity: 1;
}
42% {
    opacity: 0;
}
43% {
    opacity: 0;
}
43.01% {
    opacity: 1;
}
47.99% {
    opacity: 1;
}
48% {
    opacity: 0;
}
49% {
    opacity: 0;
}
49.01% {
    opacity: 1;
}
@keyframes flicker - 1

 100% {
    opacity: 1;
}
41.99% {
    opacity: 1;
}
42% {
    opacity: 0;
}
43% {
    opacity: 0;
}
43.01% {
    opacity: 1;
}
47.99% {
    opacity: 1;
}
48% {
    opacity: 0;
}
49% {
    opacity: 0;
}
49.01% {
    opacity: 1;
}

@keyframes flicker - 1

0%, 100% {
    opacity: 1;
}
41.99% {
    opacity: 1;
}
42% {
    opacity: 0;
}
43% {
    opacity: 0;
}
43.01% {
    opacity: 1;
}
47.99% {
    opacity: 1;
}
48% {
    opacity: 0;
}
49% {
    opacity: 0;
}
49.01% {
    opacity: 1;
}

@keyframes flicker - 1

0%, 100% {
    opacity: 1;
}
41.99% {
    opacity: 1;
}
42% {
    opacity: 0;
}
43% {
    opacity: 0;
}
43.01% {
    opacity: 1;
}
47.99% {
    opacity: 1;
}
48% {
    opacity: 0;
}
49% {
    opacity: 0;
}
49.01% {
    opacity: 1;
}

PaulOB · October 13, 2018, 3:40pm

Same technique I just animated the width of the line rather than the opacity as your original seemed to do that. There’s not a lot of difference.

asasass · October 13, 2018, 3:46pm

I have this part set:

@keyframes flicker {
  0%,
  100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  47.99% {
    opacity: 1;
  }
  48% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  49.01% {
    opacity: 1;
  }
}

@keyframes flicker {
  100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  47.99% {
    opacity: 1;
  }
  48% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  49.01% {
    opacity: 1;
  }
}

@keyframes flicker {
  100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  47.99% {
    opacity: 1;
  }
  48% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  49.01% {
    opacity: 1;
  }
}

@keyframes flicker {
  0%,
  100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  47.99% {
    opacity: 1;
  }
  48% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  49.01% {
    opacity: 1;
  }
}

@keyframes flicker {
  0%,
  100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  47.99% {
    opacity: 1;
  }
  48% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  49.01% {
    opacity: 1
  }
}

asasass · October 13, 2018, 3:49pm

What am I forgetting to do?


body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }

#triangle {
    display: block;
    padding: 0.5em;
    margin: auto;
    background-color: #20007d;
 }

#triangle path {
    stroke: #08f9ff;
    stroke-dasharray: 150;
    stroke-dashoffset: 1500;
    animation: flicker-1 2s linear 2s infinite both;
}



@keyframes flicker {
  0%,
  100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  47.99% {
    opacity: 1;
  }
  48% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  49.01% {
    opacity: 1;
  }
}

@keyframes flicker {
  100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  47.99% {
    opacity: 1;
  }
  48% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  49.01% {
    opacity: 1;
  }
}

@keyframes flicker {
  100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  47.99% {
    opacity: 1;
  }
  48% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  49.01% {
    opacity: 1;
  }
}

@keyframes flicker {
  0%,
  100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  47.99% {
    opacity: 1;
  }
  48% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  49.01% {
    opacity: 1;
  }
}

@keyframes flicker {
  0%,
  100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  47.99% {
    opacity: 1;
  }
  48% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  49.01% {
    opacity: 1
  }
}

PaulOB · October 13, 2018, 3:51pm

You haven’t used the right animation name.

animation: flicker 2s linear 2s infinite both;

Also why are you repeating the same keyframes over and over again? You only need one set.

asasass · October 13, 2018, 3:53pm

I would add this whole thing in:

   animation: flicker-1 2s linear 2s infinite both;
        animation-name: flicker-1;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-delay: 2s;
        animation-iteration-count: infinite;
        animation-direction: normal;
        animation-fill-mode: both;
        animation-play-state: running;
}

asasass · October 13, 2018, 3:59pm

How come it’s stated in here 6 times?
What does that mean?

asasass · October 13, 2018, 4:03pm

Would this get added also, because in the browser there’s a line through it?

-webkit-animation: flicker-1 2s linear 2s infinite both;

Idon’t need all of this, right?

 animation-name: flicker-1;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: both;
  animation-play-state: running;

All I need is this part?
animation: flicker-1 2s linear 2s infinite both;

that, and does this get added too?
-webkit-animation: flicker-1 2s linear 2s infinite both;

PaulOB · October 13, 2018, 4:08pm

You don;t really need prefixes (i.e. -webkit etc…) these days for animations.

All you need is the one set.

e.g.

#triangle path {
    stroke: #08f9ff;
    stroke-dasharray: 150;
    stroke-dashoffset: 1500;
    animation: flicker-1 2s linear 2s infinite both;
}

@keyframes flicker-1 {
  0%,
  100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  47.99% {
    opacity: 1;
  }
  48% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  49.01% {
    opacity: 1;
  }
}

asasass · October 13, 2018, 4:10pm

Which one does this fall under?

CSS Animation

Topic		Replies	Views
[AMA] Animating with CSS with CSSAnimation.rocks Creator Donovan Hutchinson HTML & CSS cssanimation , qa , ama	41	9351	February 10, 2017
Trying to replicate parts of this image using SVG Design & UX	44	5295	November 5, 2017
OnClick transition effects, and understanding the markup code HTML & CSS	129	23364	December 25, 2017
Chrome Issue with Line Height HTML & CSS	10	13344	June 4, 2014
Why isn't my animation running smoothly? HTML & CSS	7	981	March 16, 2019

Related topics