Linear gradient animation not smooth

Code Help HTML/CSS/JS
1

hey y’all i have a little issue. so i’ve been trying to make some background pulses for my game and i came across an issue. the graident pulses arent smooth. How can I fix this?
code:

.leftPlayerGradient, .rightPlayerGradient {
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(90deg, rgba(77,77,77,0) -100%, rgba(77,77,77,0) 100%);
    z-index: 1;
}

.leftAttack {
    animation: leftFlash 3s linear infinite;
}
.rightAttack {
    animation: rightFlash 3s infinite;
}

.leftBlockUp {
    animation: leftBlock 1s infinite;
}
.rightBlockUp {
    animation: rightBlock 1s infinite;
}

@keyframes leftFlash {
    0% {
        background-image: linear-gradient(90deg, rgba(0,255,0,0.5) -100%, rgba(77,77,77,0) 100%);
    }
    50% {
        background-image: linear-gradient(90deg, rgba(0,128,0,0.5) -100%, rgba(77,77,77,0) 100%);
    }
    100% {
        background-image: linear-gradient(90deg, rgba(77,77,77,0) -100%, rgba(77,77,77,0) 100%);
    }
}


@keyframes rightFlash {
    0% {
        background: linear-gradient(90deg, rgba(77,77,77,0) 0%, rgba(0,255,0,0.5) 200%);
    }
    100% {
        background: linear-gradient(90deg, rgba(77,77,77,0) 0%, rgba(77,77,77,0) 100%;
    }
}

@keyframes leftBlock {
    0% {
        background: linear-gradient(90deg, rgba(0,61,255,0.5) -100%, rgba(77,77,77,0) 100%);
    }
    100% {
        background: linear-gradient(90deg, rgba(0,99,255,0.5) -100%, rgba(77,77,77,0) 100%);
    }
}

@keyframes rightBlock {
    0% {
        background: linear-gradient(90deg, rgba(77,77,77,0) 0%, rgba(0,61,255,0.5) 200%);
    }
    100% {
        background: linear-gradient(90deg, rgba(77,77,77,0) 0%, rgba(0,99,255,0.5) 200%);
    }
}

html for overlayed gradients:

<div class="leftPlayerGradient"></div>
<div class="rightPlayerGradient"></div>
2

Ignore the spelling error in the css btw i have already fixed it.

3

Can I have a Repl link?

1 Like
4

Can we have the Repl link so that we can see all of your code files and be able to test the code?

It’s the link that is in the URL bar of your browser when you’re editing the Repl.

1 Like
5

It’s a private repl lol, and plus I already fixed the issue, i forgot to close this :sweat_smile:

1 Like
6

@EnZon3 how did you fix the issue? It would be helpful for people with a similar question in the future.

5 Likes
7

So basically background-image isn’t able to be animated so I had to split each animation into its own div and gradient. I basically used alpha to show the pulses instead of changing the colors. So now there are 4 divs instead of 2.

1 Like
8

Could we see the fixed code?

9

sure:

.leftPlayerGradient, .rightPlayerGradient {
	position: fixed;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(90deg, rgba(77,77,77,0) -100%, rgba(77,77,77,0) 100%);
	z-index: -1;
}

.leftAttack {
	background-image: linear-gradient(90deg, rgba(0,255,0,1) 0%, rgba(77,77,77,0) 100%) !important;
	animation: fadeOut 1s ease-out;
}
.rightAttack {
	background-image: linear-gradient(90deg, rgba(77,77,77,0) -100%, rgba(0,255,0,1) 100%) !important;
	animation: fadeOut 1s ease-out;
}

.leftBlock {
	background-image: linear-gradient(90deg, rgba(0,255,255,1) -150%, rgba(77,77,77,0) 100%) !important;
	animation: blockAnim 1s ease-out infinite;
}
.rightBlock {
	background-image: linear-gradient(90deg, rgba(77,77,77,0) -150%, rgba(0,255,255,1) 100%) !important;
	animation: blockAnim 1s ease-out infinite;
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes blockAnim {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.8;
	}
	100% {
		opacity: 1;
	}
}

<div class="leftPlayerGradient"></div>
<div class="leftPlayerGradient"></div>
<div class="rightPlayerGradient"></div>
<div class="rightPlayerGradient"></div>
2 Likes
10

Why use background-image and not just img? Can’t those be animated?

1 Like
11

Linear gradients are considered images so most likely, yes but it’s better practice to use background-image. And no, images can not be animated. Only their properties, for example size and rotation afaik.

Apart from the above considerations, If the image is part of the content such as a logo or diagram or person (real person, not stock photo people) then use the tag with alt attribute. For all other use cases, use background image.
- medium.com, see for important context

2 Likes
12

A helper function in JS would be needed to make the pulses on-demand.

1 Like
13

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.