Question

我正在学习一些CSS来创建动画，到目前为止这是我的代码：

由于我不能根据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}

加载时，第一张图片是我正在动画的SVG图形的静态图像。

然后我有一个蓝色的盒子，这是我的div。

然后我在div中嵌套了一个从左到右动画的相同图像的副本，每次页面加载时都会运行动画。

问题在于我希望div的左右边框能够“剪辑”动画，所以我们看到图像从左边进入蓝框，缩放，然后在右边退出 - 但我们应该永远不要看到蓝色框的外侧图像，即使它是。

不透明度不会是修复，因为当图像是div框的一半时，我想看到框中的一半，但不是那个没有的一半。

基本上我想在右侧和左侧剪辑动画，这样我们就可以看到图像进入，然后离开。

有没有办法使用HTML和CSS完成此操作，而不使用我一无所知的Javascript？

Answer 1

首先，您需要将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>

如何在div之外剪辑动画？

1 个答案: