CSS 使用 CSS3 在屏幕上移动图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23184346/
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
Move image across screen with CSS3
提问by Ali Boulala
I've been browsing the web for quite awhile trying to find a way of making icons move onto the screen (from the left and onto the center of the body div) when you load the page. How can this be done?
我浏览网页已经有一段时间了，试图找到一种在加载页面时使图标移动到屏幕上（从左侧到主体 div 的中心）的方法。如何才能做到这一点？
This is what I have so far:
这是我到目前为止：
CSS3
CSS3
a#rotator {
text-decoration: none;
padding-right: 20px;
margin-left: 20px;
float: left;
}
a#rotator img {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
border-radius:60px;
transition-duration: 1s;
}
a#rotator img:hover {
box-shadow: 0 3px 15px #000;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: translate()
}
回答by pablopixel
If you want a pure CSS solution, you can use the CSS3 animation feature.
You create or declare a animation with the keyword @animationfollowed by the name you want to give to that animation. Inside the curly brackets you must indicate the keyframes of the animation and what CSS properties will be applied in that keyframe, so the transition between keyframes is done.
You must specify at least two keyframes, the beginning and the end of the animation with the keywords fromand to, followed by the properties inside curly brackets. For example:
如果你想要一个纯 CSS 解决方案，你可以使用 CSS3 动画功能。您可以使用关键字@animation后跟要赋予该动画的名称来创建或声明动画。在大括号内，您必须指明动画的关键帧以及将在该关键帧中应用哪些 CSS 属性，以便完成关键帧之间的过渡。您必须至少指定两个关键帧，即动画的开头和结尾，使用关键字fromand to，后跟大括号内的属性。例如：
@keyframes myanimation
{
from {
left: 0;
}
to {
left: 50%;
}
}
Or a example with three keyframes (the percent indicates the percent of the duration):
或者有三个关键帧的例子（百分比表示持续时间的百分比）：
@keyframes myanimation
{
0% {
left: 0;
}
10% {
left: 50%;
}
100% {
left: 10%;
}
}
Once you have created the animation, you must specify which element you want to animate, it's just the animationproperty inside the CSS rule that matches the element. Note that the name in the value must match the one that you've created before, and you the duration of the animation. For example:
创建动画后，您必须指定要动画的元素，它只是animation与元素匹配的 CSS 规则中的属性。请注意，值中的名称必须与您之前创建的名称以及动画的持续时间相匹配。例如：
a#rotator {
animation: myanimation 5s;
}
Here you can specify the duration, number of times that it must be repeated, etc. You can read the full specs here: http://www.w3.org/TR/css3-animations/
您可以在此处指定持续时间、必须重复的次数等。您可以在此处阅读完整的规范：http: //www.w3.org/TR/css3-animations/
Here you can see a working example with the code you've provided: http://jsfiddle.net/mcSL7/1/
在这里你可以看到你提供的代码的工作示例：http: //jsfiddle.net/mcSL7/1/
I've stopped floating the element and I've assigned it the position absolute, so I can move it in the body with the top and left properties.
我已经停止浮动元素，并为它分配了绝对位置，因此我可以使用 top 和 left 属性在主体中移动它。
This CSS feature is supported by almost every modern browser, even if some of them need the -webkit- vendor prefix. Check it here: http://caniuse.com/#feat=css-animation
几乎所有现代浏览器都支持此 CSS 功能，即使其中一些浏览器需要 -webkit- 供应商前缀。在这里检查：http: //caniuse.com/#feat=css-animation
回答by Vishnuraj V
Use jQuery
使用 jQuery
html
html
<div id="b"> </div>
css
css
div#b {
position: fixed;
top:40px;
left:0;
width: 40px;
height: 40px;
background: url(http://www.wiredforwords.com/IMAGES/FlyingBee.gif) 0 0 no-repeat;
}
script
脚本
var b = function($b,speed){
$b.animate({
"left": "50%"
}, speed);
};
$(function(){
b($("#b"), 5000);
});
see jsfiddle http://jsfiddle.net/vishnurajv/Q4Jsh/
见 jsfiddle http://jsfiddle.net/vishnurajv/Q4Jsh/
