Pure CSS slideshow

#css

#scale

#animation

#slideshow

#keyframes

#transform

Fade 'n' scale slideshow using CSS transform and @keyframes.

Demo: http://codepen.io/html5web/full/CcEgz

*SASS code: *
.slideshow
position: fixed
width: 100%
height: 100%
top: 0px
left: 0px
z-index: 0
li span
width: 100%
height: 100%
position: absolute
top: 0px
left: 0px
color: transparent
background-size: cover
background-position: 50% 50%
background-repeat: none
opacity: 0
z-index: 0
-webkit-backface-visibility: hidden
-webkit-animation: image 36s linear infinite 0s

li
list-style: none
&:nth-child(1) span
background-image: url(http://iweb.uz/wp-content/uploads/2012/07/registan1.jpg)
&:nth-child(2) span
background-image: url(http://iweb.uz/wp-content/uploads/2012/07/registan2.jpg)
-webkit-animation-delay: 6s
&:nth-child(3) span
background-image: url(http://iweb.uz/wp-content/uploads/2012/07/registan3.jpg)
-webkit-animation-delay: 12s
&:nth-child(4) span
background-image: url(http://iweb.uz/wp-content/uploads/2012/07/registan4.jpg)
-webkit-animation-delay: 18s
&:nth-child(5) span
background-image: url(http://iweb.uz/wp-content/uploads/2012/07/registan5.jpg)
-webkit-animation-delay: 24s
&:nth-child(6) span
background-image: url(http://iweb.uz/wp-content/uploads/2012/07/registan6.jpg)

@-webkit-keyframes image
0%
opacity: 0
-webkit-animation-timing-function: ease-in
8%
opacity: 1
-webkit-transform: scale(1.05)
-webkit-animation-timing-function: ease-out
17%
opacity: 1
-webkit-transform: scale(1.1)
25%
opacity: 0
-webkit-transform: scale(1.1)
100%
opacity: 0

** Slim HTML:**