纯CSS实现点击href链接触发展入动画的问题求解

方案1：保留@keyframes实现，仅点击ccc时触发动画 #

问题根源 #

你当前将animation属性直接绑定在.c .grid-box选择器上，页面加载完成后只要该元素存在，动画就会自动执行，和用户是否点击ccc菜单没有关联。

修改方法 #

1. 删掉原有.c .grid-box代码块中的animation: fadein 1s ease-out normal backwards;属性
2. 新增如下选择器，仅当锚点#C被触发（即点击ccc菜单）时，才给grid-box挂载动画：

a#C:target ~ main .c .grid-box {
    animation: fadein 1s ease-out normal backwards;
}

修改后刷新页面不会自动触发动画，只有每次点击ccc菜单切换到对应区块时，才会执行入场动画。

方案2：无需@keyframes，纯transition实现同等效果 #

transition本身支持通过自定义贝塞尔曲线实现弹性回弹效果，可以完全替代你当前的@keyframes逻辑，修改步骤如下：

1. 删掉原有@keyframes fadein代码块，以及所有animation、animation-delay相关属性
2. 替换.c .grid-box和对应子元素的配置：

.c .grid-box{
    background: #ff6e48;
    /* 用cubic-bezier实现scale到1后小幅回弹的效果，替代@keyframes */
    transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1), all 250ms;
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    /* 初始状态设为缩放到0 */
    transform: scale(0);
}
/* 点击ccc菜单触发锚点时，修改元素状态触发过渡 */
a#C:target ~ main .c .grid-box {
    transform: scale(1);
}
/* 用transition-delay替代原有的animation-delay，保留错开入场的效果 */
.c .element1{
    grid-area: box1;
    transition-delay: 0;
}
.c .element2{
    grid-area: box2;
    transition-delay: 100ms;
}
.c .element3{
    grid-area: box3;
    transition-delay: 200ms;
}
.c .element4{
    grid-area: box4;
    transition-delay: 300ms;
}
.c .element5{
    grid-area: box5;
    transition-delay: 400ms;
}

该方案完全不需要使用@keyframes，效果和原有动画基本一致，且同样满足仅点击ccc时触发的需求。

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