#stapel { width: 736px; height: 416px; margin: 2em auto 0; border: 5px solid #eee; box-shadow: 1px 1px 5px 2px #777; }
#stapel img { position: absolute; width: 736px; height: 416px; }
#stapel img { position: absolute; width: 736px; height: 416px; opacity: 0; animation: 60s ease-in-out infinite; }
#stapel img:nth-of-type(1)  { animation-name: fade00; }
#stapel img:nth-of-type(2)  { animation-name: fade01; }
#stapel img:nth-of-type(3)  { animation-name: fade02; }
#stapel img:nth-of-type(4)  { animation-name: fade03; }
#stapel img:nth-of-type(5)  { animation-name: fade04; }
#stapel img:nth-of-type(6)  { animation-name: fade05; }
#stapel img:nth-of-type(7)  { animation-name: fade06; }
#stapel img:nth-of-type(8)  { animation-name: fade07; }
#stapel img:nth-of-type(9)  { animation-name: fade08; }
#stapel img:nth-of-type(10) { animation-name: fade09; }
#stapel img:nth-of-type(11) { animation-name: fade10; }
#stapel img:nth-of-type(12) { animation-name: fade11; }

@keyframes fade00 {
     0% {opacity:1;}
    10% {opacity:0;}
    20% {opacity:0;}
    30% {opacity:0;}
    40% {opacity:0;}
    50% {opacity:0;}
    60% {opacity:0;}
    70% {opacity:0;}
    80% {opacity:0;}
    90% {opacity:0;}
   100% {opacity:0;}
}

@keyframes fade01 {
     0% {opacity:1;}
    10% {opacity:1;}
    20% {opacity:0;}
    30% {opacity:0;}
    40% {opacity:0;}
    50% {opacity:0;}
    60% {opacity:0;}
    70% {opacity:0;}
    80% {opacity:0;}
    90% {opacity:0;}
   100% {opacity:0;}
}

@keyframes fade02 {
     0% {opacity:0;}
    10% {opacity:1;}
    20% {opacity:1;}
    30% {opacity:0;}
    40% {opacity:0;}
    50% {opacity:0;}
    60% {opacity:0;}
    70% {opacity:0;}
    80% {opacity:0;}
    90% {opacity:0;}
   100% {opacity:0;}
}

@keyframes fade03 {
     0% {opacity:0;}
    10% {opacity:0;}
    20% {opacity:1;}
    30% {opacity:1;}
    40% {opacity:0;}
    50% {opacity:0;}
    60% {opacity:0;}
    70% {opacity:0;}
    80% {opacity:0;}
    90% {opacity:0;}
   100% {opacity:0;}
}

@keyframes fade04 {
     0% {opacity:0;}
    10% {opacity:0;}
    20% {opacity:0;}
    30% {opacity:1;}
    40% {opacity:1;}
    50% {opacity:0;}
    60% {opacity:0;}
    70% {opacity:0;}
    80% {opacity:0;}
    90% {opacity:0;}
   100% {opacity:0;}
}

@keyframes fade05 {
     0% {opacity:0;}
    10% {opacity:0;}
    20% {opacity:0;}
    30% {opacity:0;}
    40% {opacity:1;}
    50% {opacity:1;}
    60% {opacity:0;}
    70% {opacity:0;}
    80% {opacity:0;}
    90% {opacity:0;}
   100% {opacity:0;}
}

@keyframes fade06 {
     0% {opacity:0;}
    10% {opacity:0;}
    20% {opacity:0;}
    30% {opacity:0;}
    40% {opacity:0;}
    50% {opacity:1;}
    60% {opacity:1;}
    70% {opacity:0;}
    80% {opacity:0;}
    90% {opacity:0;}
   100% {opacity:0;}
}

@keyframes fade07 {
     0% {opacity:0;}
    10% {opacity:0;}
    20% {opacity:0;}
    30% {opacity:0;}
    40% {opacity:0;}
    50% {opacity:0;}
    60% {opacity:1;}
    70% {opacity:1;}
    80% {opacity:0;}
    90% {opacity:0;}
   100% {opacity:0;}
}

@keyframes fade08 {
     0% {opacity:0;}
    10% {opacity:0;}
    20% {opacity:0;}
    30% {opacity:0;}
    40% {opacity:0;}
    50% {opacity:0;}
    60% {opacity:0;}
    70% {opacity:1;}
    80% {opacity:1;}
    90% {opacity:0;}
   100% {opacity:0;}
}

@keyframes fade09 {
     0% {opacity:0;}
    10% {opacity:0;}
    20% {opacity:0;}
    30% {opacity:0;}
    40% {opacity:0;}
    50% {opacity:0;}
    60% {opacity:0;}
    70% {opacity:0;}
    80% {opacity:1;}
    90% {opacity:1;}
   100% {opacity:0;}
}

@keyframes fade10 {
     0% {opacity:0;}
    10% {opacity:0;}
    20% {opacity:0;}
    30% {opacity:0;}
    40% {opacity:0;}
    50% {opacity:0;}
    60% {opacity:0;}
    70% {opacity:0;}
    80% {opacity:0;}
    90% {opacity:1;}
   100% {opacity:1;}
}

@keyframes fade11 {
     0% {opacity:1;}
    10% {opacity:0;}
    20% {opacity:0;}
    30% {opacity:0;}
    40% {opacity:0;}
    50% {opacity:0;}
    60% {opacity:0;}
    70% {opacity:0;}
    80% {opacity:0;}
    90% {opacity:0;}
   100% {opacity:1;}
}

