html - 如何使用 CSS 将图像从一个位置移动到另一个位置？

Question

我在 CSS 领域是一个相对新手。我已经看到 @KEYFRAME 元素用于显示从一侧移动到另一侧的动画。但我只是想知道如何在页面加载时移动图像(就动画而言)从一侧移动到另一侧？

提前感谢所有答案谢谢

       div    {    width:100px;    height:100px;    background:red;    position:relative;    -webkit-animation:myfirst 5s; /* Chrome, Safari, Opera */    animation:myfirst 5s;    }    /* Chrome, Safari, Opera */    @-webkit-keyframes myfirst    {    0%   {background:red; left:0px; top:0px;}    25%  {background:yellow; left:200px; top:0px;}    50%  {background:blue; left:200px; top:200px;}    75%  {background:green; left:0px; top:200px;}    100% {background:red; left:0px; top:0px;}    }    /* Standard syntax */    @keyframes myfirst    {    0%   {background:red; left:0px; top:0px;}    25%  {background:yellow; left:200px; top:0px;}    50%  {background:blue; left:200px; top:200px;}    75%  {background:green; left:0px; top:200px;}    100% {background:red; left:0px; top:0px;}    }

Answer 1

请检查以下 fiddle 以获取来回图像动画 http://jsfiddle.net/jHHnN/在 html 中，将类“imganim”应用于图像标签并添加以下 CSS

 .imganim
    {
    width:100px;
    height:100px;
    position:relative;
    -webkit-animation:myfirst 5s infinite; /* Chrome, Safari, Opera */
    animation:myfirst 5s;
    }

    /* Chrome, Safari, Opera */
    @-webkit-keyframes myfirst
    {
    0%   { left:0px; top:0px;-webkit-transform:rotate(0deg)}
    50%  {left:100%; margin-left:-100px;-webkit-transform:rotate(360deg)}
    100% {left:0px; top:0px;-webkit-transform:rotate(0deg)}
    }

    /* Standard syntax */
    @keyframes myfirst
    {
    0%   { left:0px; top:0px;transform:rotate(0deg)}
    50%  {left:100%; margin-left:-100px;transform:rotate(360deg)}
    100% {left:0px; top:0px;transform:rotate(0deg)}
    }