CODEWITHSUNDEEP
htmlcssanimation
Sindyr
Sindyr

Reputation: 1357

How to clip animation outside of div?

I am learning a little CSS to create an animation, here is my code so far:

https://jsfiddle.net/1u678gcy/

Since I can't post the jsfiddle link without including the code too according to StackExchange, here is my 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>

...and here is my 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}

When you load it, The first image is a static image of the SVG graphic I am animating.

Then I have a blue box which is my div.

Then I have nested inside the div an copy of the same image that I am animating from left to right, which runs the animation each time the page loads.

The problem is that I want the left and right borders of the div to "clip" the animation, so we see the image enter the blue box from the left, zooms across, and exits on the right - but we should NEVER see the image OUTSIDE of the blue box, even when it is.

Opacity will not be the fix, because when the image is half into the div box, I want to see the half that is in the box, but not the half that is not.

Basically I want to clip the animation on the right and left, so we can see an image enter, then leave.

Is there a way to accomplish this using HTML and CSS, without using Javascript which I know nothing about?

Upvotes: 1

Views: 1584

Answers (1)

Mr Hery
Mr Hery

Reputation: 870

First you need to assign your div as a Relative position, so you can control the items inside. Here's some example:

<!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>

Upvotes: 2

Related Questions