我有一段代码，它给我带来了一些麻烦.
对于我的"喜欢"动画，我有一个 Select 器，它判断我的输入字段是否"选中".一切正常，但是当页面刷新时，心脏会由于:checked和:not(:checked) Select 器而启动动画(这只是逻辑上的).
我的问题是:我如何才能在没有这个动画错误的情况下实现这些动画？而不使用Java脚本.
我知道我的班级命名不是很好，我还在学习
.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> -->