Replicating 2 different flicker animations on an SVG

The first one that’s showing all green for support (apart from opera mini).

and 2 others with support of -webkit

I was not so much annoyed as delighted at your
choice of pandering to @asasass’s request. :cry:

coothead

1 Like

I think PaulOB was teasing you. :tape:

1 Like

Yes I did say exactly that :slight_smile:

I was not advocating their use merely showing how it could be achieved. I agree with you that flashing elements are blinking annoying :slight_smile:

2 Likes

You can always slow down the animations.

How?

Accessibility rules say that animation should last no longer than five seconds, or a method of hiding it or turning it off should be provided.

https://webaim.org/techniques/images/

The only animations I routinely see that last longer than 5 seconds are the “loading” images. And we all know how annoying those can be.

Off Topic

And what about the current fashion for background video?

WCAG 2.0 Success Criterion 2.2.2 (Level A) requires that automatically moving, blinking, or scrolling content that lasts longer than 5 seconds can be paused, stopped, or hidden by the user.

I don’t think this is that bad.

It looks like a “loading” to me. If it is it should stop after everything has loaded. If it is to draw attention to itself I think it would be a poor idea to have it not stop. I imagine many would interpret it as meaning “not ready” and not think to try it. So again, it should stop at some point.

I could turn that into a gif image and it would be the same thing, right?

It might look the same, but there would still be the same issue. You would need a temporarily displayed animated gif that got replaced with a similar looking non-animated version.

Hi there asasass,

to control the animation duration, change this code in post #5

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

…to this…

#triangle path {
    stroke: #08f9ff;
    stroke-dasharray: 150;
    stroke-dashoffset: 1500;
    animation: draw  20s   linear; 
    animation-iteration-count: 1;
}
  1. animation-iteration-count: 1; will stop the animation at 20s.
  2. animation-iteration-count: 2; will stop the animation at 40s.
  3. animation-iteration-count: 0.5; will stop the animation at 10s.
  4. animation-iteration-count: 0.1; will stop the animation at 2s.

If preferred shorthand can be used, thus

#triangle path {
    stroke: #08f9ff;
    stroke-dasharray: 150;
    stroke-dashoffset: 1500;
    animation: draw 20s 0.5 linear; /* iteration duration 10s */
}

coothead

2 Likes

On here it goes from a line, stays in line, then adds a flicker to the line.

How is that done?

Combining them like this doesn’t work:

.coversvg path {
  stroke: #08f9ff;
  stroke-dasharray: 150;
  stroke-dashoffset: 1500;

  animation: draw 20s infinite linear;
  
  animation: flicker-1 2s linear 2s infinite both;
}

What colour would this be?

.test{
color:red;
color:blue;
}

The second rule replaces the first.

You need to comma separate your animations.

e.g.

animation: draw 20s infinite linear, flicker-1 2s linear 2s infinite both;

1 Like

I’m not sure what you meant by red, or blue.

Was I supposed to do something with this?

.test{
color:red;
color:blue;
}

Yes it was an example for you to look at it and decide what colour the element will be and why? Once you understand why you will see why your original code made no sense.:slight_smile:

Its the most basic question of how css works.

In case its still not clear look at this pseudo code.

.test{
animation:  I could be anything but I will do nothing;
animation: Previous rule is ignored because this replaces it;
}
2 Likes

It would be blue because it’s the second color.

The front value is always the one that gets added.

.test{
color:red;
color:blue;
}

I’m just not used to putting animations together.
Something different.

If you find the shorthand syntax a bit confusing (I know I do) you might do better writing out the individual properties until you better understand what each do?

4 Likes