I just came through a GitHub repo, which has an amazing animation for Button
in Android.
So, I thought why not make that for web buttons too.
And I started designed that.
Here is my repo for the same.
Here is my code:
let icons = $('.magic')
for (let i = 0; i < icons.length; ++i) {
icons[i].onclick = function (element) {
icons[i].classList.toggle('enabled');
}
}
.magic {
display: inline-block;
margin: 50px;
position: relative;
}
.magic i {
color: orange;
filter: grayscale(100%);
position: relative;
animation: disable 0.5s forwards;
}
.enabled i {
animation: enable 1s forwards;
}
.magic::before {
content: "";
top:calc(50% - 45px);
left:calc(50% - 45px);
width: 90px;
height: 90px;
position: absolute;
border-color: orange;
border-style: solid;
border-width: 45px;
border-radius: 50%;
transform: scale(0);
box-sizing: border-box;
}
.enabled::before {
transition:
transform 0.5s,
border-width 0.5s 0.2s;
transform: scale(1);
border-width: 0px;
}
.magic::after,
.magic i::after {
content: "";
position: absolute;
top: calc(50% - 80px);
left: calc(50% - 80px);
height: 160px;
width: 160px;
background:
radial-gradient(circle, red 50%, transparent 60%),
radial-gradient(circle, red 50%, transparent 60%),
radial-gradient(circle, red 50%, transparent 60%),
radial-gradient(circle, red 50%, transparent 60%),
radial-gradient(circle, orange 50%, transparent 60%),
radial-gradient(circle, orange 50%, transparent 60%),
radial-gradient(circle, orange 50%, transparent 60%),
radial-gradient(circle, orange 50%, transparent 60%);
background-position:
calc(50% - 50px) calc(50% - 50px),
calc(50% - 50px) calc(50% + 50px),
calc(50% + 50px) calc(50% - 50px),
calc(50% + 50px) calc(50% + 50px),
calc(50% - 0px) calc(50% - 70px),
calc(50% - 70px) calc(50% - 0px),
calc(50% - 0px) calc(50% + 70px),
calc(50% + 70px) calc(50% - 0px);
background-size: 16px 16px;
background-repeat: no-repeat;
border-radius:50%;
transform: scale(0);
}
.magic i:after {
background-size: 10px 10px;
transform: rotate(10deg) scale(0);
}
.enabled::after {
transition:
transform 0.5s 0.5s,
opacity 0.4s 1s,
background-size 0.4s 1s;
transform: scale(1);
opacity: 0;
background-size: 0 0;
}
.enabled i:after {
transition:
transform 0.5s 0.5s,
opacity 0.4s 0.8s,
background-size 0.4s 0.8s;
transform: rotate(10deg) scale(1);
opacity: 0;
background-size: 0 0;
}
@keyframes enable {
50% {
filter: grayscale(100%);
transform: scale(0);
}
51% {
filter: grayscale(0%)
}
90% {
transform: scale(1.3)
}
100% {
filter: grayscale(0%);
transform: scale(1);
}
}
@keyframes disable {
50% {
filter: grayscale(0%);
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
<span class="magic">
<i class="fas fa-star fa-5x"></i>
</span>
<span class="magic">
<i class="fas fa-bell fa-5x"></i>
</span>
<span class="magic">
<i class="fas fa-bolt fa-5x"></i>
</span>
<span class="magic">
<i class="fas fa-check fa-5x"></i>
</span>
<span class="magic">
<i class="fas fa-thumbs-up fa-5x"></i>
</span>
<!-- Other stuff -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
What do you reckon? Is there anything I can improve either in the animation or in the code?