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

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

Answer 2

您可以使用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

Answer 3

clock Here请阅读有关css动画的完整指南。

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

3 个答案: