仅运行一次CSS3动画（在页面加载时）

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在制作一个由CSS3驱动的简单目标网页。为了使它看起来很棒，有一个<a>隆重的表演：

@keyframes splash {
    from {
        opacity: 0;
        transform: scale(0, 0);
    }
    50% {
        opacity: 1;
        transform: scale(1.1, 1.1);
    }
    to {
        transform: scale(1, 1);
    }
}

为了使它更加出色，我添加了一个悬停动画：

@keyframes hover {
    from {
        transform: scale(1, 1);
    }
    to {
        transform: scale(1.1, 1.1);
    }
}

但是问题来了！我分配了这样的动画：

a {
    /* Some basic styling here */
    animation: splash 1s normal forwards ease-in-out;
}
a:hover {
    animation: hover 1s infinite alternate ease-in-out;
}

一切都很好：<a>飞溅到用户脸上，当他徘徊时有很好的振动。用户模糊后，立即<a>填充，平滑内容突然结束并<a>重复splash-animation。（这对我来说是合乎逻辑的，但我不希望这样做）没有某种JavaScript类Jiggery

Pokery，有什么方法可以解决此问题？

回答：

经过数小时的谷歌搜索：不，没有JavaScript是不可能的。该animation-iteration-count:

1;内部保存在animationshothand属性，它被 重置了和覆盖

上:hover。当我们模糊化<a>并释放:hover旧类时，旧类将 重新应用 ，因此再次 重置 该animation属性。

可悲的是，没有办法在元素状态之间保存某些属性状态。

您必须使用JavaScript。

以上是 仅运行一次CSS3动画（在页面加载时） 的全部内容， 来源链接： utcz.com/qa/431374.html

回到顶部