3

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

3 ответа 3

2

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

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

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>

2

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

.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>

2
  • Спасибо, я думал это как то решается с linear-gradient 12 мар 2021 в 13:18
  • @DmitriyMedvedkin, наверное, можно как-то с градиентом сделать ) 12 мар 2021 в 13:24
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>

6
  • спасибо, как всегда лучший) 12 мар 2021 в 14:35
  • @DmitriyMedvedkin Честно говоря, я так не считаю. Вот например мне не достичь мастерства в CSS @UModeL Поэтому тут зависит от предпочтений принимающего, кому-то SVG, кому-то CSS решения больше нравится. Кстати, как у вас с проектом анимаций на работе, по которому в декабре вопрос задавали 12 мар 2021 в 14:41
  • 1
    пока она на сайте в gif формате) но это сугубо для сроков, но вот начиная с этого проекта я решил делать анимацию руками, закончу этот, дадут уже время на анимацию предыдущего) 12 мар 2021 в 14:51
  • 1
    @ Alexandr_TT без обид, но ответ @Sevastopol' мне подошел больше, мне пока на css комфортнее, но другой вариант заставил погуглить) интересно, спасибо вам 12 мар 2021 в 17:03
  • 1
    @DmitriyMedvedkin не переживайте, всё нормально, по прошлому вопросу я понял, что вы творческий, ищущий человек, а таким людям я с удовольствием отвечаю, и делюсь своим опытом. 12 мар 2021 в 17:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.