html动态特效代码,文字的动态html效果详细介绍

.div1{
height:300px;
background-image: url(TYPanorama.jpg);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 10s linear infinite;
-moz-animation: animatedBackground 10s linear infinite;
-o-animation: animatedBackground 10s linear infinite;
}
@-webkit-keyframes animatedBackground {
0% { background-position: 0 0; }
12% { background-position: 60% 0; }
25% { background-position: 120% 0; }
38% { background-position: 60% 0; }
50% {background-position: 0 0; }
62% {background-position: -60% 0; }
75% {background-position: -120% 0; }
88% {background-position: -60% 0; }
100% {background-position: 0 0; }
}
@-moz-keyframes animatedBackground {
0% { background-position: 0 0; }
12% { background-position: 60% 0; }
25% { background-position: 120% 0; }
38% { background-position: 60% 0; }
50% {background-position: 0 0; }
62% {background-position: -60% 0; }
75% {background-position: -120% 0; }
88% {background-position: -60% 0; }
100% {background-position: 0 0; }
}
@-o-keyframes animatedBackground {
0% { background-position: 0 0; }
12% { background-position: 60% 0; }
25% { background-position: 120% 0; }
38% { background-position: 60% 0; }
50% {background-position: 0 0; }
62% {background-position: -60% 0; }
75% {background-position: -120% 0; }
88% {background-position: -60% 0; }
100% {background-position: 0 0; }
}
@keyframes animatedBackground {
0% { background-position: 0 0; }
12% { background-position: 60% 0; }
25% { background-position: 120% 0; }
38% { background-position: 60% 0; }
50% {background-position: 0 0; }
62% {background-position: -60% 0; }
75% {background-position: -120% 0; }
88% {background-position: -60% 0; }
100% {background-position: 0 0; }
}

HTML Canvas Animations Demo - By Gloomy Fish

Play Animations