可以通过以下步骤实现:
@keyframes hoverEffect {
0% {
/* 初始状态 */
transform: scale(1);
}
50% {
/* 中间状态 */
transform: scale(1.2);
}
100% {
/* 结束状态 */
transform: scale(1);
}
}
.hover-animation:hover {
animation-name: hoverEffect;
animation-duration: 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
在上述代码中,animation-name属性指定了使用的动画序列名称,animation-duration属性设置动画持续时间为1秒,animation-delay属性设置延迟时间为1秒,animation-fill-mode属性设置动画结束后保持最后一帧的状态。
这样,当鼠标悬停在项目上时,将触发动画效果,并在1秒后开始播放动画序列。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云内容分发网络(CDN)。
领取专属 10元无门槛券
手把手带您无忧上云