SCSS动画Bug：页面刷新时心形因:checked和:not(:checked)触发动画

问题描述 #

我用CSS的:checked和:not(:checked)选择器实现了点赞心形的动画效果，功能正常，但页面刷新时，心形会因为这两个选择器自动触发动画。现在想找无需JavaScript的解决方案。另外我知道自己类命名不够规范，还在学习中。

原代码 #

CSS #

.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);
  }
}

HTML #

<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>

解决方案 #

问题根源是页面加载时，:not(:checked)的初始状态会触发绑定的动画，导致心形自动播放动画。我们可以用CSS过渡（transition）替代部分关键帧动画，因为过渡仅在属性值发生变化时触发，初始加载时不会执行，完美解决刷新触发的问题：

修改后的CSS代码 #

.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);
  opacity: 0;
  background: linear-gradient(0deg, #9356DC 0%, #FF79DA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 用过渡模拟原like动画的曲线效果 */
  transition: transform 0.7s cubic-bezier(0.87, 0.01, 0.38, 1.01), opacity 0.7s cubic-bezier(0.87, 0.01, 0.38, 1.01);
}

.heart-icon {
  opacity: 1;
  /* 用过渡模拟原like--BG动画的淡出效果 */
  transition: opacity 1s ease;
}

.like__checkbox {
  display: none;
}

/* 保留hover时的心跳动画 */
.like__checkbox:not(:checked) + .like__container .heart-icon:hover {
  animation: 1.5s ease 0s infinite beat;
}

/* 选中状态：触发过渡显示实心心形，隐藏空心心形 */
.like__checkbox:checked + .like__container .heart-icon-solid {
  transform: scale(1);
  opacity: 1;
}

.like__checkbox:checked + .like__container .heart-icon {
  opacity: 0;
}

@keyframes beat {
  0%, 50%, 100% {
    transform: scale(1, 1);
  }
  30%, 80% {
    transform: scale(0.82, 0.85);
  }
}

说明 #

1. 移除了:not(:checked)状态下的unlike和nounlike动画，初始状态直接通过CSS属性设置，避免页面加载时触发动画。
2. 给心形元素添加transition属性，当复选框状态变化时，属性值改变触发过渡，实现原动画的平滑效果。
3. 保留了hover时的心跳动画，不影响原有交互体验。

内容的提问来源于stack exchange，提问作者MoonstruckDev