Вот решение с CSS-анимацией, которое также будет работать с браузерами Microsoft:
ользую изображение SVG в своем HTML и хочу, чтобы оно появилось. Пока здесь ничего сложного.
Но что мне нужно, так это то, что на изображении не везде одинаковое изображение. Я хочу, чтобы постепенный переход начинался сверху, затем следуйте по виртуальному кругу вокруг изображения, пока круг не завершится.
Чтобы возобновить что-то вроде перехода часов на точку питания (ссылка).
Я пытаюсь использовать радиальный градиент, какВот, Но я не нахожу никакого другого способа, кроме прогрессивного круга из центра или в центр. Кроме того, я использую фон, а изображение SVG имеет некоторую прозрачность, поэтому градиент не работает.
Вот код, который у меня есть на самом деле, я знаю, что он немного, но я не нахожу никакого направления, на которое я могу взглянуть, чтобы получить желаемый результат:
var isAnimProgressing = false;
$("#button1").click(function() {
var opa = "0";
if(!isAnimProgressing) {
isAnimProgressing = true;
if($(".test").css("opacity") == "1") {
opa = "0";
} else {
opa = "1";
}
$(".test").animate({opacity: opa}, 2000, "linear", function() {
isAnimProgressing = false;
});
}
});
$("#button2").click(function() {
if($(".test").hasClass("done")) {
$(".test").removeClass("done");
} else {
$(".test").addClass("done");
}
});body {
background-image : url(https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252__340.jpg);
}
.test {
opacity: 0;
transition: all 2s ease;
}
.test.done {
opacity: 1;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button id="button1">JS</button> OR
<button id="button2">CSS</button>
<div class="test loading">
<img src='https://s.cdpn.io/3/kiwi.svg' alt='loading-cat'>
</div>
</body>
</html>