그라디언트는 아직 전환을 지원하지 않습니다(현재 사양에서는 보간을 통해 그라데이션과 유사한 전환을 지원해야 한다고 나와 있지만).
배경 그라데이션으로 페이드인 효과를 원하는 경우 컨테이너 요소에 불투명도를 설정하고 불투명도를 "전환"해야 합니다.
(그라디언트 전환을 지원하는 일부 브라우저 버전이 이미 있습니다(예: IE10. 2016년에 IE에서 그라데이션 전환을 테스트했는데 당시에는 작동하는 것처럼 보였지만 내 테스트 코드는 더 이상 작동하지 않습니다.)
업데이트 날짜: 2018년 10월
접두사[예: Radial-gradient(...)]가 없는 새로운 구문을 사용한 그라데이션 전환이 이제 Microsoft Edge 17.17134에서 작동하는 것으로 확인되었습니다. 언제 추가됐는지 모르겠네요. 최신 Firefox 및 Chrome/Windows 10에서는 여전히 작동하지 않습니다.
업데이트 날짜: 2021년 12월
@property 해결 방법은 이제 최신 Chromium 기반 브라우저에서 작동하지만 Firefox에서는 작동하지 않습니다. 아래(또는 위의 YMMV) @mahozad의 답변 을 확인하고 투표하세요.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
한 가지 해결책은 배경 위치를 변환하여 그라데이션 변경 효과를 만드는 것입니다. http://sapphion.com/2011/10/css3-그라디언트 전환 및 배경 위치/
그라디언트는 아직 전환을 지원하지 않습니다(현재 사양에서는 보간을 통해 그라데이션과 유사한 전환을 지원해야 한다고 나와 있지만).
배경 그라데이션으로 페이드인 효과를 원하는 경우 컨테이너 요소에 불투명도를 설정하고 불투명도를 "전환"해야 합니다.
(그라디언트 전환을 지원하는 일부 브라우저 버전이 이미 있습니다(예: IE10. 2016년에 IE에서 그라데이션 전환을 테스트했는데 당시에는 작동하는 것처럼 보였지만 내 테스트 코드는 더 이상 작동하지 않습니다.)
업데이트 날짜: 2018년 10월 접두사[예: Radial-gradient(...)]가 없는 새로운 구문을 사용한 그라데이션 전환이 이제 Microsoft Edge 17.17134에서 작동하는 것으로 확인되었습니다. 언제 추가됐는지 모르겠네요. 최신 Firefox 및 Chrome/Windows 10에서는 여전히 작동하지 않습니다.
업데이트 날짜: 2021년 12월 @property 해결 방법은 이제 최신 Chromium 기반 브라우저에서 작동하지만 Firefox에서는 작동하지 않습니다. 아래(또는 위의 YMMV) @mahozad의 답변 을 확인하고 투표하세요.