Transition images on different sequences

by neoswf

HTML

<img class="img0" src="https://api.ideassync.com/fs/default/file/c0561f6fa1e32077b1cd7037054f889e29bb9dd9eee49352a8ddb528fd3ad534/1/thumbnail/preview?token=cdzr4l8gudx81zxhcs3y24dodcxzjzwe&api-version=1" />
<img class="img1" src="https://api.ideassync.com/fs/default/file/8c20ac1f350fd2e6376d7c1ad9fb2d8fb6c0e58322ed1d7f92555a083ac0fca8/1/thumbnail/preview?token=cdzr4l8gudx81zxhcs3y24dodcxzjzwe&api-version=1" />
<img class="img2" src="https://api.ideassync.com/fs/default/file/15743bdfa30cb79ef8ee24ae3823d5ce07bf4ec6bc90c7e2b440a9c9aef6b8ff/1/thumbnail/preview?token=cdzr4l8gudx81zxhcs3y24dodcxzjzwe&api-version=1" />
<img class="img0" src="https://api.ideassync.com/fs/default/file/3efe72782fec998a6d4572d7eea0f88a50f683f71cd7f142adcc1a45d6e059a1/1/thumbnail/preview?token=cdzr4l8gudx81zxhcs3y24dodcxzjzwe&api-version=1" />
<img class="img1" src="https://api.ideassync.com/fs/default/file/a3fcce93dbd069a000f6b63162eda5ef4fd8a24eb27721b32723a895dcf761c2/1/thumbnail/preview?token=cdzr4l8gudx81zxhcs3y24dodcxzjzwe&api-version=1" />
<img class="img2" src="https://api.ideassync.com/fs/default/file/c0561f6fa1e32077b1cd7037054f889e29bb9dd9eee49352a8ddb528fd3ad534/1/thumbnail/preview?token=cdzr4l8gudx81zxhcs3y24dodcxzjzwe&api-version=1" />

CSS

img{height:100px}

.img0 {
    -moz-animation: 45s linear 0s normal none infinite myKeyFrameName0;
}
.img1 {
    -moz-animation: 45s linear 0s normal none infinite myKeyFrameName1;
}
.img2 {
    -moz-animation: 45s linear 0s normal none infinite myKeyFrameName2;
}

@-moz-keyframes myKeyFrameName0 {
0%   {opacity: 0;}
2%   {opacity: 1;}
32%  {opacity: 1;}
34%  {opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes myKeyFrameNamee1 {
0%   {opacity: 0;}
33%  {opacity: 0;}
35%  {opacity: 1;}
65%  {opacity: 1;}
67%  {opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes myKeyFrameName2 {
0%   {opacity: 0;}
66%  {opacity: 0;}
68%  {opacity: 1;}
98%  {opacity: 1;}
100% {opacity: 0;}
}