Combining zoom and rotation can make a beautiful transition effect for your site slider. The following code is an automatic slider; which means a slider with automatic transition effect. It is made of just CSS and HTML and get the full page width.
HTML
<!-- This script got from www.devanswer.com -->
<div id="CrossFade">
<img src="http://devanswer.com/codes/files/fruit1.jpg" alt="img"/>
<img src="http://devanswer.com/codes/files/fruit2.jpg" alt="img"/>
<img src="http://devanswer.com/codes/files/fruit3.jpg" alt="img"/>
<img src="http://devanswer.com/codes/files/fruit4.jpg" alt="img"/>
<div class="intro">
<h1>Fruits are Tasty!</h1>
<p>Which fruit do you like? Which fruit do you eat? Select your desire fruit! Share your desire fruit image and make your fruity friends!</p>
</div>
</div>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100,700,900&subset=latin,cyrillic'><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
font-size: calc(0.5vw + 1vh + 0.5vmin);
}
body {
font: 100 50%/1.5 'Roboto', sans-serif;
}
.intro {
position: relative;
margin: 2em;
padding: 0.2em 0.6em;
cursor: pointer;
color: #fff;
font-size: 2em;
max-width: 26em;
}
.intro h1 {
margin-bottom: 0.5em;
line-height: 1;
font-weight: 100;
}
#CrossFade {
background: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
height: 100vh;
overflow: hidden;
position: relative;
}
#CrossFade img {
position: absolute;
min-width: 100%;
min-height: 100%;
height: auto;
background: #000;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
opacity: 0;
-webkit-transform: scale(1.4) rotate(12deg);
transform: scale(1.4) rotate(12deg);
-webkit-animation: CrossFade 24s infinite;
animation: CrossFade 24s infinite;
}
#CrossFade img:nth-child(3) {
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
#CrossFade img:nth-child(2) {
-webkit-animation-delay: 12s;
animation-delay: 12s;
}
#CrossFade img:nth-child(1) {
-webkit-animation-delay: 18s;
animation-delay: 18s;
}
/*
$duration = 12
$slides = 4
$step = $duration/$slides
setDelayRevers($duration, $slides)
for index in (2..$slides)
&:nth-child({index -1})
animation-delay ($step*index)s
#CrossFade
height 100vh
overflow hidden
position relative
display flex
img
align-self center
position absolute
min-width 100%
min-height 100%
height auto
backface-visibility hidden
opacity 0
transform scale(1.4) rotate(12deg)
animation CrossFade ($duration)s infinite
setDelayRevers($duration, $slides)
@keyframes CrossFade
25%
opacity 1
transform scale(1) rotate(0)
40%
opacity 0
*/
@-webkit-keyframes CrossFade {
25% {
opacity: 1;
-webkit-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
40% {
opacity: 0;
}
}
@keyframes CrossFade {
25% {
opacity: 1;
-webkit-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
40% {
opacity: 0;
}
}
