小编But*_*uri的帖子

我正在制作一个由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动画.(这对我来说是合乎逻辑的,但我不想要它)如果没有一些JavaScript类Jiggery …