使用 CSS3 在屏幕上移动图像答案

【问题标题】：Move image across screen with CSS3使用 CSS3 在屏幕上移动图像
【发布时间】：2014-06-04 17:56:12
【问题描述】：

我已经浏览网页很长一段时间了，试图找到一种在加载页面时让图标移动到屏幕上的方法（从左侧到 body div 的中心）。如何才能做到这一点？

这是我目前所拥有的：

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()
}

【问题讨论】：

标签： image css animation transition

【解决方案1】：

如果您想要一个纯 CSS 解决方案，您可以使用 CSS3 动画功能。您可以使用关键字 @animation 创建或声明动画，后跟要为该动画指定的名称。在大括号内，您必须指出动画的关键帧以及将在该关键帧中应用的 CSS 属性，这样就完成了关键帧之间的过渡。您必须使用关键字from 和to 指定至少两个关键帧，动画的开始和结束，然后是大括号内的属性。例如：

@keyframes myanimation
{
    from {
        left: 0;
    }
    to {
        left: 50%;
    }
}

或者一个包含三个关键帧的例子（百分比表示持续时间的百分比）：

@keyframes myanimation
{
    0% {
        left: 0;
    }
    10% {
        left: 50%;
    }
    100% {
        left: 10%;
    }
}

创建动画后，您必须指定要为哪个元素设置动画，它只是与元素匹配的 CSS 规则中的 animation 属性。请注意，值中的名称必须与您之前创建的名称以及动画的持续时间相匹配。例如：

a#rotator {
    animation: myanimation 5s;
}

您可以在此处指定持续时间、必须重复的次数等。您可以在此处阅读完整规范：http://www.w3.org/TR/css3-animations/

在这里您可以看到一个使用您提供的代码的工作示例：http://jsfiddle.net/mcSL7/1/

我已经停止浮动元素，并为它分配了绝对位置，所以我可以使用 top 和 left 属性在 body 中移动它。

几乎所有现代浏览器都支持此 CSS 功能，即使其中一些需要 -webkit- 供应商前缀。在这里查看：http://caniuse.com/#feat=css-animation

【讨论】：

谢谢！这很有帮助。只是想知道如何一次处理 5 张图片而不是一张？
如果您同时想要所有五个，请将相同的类应用于五个图像并将动画应用于类规则：http://jsfiddle.net/5q5DQ/1/。如果您希望它们在不同的时间进行动画处理，请给它们 id 并为每个应用不同的延迟，并注意动画属性中的值 forwards，这使得元素仍处于最后一帧位置：http://jsfiddle.net/u5EW6/1/跨度>
嗨@pablopixel，我正在尝试在 3D 中执行此操作。我尝试了一些我在网上找到的例子，但是我很难让它们工作。如果您可以展示如何将此示例转换为 3D，那么我将能够将其应用于我的示例。问候，格林
嗨@Glyn，你是说CSS 3D 变换吗？你都尝试了些什么？你能提供一个小提琴吗？
嗨@pablopixel，经过大量实验，我找到了解决方案。请参阅“stackoverflow.com/questions/26667081/…”。简而言之，我将图像添加到面板并旋转面板。问候，格林。

【解决方案2】：

使用 jQuery

html

<div id="b">&nbsp;</div>

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;
}

脚本

var b = function($b,speed){


    $b.animate({
        "left": "50%"
    }, speed);
};

$(function(){
    b($("#b"), 5000);
});

见 jsfiddle http://jsfiddle.net/vishnurajv/Q4Jsh/

【讨论】：