Color change smootly to a shape

HTML-CSS
1

Hello.I dont know why i can’t get the colors on the pyramid to change in a smoother non-interupting way .I added even 25% and 75% in the keyfreames and chaged colors and values…but still the same …help …And how i can make my "Pyramid " title to be on top of page ,not moving anymore with the pyramid itself?

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="styles.css">
<div class="pyramid-body">
	<header>Pyramid</header>
	<div class="pyramid">
		<div style="--i:0;" class="pyramid-side"></div>
		<div style="--i:1;" class="pyramid-side"></div>
		<div style="--i:2;" class="pyramid-side"></div>
		<div style="--i:3;" class="pyramid-side"></div>
	</div>
</div>

</html>

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #18b7df;
}
header {
    position: absolute;
    top: 5%;
    left: 50%;

    margin-top: 5px; /* adjust this value to match the height of your header */
  }
.pyramid-body{
    position: relative;
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(30deg);
    animation: rotate 8s linear infinite;
}
.pyramid{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}
.pyramid-side{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(204, 29, 160);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
transform-origin: bottom;
transform: rotateY(calc(90deg*var(--i))) translateZ(149.7px) rotateX(30deg);
}
.pyramid-side:nth-child(even){
    background:linear-gradient(#9400d3, rgb(18, 7, 121));
    animation: sideeven 5s linear infinite ;
}
.pyramid-side:nth-child(odd){
    background:linear-gradient( #9400d3, rgb(18, 7, 121));
    animation: sideodd  5s  linear infinite ;
}
@keyframes rotate{
    0%{
        transform: rotateX(-20deg) rotateY(30deg);
    }
    100%{
        transform: rotateX(-20deg) rotateY(390deg);
    }
}
@keyframes sideeven{
    0%{
        background:linear-gradient( #9400d3, rgb(18, 7, 121));
    }
  50%{
    background:linear-gradient(rgb(9, 154, 221),rgb(0, 0, 255));
  }
  100%{
        background:linear-gradient(rgb(230, 75, 152), rgb(175, 12, 12));
    }
}
@keyframes sideodd{
    0%{
        background:linear-gradient( #9400d3, rgb(18, 7, 121));
    }
    50%{
        background:linear-gradient(rgb(9, 154, 221),rgb(0, 0, 255) );
      }
  100%{
        background:linear-gradient( rgb(230, 75, 152), rgb(175, 12, 12));
    }
}
2

Well, to stop the title from moving you need to take it out of the pyramid-body DIV because you have that DIV animated. As far as smooth color changes… a linear gradient technically isn’t a color… its actually an instantly rendered background image. Being an image, there is no smooth animation from one image to another using standard CSS animations that I know of. I believe you’d have to get tricky with layered images, blending and changing opacities and stuff to try to work on the effect you want.

Playing with your code and getting rid of all the gradients offered some interestingly pretty results.

1 Like
3

I figured it out with the title in the end. now i understood that to have smooth color change i should have only normal color ,not gradient as i did in the first place.i’ll try in my next exercise i do to keep these in mind.Thank you for help .Being at the start at this its pretty challenging but i like it .i just need to find motivation to work more .