javascript - 我正在尝试通过显示进度条定期更改图像？

Question

我正在尝试定期更改图像。首先它显示一些正在运行的进度条，当进度条完成时，图像将被更改并且它会一次又一次地继续。我通过 css 动画和 javascript 实现这一点。我的问题如果我控制台.log() 如果我删除 console.log() 动画只播放一次，动画就可以工作。

let circle = $('.round');
let avatars = $('.avatars');
let i = 1;
let imageArray = [
    'https://i.stack.imgur.com/Pyxho.jpg',
    'https://i.stack.imgur.com/Pyxho.jpg',
    'https://i.stack.imgur.com/Pyxho.jpg'
];

circle.on('animationend',function(){
    $(this).css('animation','none');
    console.log($(this).css('animation'));
    avatars.attr('src',imageArray[i]);
    $(this).css('animation','fill 5s linear 2s');
    console.log($(this).css('animation'));
    if(i < imageArray.length){ 
        i++; 
    }else{ 
        i=0; 
    } 
});

#home .container svg{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
#home .container svg .round{
    stroke-dasharray: 534;
    stroke-dashoffset: 534;
    animation: fill 5s linear 2s;
}
#home .container .img{
    width: 170px;
    height:170px;
    margin: 0 auto;
}
#home .container img{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="home">
    <div class="container">
        <svg width='172' height='172'>
            <circle class='round' r='85' cx='86' cy='86' stroke-width='2' stroke='white' fill='none' />
        </svg>
        <div class="img">
            <img class='avatars' src="https://i.stack.imgur.com/Pyxho.jpg" alt="Logo">
        </div>
        <h1>Bla Bla</h1>
        <span id='typed'></span>
    </div>
</section>

标签： javascripthtmlcss