CSSアニメーション、絶対位置が右から左に戻る

私はいくつかの雲でサイトを作っています。私は、雲が画面の向こう側を左から右に動くようにしたい。私は雲が動いているのですが、ある面でちょっと立ち往生しています。ページが読み込まれたときに雲の一部が画面に表示されるようにしたい。私はそれらの雲が動き始め、画面を右に出てから、左から戻って来てください。ここでCSSアニメーション、絶対位置が右から左に戻る

は、それが少し良く説明できるイメージです。

ここにコードされています。ここでは

<div class="clouds"> 
    <div class="firstCloud">   
     <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164"><defs><style>.cloud1Fill{fill:#d1dbd9;}</style></defs><title>Untitled-5</title><path class="cloud1Fill" d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z"/></svg> 
    </div> 
    <div class="secondCloud"> 
     <svg id="svgCloud2" data-name="cloud2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291 124"><defs><style>.cloud1Fill{fill:#d3dddb;}.cloud2Fill{fill:#fff;}</style></defs><title>Untitled-4</title><path class="cloud1Fill" d="M2.29,123.5A41,41,0,0,1,58.37,74.12l.32.14.24-.25A45.72,45.72,0,0,1,91.5,60.5q1.14,0,2.25.06l.43,0,.09-.41a76,76,0,0,1,148.46,0l.09.4h.41l1.27,0a46.06,46.06,0,0,1,46,46,45.53,45.53,0,0,1-3.26,17Z"/><path class="cloud2Fill" d="M168.5,1a75.53,75.53,0,0,1,73.74,59.23l.18.81.82,0,1.26,0a45.49,45.49,0,0,1,42.4,62H2.66A40.53,40.53,0,0,1,58.17,74.57l.63.29.49-.49A45.2,45.2,0,0,1,91.5,61c.75,0,1.5,0,2.23.06l.85,0,.18-.83A75.51,75.51,0,0,1,168.5,1m0-1A76.52,76.52,0,0,0,93.78,60.06Q92.66,60,91.5,60A46.35,46.35,0,0,0,58.58,73.66,41.52,41.52,0,0,0,1.92,124H287.58A46.5,46.5,0,0,0,244.5,60l-1.28,0A76.53,76.53,0,0,0,168.5,0Z"/></svg> 
    </div> 
    <div class="thirdCloud"> 
     <svg id="svgClouds3" data-name="clouds2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 329 139"><defs><style>.cloud2Fill{fill:#d1dbd9;}</style></defs><title>Untitled-6</title><path class="cloud2Fill" d="M329,125a40.09,40.09,0,0,1-2.52,14H14.9A61.28,61.28,0,0,1,0,99C0,64.21,29.33,36,65.5,36a67.34,67.34,0,0,1,30,7A86,86,0,0,1,236.42,31.37,55.53,55.53,0,0,1,311,83.5a56.67,56.67,0,0,1-.55,7.75A39.93,39.93,0,0,1,329,125Z"/></svg> 
    </div>  
</div> 

.firstCloud { 
    position: absolute; 
    left: 0; 
    top: 150px; 
    animation: move 50s linear 2s infinite; 
    width: 150px; 
} 

.secondCloud { 
    position: absolute; 
    left: 50%; 
    top: 200px; 
    animation: move 55s linear 0s infinite backwards; 
    width: 150px; 
} 

.thirdCloud { 
    top: 250px; 
    left: 10%; 
    position: absolute; 
    animation: move 60s linear 10s infinite backwards; 
    width: 150px; 
} 

@-webkit-keyframes move { 
    from {-webkit-transform: translateX(-400px);} 
    to {-webkit-transform: translateX(2000px);} 
}

は、私の周りに検索したが、私が思うcodepen

されます私のGoogle-Fuは何を検索するのか失敗しました。誰かが私を正しい方向に向けることができますか？

出典

2017-12-11 William Cunningham

私はそれはあなたを助けることができると思い、私は今あなたに詳細な回答を投稿する時間がありませんが、私はこのcodepen 2年前に作られています。https：// codepen.io/mbrillaud/pen/WbyrOe –

ありがとう@MehdiBrillaud、それは近いが、それほどではない。雲がスクリーン上に配置され始めると、それが戻ってくると画面外ではなく出発点に戻ります。 –

@MehdiBrillaudでもペンを使うことができます。雲の開始位置を変更すると、開始位置の代わりに画面が始まります。 – Simplicity

ここで私は前のコメントで提案された解決策です：

初期クラウド（.initalCloud）を画面外にスライドさせ、後で通常の.firstCloudに置き換えることができます。

.clouds { 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 400px; 
 
} 
 

 
.initialCloud { 
 
    position: absolute; 
 
    left: 100%; 
 
    top: 150px; 
 
    animation: moveFirst 5s linear .2s; 
 
    animation-iteration-count: 1; 
 
    width: 150px; 
 
} 
 

 
.firstCloud { 
 
    position: absolute; 
 
    left: -30%; 
 
    top: 150px; 
 
    animation: move 5s linear 5s infinite; 
 
    width: 150px; 
 
} 
 

 
.secondCloud { 
 
    position: absolute; 
 
    left: -30%; 
 
    top: 200px; 
 
    animation: move 8s linear 0s infinite; 
 
    width: 150px; 
 
} 
 

 
.thirdCloud { 
 
    top: 250px; 
 
    left: -30%; 
 
    position: absolute; 
 
    animation: move 11s linear 1s infinite; 
 
    width: 150px; 
 
} 
 

 
@-webkit-keyframes move { 
 
    from { 
 
    left: -30%; 
 
    } 
 
    to { 
 
    left: 100%; 
 
    } 
 
} 
 

 
@-webkit-keyframes moveFirst { 
 
    from { 
 
    left: 50%; 
 
    } 
 
    to { 
 
    left: 100%; 
 
    } 
 
}

<div class="clouds"> 
 
    <div class="initialCloud"> 
 
    <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164"><defs><style>.cloud1Fill{fill:#d1dbd9;}</style></defs><title>Untitled-5</title><path class="cloud1Fill" d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z"/></svg> 
 
    </div> 
 
    <div class="firstCloud"> 
 
    <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164"><defs><style>.cloud1Fill{fill:#d1dbd9;}</style></defs><title>Untitled-5</title><path class="cloud1Fill" d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z"/></svg> 
 
    </div> 
 
    <div class="secondCloud"> 
 
    <svg id="svgCloud2" data-name="cloud2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291 124"><defs><style>.cloud1Fill{fill:#d3dddb;}.cloud2Fill{fill:#fff;}</style></defs><title>Untitled-4</title><path class="cloud1Fill" d="M2.29,123.5A41,41,0,0,1,58.37,74.12l.32.14.24-.25A45.72,45.72,0,0,1,91.5,60.5q1.14,0,2.25.06l.43,0,.09-.41a76,76,0,0,1,148.46,0l.09.4h.41l1.27,0a46.06,46.06,0,0,1,46,46,45.53,45.53,0,0,1-3.26,17Z"/><path class="cloud2Fill" d="M168.5,1a75.53,75.53,0,0,1,73.74,59.23l.18.81.82,0,1.26,0a45.49,45.49,0,0,1,42.4,62H2.66A40.53,40.53,0,0,1,58.17,74.57l.63.29.49-.49A45.2,45.2,0,0,1,91.5,61c.75,0,1.5,0,2.23.06l.85,0,.18-.83A75.51,75.51,0,0,1,168.5,1m0-1A76.52,76.52,0,0,0,93.78,60.06Q92.66,60,91.5,60A46.35,46.35,0,0,0,58.58,73.66,41.52,41.52,0,0,0,1.92,124H287.58A46.5,46.5,0,0,0,244.5,60l-1.28,0A76.53,76.53,0,0,0,168.5,0Z"/></svg> 
 
    </div> 
 
    <div class="thirdCloud"> 
 
    <svg id="svgClouds3" data-name="clouds2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 329 139"><defs><style>.cloud2Fill{fill:#d1dbd9;}</style></defs><title>Untitled-6</title><path class="cloud2Fill" d="M329,125a40.09,40.09,0,0,1-2.52,14H14.9A61.28,61.28,0,0,1,0,99C0,64.21,29.33,36,65.5,36a67.34,67.34,0,0,1,30,7A86,86,0,0,1,236.42,31.37,55.53,55.53,0,0,1,311,83.5a56.67,56.67,0,0,1-.55,7.75A39.93,39.93,0,0,1,329,125Z"/></svg> 
 
    </div> 
 
</div>

出典

2017-12-11 15:11:59 Maharkus

これはまさに私が探していたものでした。ありがとう！ –

うれしい私は助けることができました！ – Maharkus

translateX()の代わりにleftプロパティを使用すると、左側にパーセントを使用して終了画面を検出できるためです。

.clouds { 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 400px; 
 
} 
 

 
.firstCloud { 
 
    position: absolute; 
 
    left: -150px; 
 
    top: 150px; 
 
    animation: move 10s linear 2s infinite; 
 
    width: 150px; 
 
} 
 

 
.secondCloud { 
 
    position: absolute; 
 
    left: -150px; 
 
    top: 200px; 
 
    animation: move 15s linear 0s infinite; 
 
    width: 150px; 
 
    } 
 

 
.thirdCloud { 
 
    top: 250px; 
 
    left: -150px; 
 
    position: absolute; 
 
    animation: move 20s linear 5s infinite; 
 
    width: 150px; 
 
} 
 

 
@-webkit-keyframes move { 
 
    from {left: -150px;} 
 
    to {left: 100%;} 
 
}

<div class="clouds"> 
 
    <div class="firstCloud">   
 
     <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164"><defs><style>.cloud1Fill{fill:#d1dbd9;}</style></defs><title>Untitled-5</title><path class="cloud1Fill" d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z"/></svg> 
 
    </div> 
 
    <div class="secondCloud"> 
 
     <svg id="svgCloud2" data-name="cloud2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291 124"><defs><style>.cloud1Fill{fill:#d3dddb;}.cloud2Fill{fill:#fff;}</style></defs><title>Untitled-4</title><path class="cloud1Fill" d="M2.29,123.5A41,41,0,0,1,58.37,74.12l.32.14.24-.25A45.72,45.72,0,0,1,91.5,60.5q1.14,0,2.25.06l.43,0,.09-.41a76,76,0,0,1,148.46,0l.09.4h.41l1.27,0a46.06,46.06,0,0,1,46,46,45.53,45.53,0,0,1-3.26,17Z"/><path class="cloud2Fill" d="M168.5,1a75.53,75.53,0,0,1,73.74,59.23l.18.81.82,0,1.26,0a45.49,45.49,0,0,1,42.4,62H2.66A40.53,40.53,0,0,1,58.17,74.57l.63.29.49-.49A45.2,45.2,0,0,1,91.5,61c.75,0,1.5,0,2.23.06l.85,0,.18-.83A75.51,75.51,0,0,1,168.5,1m0-1A76.52,76.52,0,0,0,93.78,60.06Q92.66,60,91.5,60A46.35,46.35,0,0,0,58.58,73.66,41.52,41.52,0,0,0,1.92,124H287.58A46.5,46.5,0,0,0,244.5,60l-1.28,0A76.53,76.53,0,0,0,168.5,0Z"/></svg> 
 
    </div> 
 
    <div class="thirdCloud"> 
 
     <svg id="svgClouds3" data-name="clouds2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 329 139"><defs><style>.cloud2Fill{fill:#d1dbd9;}</style></defs><title>Untitled-6</title><path class="cloud2Fill" d="M329,125a40.09,40.09,0,0,1-2.52,14H14.9A61.28,61.28,0,0,1,0,99C0,64.21,29.33,36,65.5,36a67.34,67.34,0,0,1,30,7A86,86,0,0,1,236.42,31.37,55.53,55.53,0,0,1,311,83.5a56.67,56.67,0,0,1-.55,7.75A39.93,39.93,0,0,1,329,125Z"/></svg> 
 
    </div>  
 
</div>

使用jqueryのしたい場合は一度だけのために中央の画面のアニメーションを開始します。

$(document).ready(function(){ 
 
    $('.firstCloud,.secondCloud,.thirdCloud').animate({ 
 
    left:"100%" 
 
    },10000,function(){$(this).addClass('anim')}) 
 
})

.clouds { 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 400px; 
 
} 
 

 
.firstCloud { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 150px; 
 
    animation-duration: 10s; 
 
    animation-delay: 2s; 
 
    width: 150px; 
 
} 
 

 
.secondCloud { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 200px; 
 
    animation-duration: 15s; 
 
    width: 150px; 
 
    } 
 

 
.thirdCloud { 
 
    top: 250px; 
 
    left: 10%; 
 
    position: absolute; 
 
    animation-duration: 20s; 
 
    animation-delay: 2s; 
 
    width: 150px; 
 
} 
 

 

 
.anim { 
 
    animation-name: move; 
 
    animation-iteration-count: infinite; 
 
} 
 

 
@-webkit-keyframes move { 
 
    from {left: -150px;} 
 
    to {left: 100%;} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="clouds"> 
 
    <div class="firstCloud">   
 
     <svg id="svgCloud" data-name="clouder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348 164"><defs><style>.cloud1Fill{fill:#d1dbd9;}</style></defs><title>Untitled-5</title><path class="cloud1Fill" d="M348,107.5a54.5,54.5,0,0,1-94.87,36.61,77.55,77.55,0,0,1-81.57-1.43A73,73,0,0,1,71,145.07,42.48,42.48,0,1,1,49.61,71.59,73,73,0,0,1,154.85,26.84,77.51,77.51,0,0,1,287.16,53.37,53,53,0,0,1,293.5,53,54.5,54.5,0,0,1,348,107.5Z"/></svg> 
 
    </div> 
 
    <div class="secondCloud"> 
 
     <svg id="svgCloud2" data-name="cloud2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291 124"><defs><style>.cloud1Fill{fill:#d3dddb;}.cloud2Fill{fill:#fff;}</style></defs><title>Untitled-4</title><path class="cloud1Fill" d="M2.29,123.5A41,41,0,0,1,58.37,74.12l.32.14.24-.25A45.72,45.72,0,0,1,91.5,60.5q1.14,0,2.25.06l.43,0,.09-.41a76,76,0,0,1,148.46,0l.09.4h.41l1.27,0a46.06,46.06,0,0,1,46,46,45.53,45.53,0,0,1-3.26,17Z"/><path class="cloud2Fill" d="M168.5,1a75.53,75.53,0,0,1,73.74,59.23l.18.81.82,0,1.26,0a45.49,45.49,0,0,1,42.4,62H2.66A40.53,40.53,0,0,1,58.17,74.57l.63.29.49-.49A45.2,45.2,0,0,1,91.5,61c.75,0,1.5,0,2.23.06l.85,0,.18-.83A75.51,75.51,0,0,1,168.5,1m0-1A76.52,76.52,0,0,0,93.78,60.06Q92.66,60,91.5,60A46.35,46.35,0,0,0,58.58,73.66,41.52,41.52,0,0,0,1.92,124H287.58A46.5,46.5,0,0,0,244.5,60l-1.28,0A76.53,76.53,0,0,0,168.5,0Z"/></svg> 
 
    </div> 
 
    <div class="thirdCloud"> 
 
     <svg id="svgClouds3" data-name="clouds2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 329 139"><defs><style>.cloud2Fill{fill:#d1dbd9;}</style></defs><title>Untitled-6</title><path class="cloud2Fill" d="M329,125a40.09,40.09,0,0,1-2.52,14H14.9A61.28,61.28,0,0,1,0,99C0,64.21,29.33,36,65.5,36a67.34,67.34,0,0,1,30,7A86,86,0,0,1,236.42,31.37,55.53,55.53,0,0,1,311,83.5a56.67,56.67,0,0,1-.55,7.75A39.93,39.93,0,0,1,329,125Z"/></svg> 
 
    </div>  
 
</div>

出典

2017-12-11 14:57:38 Ehsan

画面の中央に雲が再現されますが、これは最も望ましい結果ではありません。 – Maharkus

@Maharkus、最初の左50％を使用しているので... – Ehsan

OP **が欲しいので左の50％が使用されます**中央に雲が始まりますが、左側に再び現れます。 – Maharkus

私はちょうどあなたの概念を示すために、すぐにこれを作りました。

まず、雲の開始位置を左から50pxに設定してからアニメーションを設定しますが、繰り返しは1回だけです。

私は無限のアニメーションで2番目の雲を作ったが、私もそれに遅れを入れた。そうすれば、たとえ2つの異なる要素とアニメーションであっても、最初のアニメーションがループしているという錯覚を与えることができます。

これは、私がCSSを使用して考えることができる唯一の方法です。

.wrapper { 
 
    position: relative; 
 
} 
 

 
.clouds { 
 
    position: absolute; 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: gray; 
 
} 
 

 
.clouds.cloud1 { 
 
    left: 50px; 
 
    animation: cloud1 20s linear 1; 
 
} 
 

 
.clouds.cloud2 { 
 
    left: -50px; 
 
    animation: cloud1 20s 10s linear 1; 
 
} 
 

 
@keyframes cloud1 { 
 
    0% { 
 
    left: 20px; 
 
    } 
 
    100% { 
 
    left: 3000px; 
 
    } 
 
} 
 

 
@keyframes cloud2 { 
 
    0% { 
 
    left: -50px; 
 
    } 
 
    100% { 
 
    left: 3000px; 
 
    } 
 
}

<div class="wrapper"> 
 
\t <div class="clouds cloud1"></div> 
 
\t <div class="clouds cloud2"></div> 
 
</div>

出典

2017-12-11 15:16:45

CSSアニメーション、絶対位置が右から左に戻る

答えて

関連する問題