Ajax Loader
×
HTML
<div class="d1"></div>
1
<div class="d1"></div>
2
<div class="d2"></div>
 
CSS
.d1 {
1
.d1 {
2
  display:inline;
3
  float:left;
4
  width:200px;
5
  height:100px;
6
  background:url(http://www.maracujaminds.de/images/m.jpg)center left;
7
  animation: roll-in 20s linear infinite;
8
  animation-play-state: running;
9
}
10
.d2 {
11
  display:inline;
12
  float:left;
13
  width:200px;
14
  height:100px;
15
  background:url(http://www.maracujaminds.de/images/m.jpg)center right;
16
  -moz-transform: scaleX(-1);
17
  animation: roll-in 20s linear infinite;
18
  animation-play-state: running;
19
}
20
@keyframes roll-in {
21
0% {background-position: bottom left;}
22
100% {background-position: top right;}
23
}
 

keyy

CSSDeck G+