.animateを使用してCSSシェイプを移動する

Question

私はcss、jquery、およびhtmlを使用して学校用のグラフィカルプレゼンテーションを作成しようとしています。画面全体を移動するには四角形が必要です。私はいくつかの調査を行いましたが、animate関数のいくつかのバリエーションを使用しようとしましたが、ウィンドウの左側にしか機能しません。

は、ここに参照のために私のコードです：

var derp = 20; 
 
function scroll() { 
 
    var scrollLeft = Math.floor(Math.random() * 100); 
 
    $('#rectangle').animate({ 
 
    left: scrollLeft "px", 
 
    }, derp, function() { 
 
    scroll(); 
 
    }); 
 
} 
 

 
setInterval(100, scroll());

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 

 
body { 
 
    background-image: url("background.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-position: right top; 
 
    background-size: cover; 
 
} 
 

 
.rectangle { 
 
    width: 20px; 
 
    height: 100%; 
 
    background: black; 
 
} 
 

 
#rectangle { 
 
    left: 10px; 
 
    position: absolute; 
 
} 
 

 
img, 
 
div, 
 
p, 
 
body { 
 
    margin: 0px; 
 
    padding 0px; 
 
}

<div class="rectangle"></div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Answer 1

あなただけCSSでこれを行うことができます。

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    position: relative; 
 
    animation: anim 3s forwards alternate; 
 
    animation-iteration-count: 6; 
 
} 
 

 
@keyframes anim { 
 
    from { 
 
    left: 0px; 
 
    } 
 
    to { 
 
    left: 200px 
 
    } 
 
}

<div></div>