先定义@keyframes动画并结合:hover伪类触发动画。例如创建hoverScale缩放动画，设置.animated-box基础样式，再通过:hover调用animation: hoverScale 0.3s ease-in-out forwards实现悬停动效，添加forwards确保状态保留，还可通过animation-direction实现进出均有动画的交互效果。
要实现CSS动画元素在悬停（hover）时触发动画效果，可以通过将 @keyframes 定义的动画与 :hover 伪类结合使用。这种方式无需JavaScript，仅用纯CSS即可完成流畅的交互式动画。
1. 定义关键帧动画（@keyframes）
先使用 @keyframes 创建一个命名动画，指定动画过程中元素样式的变化。例如，让元素缩放并改变背景色：
@keyframes hoverScale { from { transform: scale(1); background-color: #3498db; } to { transform: scale(1.2); background-color: #e74c3c; }}
2. 设置基础元素样式
为元素设置基本样式，并定义过渡属性或初始动画状态。这里我们不预先播放动画，而是等待悬停触发：
.animated-box { width: 100px; height: 100px; background-color: #3498db; margin: 50px auto; cursor: pointer;}
3. 在 :hover 中触发动画
当鼠标悬停时，通过 animation 属性调用之前定义的动画。可以设置动画时长、缓动函数和是否循环等参数：
立即学习“前端免费学习笔记（深入）”；
Rose.ai
一个云数据平台，帮助用户发现、可视化数据
74 查看详情 .animated-box:hover { animation: hoverScale 0.3s ease-in-out forwards;}
说明：
hoverScale：对应 @keyframes 的名称 0.3s：动画持续时间 ease-in-out：速度曲线，开始和结束较慢 forwards：动画结束后保持最后一帧的样式
4. 可选：反向动画（离开时也动画）
如果希望鼠标移出时也有动画效果，可以给原始状态也加上动画，并利用 animation-direction: reverse 实现平滑回退：
.animated-box { animation: hoverScale 0.3s ease-in-out reverse forwards;}.animated-box:hover { animation-direction: normal;}
这样，进入和离开都会产生渐进式动画效果，提升用户体验。
基本上就这些。利用CSS的 @keyframes 和 :hover 配合 animation 属性，就能轻松实现丰富的悬停动画效果，比如旋转、位移、颜色渐变等，只需修改关键帧内容即可扩展更多样式。不复杂但容易忽略细节，比如 forwards 保留最终状态很关键。
以上就是CSS动画元素悬停效果如何实现_利用CSS animation在hover伪类触发元素动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/953144.html
微信扫一扫 
支付宝扫一扫 
