I am just wondering whether there is a way to do a background animations in pure CSS3 based design may be with little bit of a HTML5 or jquery ?
i can see some people do this
http://addtwitter-followers.com/
is there easy way to do this in CSS3 ?
CSS
@keyframes animatedBackground {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
}
}
@-webkit-keyframes animatedBackground {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
}
}
@-ms-keyframes animatedBackground {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
}
}
@-moz-keyframes animatedBackground {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
}
}
#wrap {
height:100%;
width:100%;
background: url(http://addtwitter-followers.com/wp-content/themes/twentyten/images/bck.jpg) top no-repeat #94E3F4;
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 150s linear infinite;
-ms-animation: animatedBackground 150s linear infinite;
-moz-animation: animatedBackground 150s linear infinite;
-webkit-animation: animatedBackground 150s linear infinite;
}
HTML
<div id="wrap">...</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.