점점 가늘어지는 그라디언트 애니메이션의 부드러운 색상 전환을 달성하는 방법은 무엇입니까?

Question

테이퍼형 그라디언트에 애니메이션을 적용하고 있는데 색상 변경이 충분히 부드럽지 않습니다. 다양한 글을 봤는데 제대로 재현이 안되네요 내 코드는 여기에서 찾을 수 있습니다:

<style>

        몸{
            최소 높이: 100vh;
            디스플레이: 플렉스;
            항목 정렬: 중앙;
            내용 정당화: 센터;
        }
        .피라미드 {
          너비: 500px;
          높이: 500px;
          배경 이미지: 원뿔형 그라데이션(빨간색 135deg, 녹색 135deg, 노란색 165deg, 노란색 165deg);
            클립 경로: 다각형(50% 50%, 0% 100%, 100% 100%);
            애니메이션: 1초 완화 무한 변경;
        }
        .피라미드:호버{
            배경 이미지: 원뿔형 그라데이션(빨간색 135deg, #cadfca 135deg,#dddd3f 165deg, #aeae30 165deg);
        }
        @키프레임 변경{
            0%{
            배경 이미지: 원뿔형 그라데이션(빨간색 135deg, 노란색 135deg, 노란색 165deg, 밝은 분홍색 165deg);
            /*배경: 빨간색;*/

            }
            50%{
                배경 이미지: 원뿔형 그라데이션(빨간색 135deg, #cadfca 135deg,#dddd3f 165deg, #aeae30 165deg);
            }
            100%{
            배경 이미지: 원뿔형 그라데이션(빨간색 135deg, #565644 135deg, #838314 165deg, #a68f03 165deg)
          }
        }

    </스타일>
</머리>
<본문>
<div class="피라미드">
</div>
</body>

변경을 더 원활하게 만드는 방법

Answer 1

배경 이미지가 원하는 방식으로 원활하게 애니메이션되지 않습니다.

그러나 불투명도를 부드럽게 애니메이션화할 수 있으므로 효과를 얻는 한 가지 방법은 두 개의 배경 이미지를 서로 위에 배치하고 불투명도를 변경하여 점차적으로 하나씩 변경하는 것입니다.

귀하의 경우에는 요소 자체가 아닌 의사 요소의 전후에 배경 이미지를 넣을 수 있습니다.

동일한 애니메이션이 있지만 하나는 중간에서 시작됩니다(불투명도가 1인 경우).

전체 지속시간이 1초밖에 되지 않으면 블렌딩 효과를 구현하기 어렵기 때문에 이 코드에서는 지속시간을 늘려 효과를 확인할 수 있습니다.

물론 필요에 따라 타이밍을 변경할 수 있습니다.

오버레이가 항상 반투명 이미지가 아닌 "전체" 이미지를 제공하도록 변경 사항도 선형입니다.

으아악