איך לבצע אנימציה (Transition) על Gradients?

ב CSS לא ניתן לבצע אנימציה או שינוי חלק של Gradients בעזרת התכונה transition. במילים אחרות, ה transition הבא לא יעבוד:

.gradient {
  min-height: 200px;
  background-image: linear-gradient(
    to right,
    hsl(49.68, 97.89%, 62.75%),
    hsl(200, 51.54%, 44.51%)
  );
  transition: background-image 0.5s linear;
}

.gradient:hover {
  background-image: linear-gradient(
    to right,
    hsl(200, 51.54%, 44.51%),
    hsl(49.68, 97.89%, 62.75%)
  );
}

במקרה של הקוד מעלה, המעבר בין מצב אחד לשני לא יהיה חלק אלא יקפוץ מיידית בין שני המצבים. זה נראה כך:

ניתן לפתור זאת ולהגיע לאפקט הרצוי בעזרת psuedo elements יחד עם קביעת התכונה transform על השקיפות (opacity). דבר ראשון שיש לעשות הוא הוא לקבוע את ה gradient לאלמנט. לאחר מכן יש למקם את ה pseudo element כך שיתפוס את מלוא האלמנט ולקבוע את ה gradient השני לאלמנט זה.

בכדי לבצע את אותו מעבר, את אותו אפקט שאנו מחפשים בעצם ניתן כעת ליישם על ידי transition של ה opacity על אותו psuedo element וזה נעשה באופן הבא:

.gradient {
  position: relative;
  min-height: 200px;
  background-image: linear-gradient(
    to right,
    hsl(49.68, 97.89%, 62.75%),
    hsl(200, 51.54%, 44.51%)
  );
  z-index: 1;
}

.gradient::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(
    to right,
    hsl(200, 51.54%, 44.51%),
    hsl(49.68, 97.89%, 62.75%)
  );
  z-index: -1;
  transition: opacity 0.5s linear;
  opacity: 0;
}
.gradient:hover::before {
  opacity: 1;
}

אותו pseudo element חבוי בתחילה מפאת התכונה opacity: 0. במעבר עכבר (hover) אנו משנים את ה opacity ל 1 וזה מייצר לנו את האשליה בה ה gradient הראשי מבצע מעבר חלק ל gradient של ה pseudo element. עלינו גם להגדיר כראוי את ה z-index כך שה pseudo element תמיד יהיה בשכבה התחתונה, כלומר מתחת לאלמנט עצמו.

זה דורש לא מעט קוד, אך לצערינו זו הדרך האידיאלית לעשות זאת במידה ואנו מחפשים אפקט זה. על כל מקרה, התוצאה נראית כך:

את ההצללה של הטקסט עשיתי כמובן עם התכונה המגניבה text-shadow. הנה מספר דוגמאות להוספת הצללות עם text-shadow.

עד כאן.