CSS carousel with dissolving images

CSS carousel with dissolving images. Made with pure CSS.

HTML

<div class="scrollable">
    <div class="items">
        <img src="http://farm8.staticflickr.com/7020/6767599565_e0ffee2813_d.jpg" alt="" />
        <img src="http://farm8.staticflickr.com/7016/6767598507_21720ed21f_d.jpg" alt="Seven to ten at Leeds & Holbeck" />
        <img src="http://farm8.staticflickr.com/7163/6767596393_8f8b9609ec_d.jpg" alt="Seven to ten at Leeds & Holbeck" />
    </div>
</div>

CSS

body {
    padding: 1em;
    background: #999
}
.scrollable {
    width: 333px;
    margin: 0 auto;
    padding: 0;
    border:10px solid #fff;
    background: #000;
    position: relative;
    overflow: hidden;
    text-align: center;
}
img {
    max-width: 333px;
    margin: 0;
    display:block;
    position:absolute;
    left:0;
    right:0;
}
img:nth-child(3) {
    -moz-animation: dissolve 15s infinite;
}
img:nth-child(2) {
    -moz-animation: dissolve2 15s infinite;
}
img:nth-child(1) {
    -moz-animation: dissolve3 15s infinite;
}
.items {
    width:333px;
    height: 500px;
    position:relative;
}

@-moz-keyframes dissolve {
  0%   { opacity: 1;}
  26.6666666% { opacity: 1;}
  33.3333333%  { opacity: 0;}
  93.32%  { opacity: 0;}
93.3333333% {opacity: 1;}
100% {opacity: 1;}
}
@-moz-keyframes dissolve2 {
  0%   { opacity: 1;}
  60% { opacity: 1;}
  66.6666667%  { opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes dissolve3 {
  0%   { opacity: 1;}
  93.3333333% { opacity: 1;}
  100%  { opacity: 0;}
}