Как анимировано перекрасить div?

Question

Мне нужно из зеленого блока, сделать белый (скрыть), но есть условие, анимация должна идти из правого нижнего угла в левый верхний под углом 45deg

Answer 1

Можно, наверное, и без внутреннего блока обойтись, но тогда придётся возиться с размерами и переворачиванием псевдоэлемента под нужным углом, поэтому с двумя блоками проще:

.outer {
  width: 200px;
  height: 200px;
  overflow: hidden;
  background-color: green;
}
.inner {
  position: relative;
  border: 1px solid red;
  width: 300px;
  height: 300px;
  left: -50px;
  top: -50px;
  transform: rotate(-135deg);
}
.inner:before {
  content: '';
  display: block;
  width: 0;
  height: 100%;
  background-color: white;
  position: absolute;
  top: 0;
  left: 0;
  animation: move 5s linear forwards;
  animation-delay: 1s;
}
@keyframes move {
  0% {width: 0 }
  100% {width: 100%}
}

<div class="outer">
  <div class="inner"></div>
</div>

Answer 2

Обдумайте использование SVG градиента

Анимация начинается после клика, можно сделать и по :hover

.container {
width:30vw;
height:30vh;

}

<div class="container">
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 300 300" >  

 <defs>
<linearGradient id="bgg" x1="2" y1="2" x2="100%" y2="100%" gradientUnits="userSpaceOnUse"> 
  
    <stop offset="0" stop-color="green"/>
      <stop offset="1" stop-color="white">
        <animate 
            attributeName="offset" 
            values="1;0"
            begin="svg1.click" 
            dur="2s" 
            repeatCount="1"
            restart="whenNotActive"
            fill="freeze" />
     </stop>  
 </linearGradient>
</defs>
<rect x="2" y="2" width="50%" height="50%" rx="5%"  fill="url(#bgg)" />
</svg>
</div>

Answer 3

Приведу пример анимации с точно таким же эффектом, как в примере @Alexandr_TT.

SVG ⇒ CSS Сравним количество кода? :)

div {
  width: 180px; height: 180px;
  background: linear-gradient(130deg, green, white, white 100%); background-size: 200% 200%;
  animation: animate 3s linear forwards 0.5s;
}
@keyframes animate {100% {background-position: 95% 100%;}}

<div></div>

БЛОГ НА HUSL

Как анимировано перекрасить div?

Ответы (3 шт):