css实现图标跳动动画

最新推荐文章于 2025-06-16 13:58:28 发布

原创最新推荐文章于 2025-06-16 13:58:28 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

博客记录了用CSS实现图标上下跳动动画的方法。代码中图标向上移动350px，同时逆时针旋转360度，还特别提醒移动translate要放在旋转rotate前面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录一个css实现图标上下跳动的动画

在这里插入图片描述

/*图片跳动的动画*/
 @keyframes move{
     from{
         transform: translateY(0) rotate(0);
     }
     to{
         transform: translateY(-350px) rotate(-360deg);
     }
 }

由代码可以看到向上移动了350px，移动的同时逆时针旋转360度！
需要注意的是：移动 translate 一定要放在旋转 rotate 的前面！

<img src="../assets/images/icon1.png"  class="warnIcon" alt=""  />


/*图标跳动的动画*/
        @keyframes move{
            from{
                transform: translateY(0) rotate(0);
            }
            to{
                transform: translateY(-350px) rotate(-360deg);
            }
        }
       .warnIcon {
          width: 5vw;
          height: 10vh;
          position: absolute;
          top: -3vh;
          left: -1vw;
          animation: move 1s infinite alternate; /*infinite无限循环，alternate动画反向执行回到起点*/
        }
        ```