javascript - 以更好的方式使用 jquery 重复动画代码

Question

我正在尝试制作简单的动画线长反复变化。

这是我的代码

    $(document).ready(function(){
        var redline = $('.redline');
        setInterval(redmove,100)
    })
    function redmove(){
        var redline = $('.redline');
        redline.animate({'width':'500px'},2000)
        .animate({'width':'20px'},2000)
    }

    .redline{
    background: red;
    height: 10px;
    width: 20px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="redline"></div>

我的代码运行良好，没有问题，但是，我认为必须有更好的代码(也许更高效......等等)

所以，这是问题

1.如果这段代码不好，为什么？(从效率等 Angular 来看)

2.我想在这种情况下了解更好的代码。

谢谢!新年快乐!

Answer 1

看看这个

@keyframes changeWidth {
        0% {
            width: 20px;
        }
        50% {
            width: 500px;
        }
        100% {
            width: 20px;
        }
    }
    
 .redline {
     height: 50px;
     background-color:red;
     animation: 4s ease-out 0s infinite changeWidth;
 }

    <div class="redline"></div>