I use an svg picture in my HTML and I want to make it fade in. Until here nothing hard.
But what I need is that the fade-in is not equal everywhere on the image. I want a progressive fade-in start from the top, next follow a virtual circle around the picture until the circle is complete.
To resume something like the clock transition on power point (link).
I try to use radial gradient like here. But I don' t find any way to do other than a progressive circle from the center or to the center. Also, I use a background and the svg image have some transparency so gradient don' t work.
Here is the code I have actually I know it's not much but I don't find any direction I can look at to get the result I want :
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>
