使用按钮控制 CSS 动画答案

【问题标题】：Controlling a CSS Animation with Buttons使用按钮控制 CSS 动画
【发布时间】：2015-03-17 20:54:50
【问题描述】：

我需要由两个箭头控制滚动图像（向上滚动和向下滚动）。我编写了一个 CSS“scrollUp”动画以及一个“scrollDown”动画。单击箭头时如何使图像出现这些动画？

我认为我需要将“scrollUp”类和“scrollDown”类应用于图像。但我不知道如何让一个箭头激活“scrollUp”类动画，另一个激活“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>

【问题讨论】：

你能提供你已有的代码吗？
多个 CSS 动画很容易实现，但您在这里想要实现的目标有点不清楚。滚动图片？？你的意思是像幻灯片一样，还是想在页面上上下滚动？
我刚刚添加了代码，我需要使用按钮一次出现一个。很抱歉最初没有它
仍在寻求帮助！

标签： html css animation scroll

【解决方案1】：

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

我会使用一些简单的 javascript 来将一个类应用到容器中，但不管是向上还是向下滚动。

【讨论】：

【解决方案2】：

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

【讨论】：