P粉6052337642023-09-02 11:46:14
The background image does not animate smoothly in the way you want.
However, you can animate opacity smoothly, so one way to get the effect is to place two background images on top of each other and change their opacity so that they gradually change from one to the other.
In your case, you can put the background image on the before and after of the pseudo-element instead of on the element itself.
They have the same animation effect, but one starts in the middle (when opacity is 1).
It's hard to realize the blending effect when the total duration is only 1 second, so this code snippet increases the duration so you can see the effect.
Of course, you can change the timing as needed.
The changes are also linear so that the overlay always provides a "whole" image rather than a semi-transparent image.
<style>
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.pyramid {
width: 500px;
height: 500px;
clip-path: polygon(50% 50%, 0% 100%, 100% 100%);
position: relative;
}
.pyramid::before,
.pyramid::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
--duration: 10s; /* set the duration to whatever you want */
animation: change var(--duration) linear infinite forwards;
opacity: 0;
}
.pyramid::after {
animation-delay: calc(var(--duration) / -6);
}
@keyframes change {
0% {
background-image: conic-gradient(red 135deg, yellow 135deg, yellow 165deg, lightpink 165deg);
opacity: 0;
}
16.666% {
opacity: 1;
background-image: conic-gradient(red 135deg, yellow 135deg, yellow 165deg, lightpink 165deg);
}
32% {
opacity: 0;
background-image: conic-gradient(red 135deg, yellow 135deg, yellow 165deg, lightpink 165deg);
}
33.333% {
background-image: conic-gradient(red 135deg, #cadfca 135deg, #dddd3f 165deg, #aeae30 165deg);
opacity: 0;
}
50% {
opacity: 1;
background-image: conic-gradient(red 135deg, #cadfca 135deg, #dddd3f 165deg, #aeae30 165deg);
}
65% {
opacity: 0;
background-image: conic-gradient(red 135deg, #cadfca 135deg, #dddd3f 165deg, #aeae30 165deg);
}
66.666% {
opacity: 0;
background-image: conic-gradient(red 135deg, #565644 135deg, #838314 165deg, #a68f03 165deg)
}
83.333% {
opacity: 1;
background-image: conic-gradient(red 135deg, #565644 135deg, #838314 165deg, #a68f03 165deg)
}
99%,
100% {
opacity: 0;
background-image: conic-gradient(red 135deg, #565644 135deg, #838314 165deg, #a68f03 165deg)
}
}
@keyframes change2 {
0% {
background-image: conic-gradient(red 135deg, yellow 135deg, yellow 165deg, lightpink 165deg);
/*background: red;*/
}
0% {
background-image: conic-gradient(red 135deg, #cadfca 135deg, #dddd3f 165deg, #aeae30 165deg);
}
50% {
background-image: conic-gradient(red 135deg, #565644 135deg, #838314 165deg, #a68f03 165deg)
}
}
</style>
</head>
<body>
<div class="pyramid">
</div>
</body>