怎样使用css动画animation实现静态箭头图片上下摆动

阿里小码

于 2021-05-20 10:33:33 发布

阅读量953

点赞数

分类专栏：标签文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_44668640/article/details/117065680

版权

标签专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用css动画animation实现静态箭头图片上下摆动

在项目中我遇到了一个需求，让静态箭头图片上下摆动，一开始我也想过使用transition，但是transition并不满足需求，因为transition是需要手动的触发，而且不能无限次执行下去，所以我用了animation。

要是求这样：
在这里插入图片描述
这里的图片是我用视频在线上工具转的，所以有水印（请谅解）

下面是示例：

<style>
    div{
        width: 200px;
        height: 200px;
    }
    img{
        margin: 50px auto;
        display: block;
        animation: example .8s infinite linear;
    }
    @keyframes example {
        0% {transform: translateY(0);}
        25% {transform: translateY(-10px);}
        50% {transform: translateY(0);}
        75% {transform: translateY(10px);}
        100% {transform: translateY(0);}
    }
</style>
<body>
    <div>
        <img src="./arrows.png" alt="">
    </div>
</body>

这样就可以完成所需的要求了，本来想备上上面转gif图片的视频，然后它不支持（苦笑）