How to move an image from one position to another with CSS?
I am relatively a newbie in the field of CSS. I have seen the @KEYFRAME element for displaying an animation that moves from one side to another. But I was just wondering how is it possible to move an image(in terms of an animation) that moves from one side to another as the page loads?
All answers are appreciated in advance Thanks
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)}
}
You can use transform css3 property
see this example : 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);
}
see more in : http://www.w3schools.com/css/css3_transitions.asp
时钟在这里，请阅读关于css动画的完整指南。
链接地址: http://www.djcxy.com/p/87122.html