Fade ‘n’ escala slideshow usando CSS transform e @keyframes.
Demo: http://codepen.io/html5web/full/CcEgz
* Código SASS: *
.slideshow
position: fixed
width: 100%
height: 100%
top: 0px
left: 0px
z-index: 0
li span
width: 100%
height: 100%
position: absoluto
top: 0px
left: 0px
color:
tamanho do fundo transparente :
posição do fundo da capa : 50% 50%
repetição do fundo: nenhuma
opacidade: 0
Z-index: 0
-webkit-backface-visibility: oculto
-webkit-animation: imagem 36s linear infinito 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: Easy-in
8%
opacity: 1
-webkit-transform: scale (1.05)
-webkit-animation-timing-function: Easy-out
17 %
opacidade: 1
-webkit-transform: scale (1,1)
25%
opacidade: 0
-webkit-transform: scale (1,1)
100%
opacity: 0
** HTML fino: **
ul.slideshow
li
span
li
span
li
span
li
span
li
span
li
span