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

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

---

请检查下面的小提琴的来回图像动画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)}
    }

---

你可以使用transform css3属性

看到这个例子：http://jsfiddle.net/R65pL/

<span>
    <img src="https://pbs.twimg.com/profile_images/1134660580/Puerco_Potter.jpg" alt="">
</span>


span{
    width: 100%;
    padding: 30px;
    display inline-block;
}
img{
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4se;
    -o-transition: all .4s;
    transition: all .4s;
}
img:hover{
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    -ms-transform: translateX(20px);
    -o-transform: translateX(20px);
    transform: translateX(20px);
}

详情请参阅：http：//www.w3schools.com/css/css3_transitions.asp

---

时钟在这里，请阅读关于css动画的完整指南。

链接地址: http://www.djcxy.com/p/87121.html

上一篇: How to move an image from one position to another with CSS?

下一篇: How to sequentially load images from an AJAX call [Web Development]?