Issue
I have a piece of code that is causing me some trouble.
For my "like" animation, I have a selector that checks whether my input field is "checked" or not. Everything works fine, BUT when the page is refreshed, the heart starts the animations due to the :checked and :not(:checked) selectors ( this is only logical).
My question is: how can I achieve these animations without this animation bug? Without using javascript.
I know the naming of my classes isn't great, i'm still learning
.fa-solid {
position: relative;
}
.fa-regular {
position: absolute;
}
.heart-icon,
.heart-icon-solid {
font-size: 100px;
}
.heart-icon-solid {
transform-origin: bottom;
transform: scale(0);
background: linear-gradient(0deg, #9356DC 0%, #FF79DA 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/*.like__container {
position: fixed;
top: 50%;
left: 50%;
}*/
.like__checkbox {
display: none;
}
.like__checkbox:not(:checked) + .like__container .heart-icon:hover {
animation: 1.5s ease 0s infinite beat;
}
.like__checkbox:checked + .like__container .heart-icon-solid {
animation: like 0.7s cubic-bezier(0.87, 0.01, 0.38, 1.01) forwards;
}
.like__checkbox:checked + .like__container .heart-icon {
animation: like--BG 1s ease forwards;
}
.like__checkbox:not(:checked) + .like__container .heart-icon-solid {
animation: unlike 0.5s ease forwards;
}
.like__checkbox:not(:checked) + .like__container .heart-icon {
animation: nounlike 1s ease forwards;
}
@keyframes beat {
0%, 50%, 100% {
transform: scale(1, 1);
}
30%, 80% {
transform: scale(0.82, 0.85);
}
}
@keyframes like {
0% {
opacity: 0;
transform: scale(0);
}
50% {
opacity: 1;
transform: scale(1.2);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes like--BG {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes unlike {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0);
}
}<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</head>
<input type="checkbox" id="like__input" class="like__checkbox">
<label for="like__input" class="like__container">
<i class="fa-regular fa-heart heart-icon card__content--heart"></i>
<i class="fa-solid fa-heart heart-icon-solid card__content--heart--filled"></i>
</label>
<!-- <input type="checkbox" id="likeCheckbox">
<label for="likeCheckbox" class=container>
<i class="fa-regular fa-heart heart-icon"></i>
<i class="fa-solid fa-heart heart-icon-solid"></i>
</label> -->Solution
The idea here relies on the assumption that you actually need the animations on click and hover only. Therefore I'm using :focus to catch clicks.
Note that you need tabindex on label to make it have :focus.
Also I changed order of some elements and CSS rules.
.fa-solid {
position: absolute;
}
.fa-regular {
position: relative;
}
.heart-icon,
.heart-icon-solid {
font-size: 100px;
}
.heart-icon-solid {
transform-origin: bottom;
transform: scale(0);
background: linear-gradient(0deg, #9356DC 0%, #FF79DA 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/*
.like__container {
position: fixed;
top: 50%;
left: 50%;
}
*/
.like__checkbox {
display: none;
}
.like__checkbox:not(:checked)+.like__container .heart-icon:hover, .like__checkbox:not(:checked)+.like__container:focus .heart-icon:hover
{
animation: 1.5s ease 0s infinite beat;
}
.like__checkbox:checked+.like__container:focus .heart-icon-solid {
animation: like 0.7s cubic-bezier(0.87, 0.01, 0.38, 1.01) forwards;
}
.like__checkbox:not(:checked)+.like__container:focus .heart-icon-solid {
animation: unlike .75s 50ms ease forwards;
}
.like__checkbox:checked+.like__container:focus .heart-icon {
animation: like--BG 1s ease forwards;
}
@keyframes beat {
0%,
50%,
100% {
transform: scale(1, 1);
}
30%,
80% {
transform: scale(0.82, 0.85);
}
}
@keyframes like {
0% {
opacity: 0;
transform: scale(0);
}
50% {
opacity: 1;
transform: scale(1.2);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes like--BG {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes unlike {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0);
}
}<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
</head>
<input type="checkbox" id="like__input" class="like__checkbox">
<label for="like__input" class="like__container" tabindex="0">
<i class="fa-solid fa-heart heart-icon-solid card__content--heart--filled"></i>
<i class="fa-regular fa-heart heart-icon card__content--heart"></i>
</label>Answered By - Kosh
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.