@keyframes fade00 {
     0%, 10%, 100% {opacity:1;}
    20%, 90%       {opacity:0;}
}

@keyframes fade01 {
     0%, 0%, 10%, 100%  {opacity:0;}
     0%, 0%             {opacity:1;}
}

@keyframes fade02 {
     0%, 0%, 20%, 100%  {opacity:0;}
     0%, 10%            {opacity:1;}
}

@keyframes fade03 {
     0%, 0%, 30%, 100%  {opacity:0;}
    10%, 20%            {opacity:1;}
}

@keyframes fade04 {
     0%, 10%, 40%, 100% {opacity:0;}
    20%, 30%            {opacity:1;}
}

@keyframes fade05 {
     0%, 20%, 50%, 100% {opacity:0;}
    30%, 40%            {opacity:1;}
}

@keyframes fade06 {
     0%, 30%, 60%, 100% {opacity:0;}
    40%, 50%            {opacity:1;}
}

@keyframes fade07 {
     0%, 40%, 70%, 100% {opacity:0;}
    50%, 60%            {opacity:1;}
}

@keyframes fade08 {
     0%, 50%, 80%, 100% {opacity:0;}
    60%, 70%            {opacity:1;}
}

@keyframes fade09 {
     0%, 60%, 90%, 100% {opacity:0;}
    70%, 80%            {opacity:1;}
}

@keyframes fade10 {
     0%, 70%, 100%, 100% {opacity:0;}
    80%, 90%             {opacity:1;}
}

@keyframes fade11 {
     0%, 80%, 100%, 100% {opacity:0;}
    90%, 100%            {opacity:1;}
}


#stapel { width: 736px; height: 416px; margin: 2em auto 0; border: 0px solid #eee; box-shadow: 1px 1px 5px 2px #777; }
#stapel img { position: absolute; width: 736px; height: 416px; opacity: 0; }
#stapel img:nth-of-type(1)  { animation: fade 60s 0s  ease-in-out infinite; }
#stapel img:nth-of-type(2)  { animation: fade 60s 5s  ease-in-out infinite; }
#stapel img:nth-of-type(3)  { animation: fade 60s 10s ease-in-out infinite; }
#stapel img:nth-of-type(4)  { animation: fade 60s 15s ease-in-out infinite; }
#stapel img:nth-of-type(5)  { animation: fade 60s 20s ease-in-out infinite; }
#stapel img:nth-of-type(6)  { animation: fade 60s 25s ease-in-out infinite; }
#stapel img:nth-of-type(7)  { animation: fade 60s 30s ease-in-out infinite; }
#stapel img:nth-of-type(8)  { animation: fade 60s 35s ease-in-out infinite; }
#stapel img:nth-of-type(9)  { animation: fade 60s 40s ease-in-out infinite; }
#stapel img:nth-of-type(10) { animation: fade 60s 45s ease-in-out infinite; }
#stapel img:nth-of-type(11) { animation: fade 60s 50s ease-in-out infinite; }
#stapel img:nth-of-type(12) { animation: fade 60s 55s ease-in-out infinite; }

@keyframes fade {
    3.33%, 8.33%          {opacity:1;}
       0%, 15%, 100% {opacity:0;}
}

#stapel img:nth-of-type(1)  { -webkit-animation: fade 60s 0s  ease-in-out infinite; animation: fade 60s 0s  ease-in-out infinite; }
#stapel img:nth-of-type(2)  { -webkit-animation: fade 60s 5s  ease-in-out infinite; animation: fade 60s 5s  ease-in-out infinite; }
#stapel img:nth-of-type(3)  { -webkit-animation: fade 60s 10s ease-in-out infinite; animation: fade 60s 10s ease-in-out infinite; }
#stapel img:nth-of-type(4)  { -webkit-animation: fade 60s 15s ease-in-out infinite; animation: fade 60s 15s ease-in-out infinite; }
#stapel img:nth-of-type(5)  { -webkit-animation: fade 60s 20s ease-in-out infinite; animation: fade 60s 20s ease-in-out infinite; }
#stapel img:nth-of-type(6)  { -webkit-animation: fade 60s 25s ease-in-out infinite; animation: fade 60s 25s ease-in-out infinite; }
#stapel img:nth-of-type(7)  { -webkit-animation: fade 60s 30s ease-in-out infinite; animation: fade 60s 30s ease-in-out infinite; }
#stapel img:nth-of-type(8)  { -webkit-animation: fade 60s 35s ease-in-out infinite; animation: fade 60s 35s ease-in-out infinite; }
#stapel img:nth-of-type(9)  { -webkit-animation: fade 60s 40s ease-in-out infinite; animation: fade 60s 40s ease-in-out infinite; }
#stapel img:nth-of-type(10) { -webkit-animation: fade 60s 45s ease-in-out infinite; animation: fade 60s 45s ease-in-out infinite; }
#stapel img:nth-of-type(11) { -webkit-animation: fade 60s 50s ease-in-out infinite; animation: fade 60s 50s ease-in-out infinite; }
#stapel img:nth-of-type(12) { -webkit-animation: fade 60s 55s ease-in-out infinite; animation: fade 60s 55s ease-in-out infinite; }

@-webkit-keyframes fade {
    3.33%, 8.33%          {opacity:1;}
       0%, 15%, 100% {opacity:0;}
}

@keyframes fade {
    3.33%, 8.33%          {opacity:1;}
       0%, 15%, 100% {opacity:0;}
}