使用按钮控制 CSS 动画

Question

我需要用两个箭头控制滚动图像（向上滚动和向下滚动）。我有一个 CSS "scrollUp" 动画和一个 "scrollDown" 动画。单击箭头时如何让图像出现这些动画？

我想我需要对图像应用 "scrollUp" class 和 "scrollDown" class。但我不确定如何让一个箭头激活 "scrollUp" class 动画，另一个箭头激活 "scrollDown" 动画。

我见过有人使用带 href="#something" 的链接来激活 ID 动画，但我的图片不能有多个 ID，所以这样是行不通的。

如有任何帮助，我们将不胜感激！如果您知道任何视频教程，那也很棒！我不反对使用 JavaScript 但我更愿意使用 CSS.

编辑：我基本上需要以下代码来一次激活一个图像，每当单击一个按钮时：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>web browsers</title>
<style type="text/css">
body {
    margin-left: 100px;
margin-top: 100px;
}
#header {
height: 256px;
width: 256px;
overflow: hidden;
border:1px solid gray;
}
.slider {
animation: myanimation 8s ease-in-out infinite alternate;   
}
@keyframes myanimation
{   
0% {transform:translateY(0px); }
25% {transform:translateY(-256px); }
50% {transform:translateY(-512px);}
75% {transform:translateY(-768px);}
100% {transform:translateY(-1024px);}               
}
</style>
</head>
<body>
<div id="header">
<img class="slider" src="img1.png" width="256" height="256">
<img class="slider" src="img2.png" width="256" height="256">
<img class="slider" src="img3.png" width="256" height="256">
<img class="slider" src="img4.png" width="256" height="256" >
<img class="slider" src="img5.png" width="256" height="256">
</div>
</body>
</html>

Answer 1

这在语法上不是最佳解决方案，但您可以将图像滚动器包装在 <input type="checkbox" id="scroll-up-control"> 标记内，然后 select 反对 #scroll-up-control:checked 以应用向上滚动的样式, 使用上面列出的默认值向下滚动。

我会使用一些简单的 javascript 来仅将 class 应用到容器，而不管是向上还是向下滚动。

Answer 2

我通过更改实际滚动图像的方法解决了这个问题。我决定改用带有隐藏滚动条的 iFrame。 Javascript 允许按钮控制 iFrame 的滚动。感谢所有提供帮助的人！

使用按钮控制 CSS 动画

Controlling a CSS Animation with Buttons

html

css

animation

scroll