我有以下代码：
是否有一种仅使用HTML和CSS activate <animate />标签的方法？仅当activated时，才执行<animate />的动画规则。例如，近年来是否有一些新的HTML CSS标准或将在2020年发布，这些标准将使我能够进行input:checked ~ svg animate {enabled:true;}之类的工作？还是别的幻想？
我想在我的项目中完全避免使用JavaScript来挑战和娱乐自己。
<body>
<input type="checkbox" />
<svg class="curtain home" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://picsum.photos/id/1000/800/800" x="0" y="0" width="100" height="100" />
</pattern>
</defs>
<polygon points="0,0 0,100 100,100 50,0" fill="url(#img1)">
<animate attributeName="points" dur="5s" values="0,0 0,100 100,100 50,0 ; 50,40 30,60 80,10 50,70; 0,0 0,100 100,100 50,0" keyTimes="0;0.5;1" repeatCount="indefinite"/>
</polygon>
</svg>
</body>ADDITIONAL
我对其他选项持开放态度，这给人一种幻觉，直到选中输入字段，动画才开始运行。或者，也许还有另一个与<animate />标签配合使用的HTML元素可以根据用户与网页的互动来启动和停止幻觉动画。
[您可能会考虑在两个多边形的显示之间切换的技巧
.hide {
display:none;
}
input:checked~svg .hide {
display:block;
}
input:checked~svg .show {
display:none;
}<body>
<input type="checkbox" >
<svg class="curtain home" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://picsum.photos/id/1000/800/800" x="0" y="0" width="100" height="100" />
</pattern>
</defs>
<polygon points="0,0 0,100 100,100 50,0" fill="url(#img1)" class="show">
</polygon>
<polygon points="0,0 0,100 100,100 50,0" fill="url(#img1)" class="hide">
<animate attributeName="points" dur="5s" values="0,0 0,100 100,100 50,0 ; 50,40 30,60 80,10 50,70; 0,0 0,100 100,100 50,0" keyTimes="0;0.5;1" repeatCount="indefinite"/>
</polygon>
</svg>
</body>或使用click事件。诀窍是要有两个矩形，一个用于开始，另一个用于结束。使用一些CSS，您可以使它们相互重叠，并使用z-index：
这里是一个基本示例，您只需要找到一种使红色矩形看起来更好的好方法，因为它将是您必须单击的一种。
label {
position:absolute;
z-index:0;
}
input:checked + label {
z-index:1;
}<body>
<input type="checkbox" id="input" >
<label for="input"><svg viewBox="0 0 10 10" height="20">
<rect id="stop" x=0 y=0 width="100%" height="100%" fill="red" />
</svg></label>
<label for="input"><svg viewBox="0 0 10 10" height="20">
<rect id="start" x=0 y=0 width="100%" height="100%" fill="red" />
</svg></label>
<svg class="curtain home" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://picsum.photos/id/1000/800/800" x="0" y="0" width="100" height="100" />
</pattern>
</defs>
<polygon points="0,0 0,100 100,100 50,0" fill="url(#img1)" class="hide">
<animate attributeName="points" begin="start.click" end="stop.click" dur="5s" values="0,0 0,100 100,100 50,0 ; 50,40 30,60 80,10 50,70; 0,0 0,100 100,100 50,0" keyTimes="0;0.5;1" repeatCount="indefinite"/>
</polygon>
</svg>
</body>如果您对纯CSS解决方案感兴趣，那么只需几行代码即可轻松完成：
img {
width: 400px;
display:block;
clip-path: polygon(0 0, 0 100%, 100% 100%, 50% 0);
animation:change 5s linear infinite paused;
}
input:checked + img {
animation-play-state:running;
}
@keyframes change{
50% {
clip-path: polygon(50% 40%, 30% 60%, 80% 10%, 50% 70%)
}
}<input type="checkbox" >
<img src="https://picsum.photos/id/1000/800/800">