divの外部でアニメーションをクリップする方法は？

私はここに、アニメーションを作成するために、少しCSSを学んでいるが、私のコードは、これまでのところです：divの外部でアニメーションをクリップする方法は？

私はStackExchangeによると、あまりにもコードを含めずにjsfiddleリンクを投稿することができないので、ここに私がいますHTML：

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body style="background-color:#111111"> 
    <img src="https://www.benngrant.com/html5/shape1.svg" /> 
    <br> 
    <br> 
    <br> 
    <div id="mydiv"> 
     <br><br><br> 
     <a id="swipe1";><img src="https://www.benngrant.com/html5/shape1.svg" /> 
     </a> 
     <br><br><br><br> 
    </div> 
    </body> 
</html>

...と、ここは私のCSSです：

a#swipe1 {transition-timing-function: linear; position: absolute; animation: mymove 1s forwards;} 
@keyframes mymove{from {left:0%; top:100px; opacity:1;} to {left:60%; top:100px; opacity:0; }} 
#mydiv {text-align:center; background:blue; max-width:50%; margin-left:auto; margin-right:auto; display:block}

あなたはそれをロード、最初のimageはアニメーション化しているSVGグラフィックの静止画像です。

私は私のdivです青いボックスがあります。

私は、左から右にアニメーション化している同じイメージのコピーをdiv内に入れています。これはページが読み込まれるたびにアニメーションを実行します。

問題は、divの左と右の境界線でアニメーションをクリップすると、画像が左から青色のボックスに入り、ズームして右に出るのがわかりますたとえそうであっても、青いボックスの外側のイメージは決して見ないでください。

画像がdivボックスの半分である場合、その半分はボックスに表示されますが、半分は表示されませんので、不透明度は修正されません。

基本的に私は右と左にアニメーションをクリップしたいので、イメージが表示されているのを確認してから離れることができます。

私は何も知らないJavascriptを使わずにHTMLとCSSを使ってこれを達成する方法がありますか？

出典

2017-12-30 Sindyr

#mydiv {overflow：hidden;} –

まず、divを相対位置として割り当てる必要があります。そのため、内部で項目を制御できます。ここにいくつかの例があります：

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      .swipe1 {transition-timing-function: linear; position: absolute; animation: mymove 1s forwards;} 
      @keyframes mymove{from {left:0%; opacity:1;} to {left:60%; opacity:0; }} 
      #mydiv {text-align:center; background:blue; max-width:50%; overflow: hidden; position: relative; margin-left:auto; margin-right:auto; display:block} 
     </style> 
    </head> 
    <body style="background-color:#111111"> 
      <img src="https://www.benngrant.com/html5/shape1.svg" /> 
     <br> 
     <br> 
     <br> 
     <div id="mydiv"> 
      <br><br><br> 
      <img class="swipe1" src="https://www.benngrant.com/html5/shape1.svg" /> 
      <br><br><br><br> 
     </div> 
    </body> 
</html>

出典

2017-12-30 02:55:59

それはそれでした。オーバーフローを追加する：隠された意味がありますが、私は位置：相対的な必要があるように見える理由はわかりませんが、それはあります。ありがとう!!! – Sindyr

divの外部でアニメーションをクリップする方法は？

答えて

関連する問題