使用 CSS 自动滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15485694/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Auto scrolling with CSS
提问by Shuvro Shuvro
In my website [based on wordpress] , I have a project slider (technically image with some text) . But that slider is not auto scrolling , there is a button for sliding left and right .
在我的网站 [基于 wordpress] 中，我有一个项目滑块（技术上带有一些文本的图像）。但是那个滑块不是自动滚动的，有一个左右滑动的按钮。
http://i47.tinypic.com/97uxz4.jpg
http://i47.tinypic.com/97uxz4.jpg
I want to remove that button and make it sliding auto . I don't want use any javascript . I want to accomplish with CSS . Is it possible if yes then how ?
我想删除该按钮并使其滑动 auto 。我不想使用任何 javascript 。我想用 CSS 来完成。如果是，那有可能吗？
If it is not possible what is the shortest possible solution to do this , Here is my working site
如果不可能做到这一点，最短的解决方案是什么，这是我的工作站点
回答by
1.) You can't initiate DOM actions with CSS or pure HTML. You always need a manipulating language (like JavaScript)
1.) 您不能使用 CSS 或纯 HTML 启动 DOM 操作。你总是需要一种操作语言（比如 JavaScript）
2.) You can remove the buttons by overwriting the current CSS and adjust the visibilityor displaytag to render them away or (placeholding) invisible.
2.) 您可以通过覆盖当前 CSS 并调整visibility或display标签来删除按钮以将它们呈现出来或（占位）不可见。
In the end you really need JavaScript for this to trigger dynamic hiding and to make the automatic slide happen with setIntervals.
最后，您真的需要 JavaScript 来触发动态隐藏并使用setIntervals进行自动滑动。
Edit:
编辑：
This might be something for you to work with animating the slider:
这可能是您为滑块设置动画的工作：
#container {
height: 200px;
width: 800px;
border: 1px solid #333;
overflow: hidden;
margin: 25px auto;
}
#box {
background: orange;
height: 180px;
width: 400px;
margin: 10px -400px;
-webkit-animation-name: move;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: right;
-webkit-animation-timing-function: linear;
}
#box:hover {
-webkit-animation-play-state: paused;
}
@-webkit-keyframes move {
0% {
margin-left: -400px;
}
100% {
margin-left: 800px;
}
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="main2.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="box">as</div>
</div>
</body>
</html>Result
结果
This is the WebKit-only version. These are the equivalents for other browsers:
这是仅限 WebKit 的版本。这些是其他浏览器的等效项：
The @keyframes:
在@关键帧：
@-moz-keyframes move {
@-o-keyframes move {
@keyframes move {
Inside #box(only one property shown as example):
内部#box（仅显示一个属性作为示例）：
-moz-animation-name: move;
-o-animation-name: move;
animation-name: move;
回答by Linus Caldwell
Here is an example (Fiddle) of using animations. You could apply this to your .post-list:
下面是一个例子（小提琴使用的）animations。您可以将此应用于您的.post-list：
.post-list {
animation: slide infinite 3s alternate;
}
@keyframes slide {
0% {
margin-left: 0px;
}
50% {
margin-left: -100px;
}
100% {
margin-left: -200px;
}
}
To disable the animation on hover, use:
要禁用悬停动画，请使用：
.post-list:hover {
animation-play-state: paused;
}
Don't forget the vendor prefixes (-webkit-...and so on) like in Allendars answer.
不要忘记-webkit-...Allendars 回答中的供应商前缀（等等）。
But of course you'll have to play around. This should just be a hint of how it could work.
但当然，你必须四处玩耍。这应该只是它如何工作的提示。
回答by A H
Here is an example for auto scroll in both limited and unlimited element width:
这是在有限和无限元素宽度下自动滚动的示例：
/*use this js if your element width is unlimited an you want to scroll in a
constant speed. else, you dont need this js code*/
var elemWidth = document.getElementById('scroll-element').offsetWidth;
var time = elemWidth/80; /* 80 = scrolling speed (44px/s)*/
document.getElementById('scroll-element').style.cssText = "animation: scroll "+time+"s linear infinite;".scroll-box{
white-space: nowrap;
font-size: 1.1em;
overflow: hidden;
padding: 20px 0;
background-color: green;
}
.scroll-container{
width: fit-content;
direction: rtl; /*if you want to scroll left to right set dir to ltr */
}
#scroll-element{
background-color: yellow;
padding: 10px;
}
@-webkit-keyframes scroll{
0% {
margin-right: 0%; /*if you want to scroll left to right set margin-left*/
}
100%{
margin-right: 100%;/*if you want to scroll left to right set margin-left*/
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="main2.css" type="text/css" />
</head>
<body>
<div class="scroll-box">
<div class="scroll-container">
<span id="scroll-element">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
</span>
</div>
</div>
</body>
</html>回答by Emmanuel Olonade
You can't be able to do much animation with css. JavaScript is the way to go. I'm also trying to get the hang of it... Goodluck to you.
你不能用 css 做很多动画。JavaScript 是必经之路。我也在努力掌握它……祝你好运。
