Как показать элемент svg с затуханием?

У меня есть элемент svg. Как я могу показать это постепенно (как анимацию) слева направо?

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
0
744
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете использовать CSS @keyframes.

@keyframes stretchInFromLeft {
  0% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}


img {
  max-width: 100%;
  width: 100%;
}

.wrapper {
  position: relative;
}

.overlay {
  animation: 1s ease-out 0s 1 stretchInFromLeft;
  position: absolute;
  top: 0;
  right: 0;
  
  background: #fff;
  width: 0;
  height: 100%;
}
<div class = "wrapper">
  <img src = "https://i.stack.imgur.com/dta2g.jpg" />
  <div class = "overlay"></div>
</div>

Рабочий пример: https://jsfiddle.net/r034wcgp/1/

Источник: анимация перехода css3 при загрузке?

хорошо. У меня есть еще один вопрос. как я могу запустить анимацию с самого начала? начинается не с начальной точки

Mario Kit 23.12.2020 00:41

Вы можете анимировать SVG clipPath с помощью jQuery animate() вот так:

$("#cut-off-bottom rect").animate({width: "100%", duration:4000})
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 1440 320">

<clipPath id = "cut-off-bottom">
  <rect x = "0" y = "0" width = "0" height = "320" />
</clipPath>

<path fill = "#0099ff" fill-opacity = "1" clip-path = "url(#cut-off-bottom)" d = "M0,32L48,32C96,32,192,32,288,58.7C384,85,480,139,576,154.7C672,171,768,149,864,165.3C960,181,1056,235,1152,240C1248,245,1344,203,1392,181.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>

Другие вопросы по теме