我正在学习一些 CSS 来创建动画，这是我目前的代码:
https://jsfiddle.net/1u678gcy/
根据 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？
最佳答案
首先你需要将你的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>
关于html - 如何在div之外剪辑动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48030317/