繰り返し無限に移動（スライド）するアニメーションを設定したい

[appletea]

——————————————-
WordPress のバージョン：WordPress 5.1.1
Welcart のバージョン：Version 1.9.17.190305
ご利用のテーマ：Welcart Basic
症状を確認したブラウザ：IE11
サーバー（会社名、サービス名）：ロリポップ
——————————————–

1518pxの幅で写真3枚を繰り返し無限に移動（スライド）するアニメーションを設定したいのです。
写真の横幅は200pxが良いです。
以下のどこを変更したらよいのでしょうか。
よろしくお願いいたします。

<!– wp:html –>
 

<style>
#wrapper {
padding: 50px 0;
background: #fff;
text-align: center; }

h2 + div {
margin-bottom: 80px;
}

.loop_css2 {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
width: 100vw;
left: 50%;
margin-left: -50vw;
overflow: hidden;
}

.loop_css2 ul {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
width: 100%;
margin: 0;
padding: 0;
}

.loop_css2 li {
display: inline-block;
width: calc(100vw / 4);
margin: 0 20px 0 0;
list-style: none;
text-align: center;
}

.loop_css2 li a {
display: block;
}

.loop_css2 li img {
display: block;
width: 100%;
height: auto;
}

.loop_css2 li a:hover {
opacity: .7;
}

.loop_css2 ul:first-child {
-webkit-animation: loop 50s -25s linear infinite;
animation: loop 50s -25s linear infinite;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: transform;
}

.loop_css2 ul + ul {
-webkit-animation: loop2 50s linear infinite;
animation: loop2 50s linear infinite;
}

.loop_css2:hover ul {
animation-play-state: paused;
}

@-webkit-keyframes loop {
0% {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
to {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
}

@keyframes loop {
0% {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
to {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
}

@-webkit-keyframes loop2 {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
to {
-webkit-transform: translateX(-200%);
-ms-transform: translateX(-200%);
transform: translateX(-200%);
}
}

@keyframes loop2 {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
to {
-webkit-transform: translateX(-200%);
-ms-transform: translateX(-200%);
transform: translateX(-200%);
}
}

</style>

• 
• 
• 

• 
• 
• 

<!– ///wrapper –><!– script –>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js”></script> <script defer src=”TweenMax.min.js”></script> <script>
$(function () {
var loop = document.getElementById(‘loop_js’),
loopAnim = new TimelineMax({
repeat: -1
}),
loopItem = (window.innerWidth, loop.children[0]);

loop.appendChild(loopItem.cloneNode(true)), loop.appendChild(loopItem.cloneNode(true)),
loopAnim.to(loop, 50, {
ease: Power0.easeNone,
xPercent: -66.66666
}).to(loop, 0, {
ease: Power0.easeNone,
x: 0
})
});
</script>

<!– /wp:html –>

<!– wp:image –>
<figure class=”wp-block-image”></figure>
<!– /wp:image –>

[hsasaki]

ご利用のテーマに Welcart Basic をお使いとのことですが、
Welcart Basic に無いスタイル、スクリプトを書かれております。
よって、
こちらでは返答しかねます。
また、
Welcart Basic は親テーマになりますので、
基本的に親テーマを直接触りますと、
バージョンアップ時に上書きされ、
カスタマイズした場所が削除されます。
テーマを改修する場合は子テーマで作られた方が良いかと思います。

上記内容はカスタマイズとなりますので、
お問い合わせよりご相談または見積依頼をお願いいたします。

[appletea]

こちらは子テーマではなく、固定ページの該当ページに貼り付けており、CCS等には記載していません。
こちらは勧誘のページではございませんので

1518pxの幅で写真3枚を繰り返し無限に移動（スライド）するアニメーションを設定したいのです。
写真の横幅は200pxが良いです。

のご指導を賜れる方、よろしくお願いします。

[hsasaki]

テーマに関係なく、WordPressの固定ページに貼り付けたいと言うことでしたら、
こちらで聞かれた方が良いかもしれません。
Wordpress 日本語フォーラム
https://ja.wordpress.org/support/

[投稿者]

投稿