JSFiddle - React, Tailwind, and code Playground

by Christian Bonato

HTML

<div ng-app="myApp">			
<div id="CSS3Slideshow" ng-controller='myappcontroller'>
					<img data-ng-repeat="counter in $scope.images" class="img{{::counter}}" ng-src="">counter : {{counter}}
				</div>
        </div>

CSS

@-webkit-keyframes fade {
	0% { opacity:0; -webkit-transform:translate(0px,0px) scale(0.93); }
	5% { opacity:1;  }
	25% { opacity:1;  }
	30% { opacity:0; -webkit-transform:translate(0px,0px) scale(1.0); } 
}

@-webkit-keyframes fade_start_opaque {
	0% { opacity:0; -webkit-transform:translate(0px,0px) scale(0.93); }
	5% { opacity:1;  }
	25% { opacity:1;  }
	30% { opacity:0; -webkit-transform:translate(0px,0px) scale(1.0); } 
}

@-webkit-keyframes fade_start_opaque_alt {
	0% { opacity:0; -webkit-transform:translate(0px,0px) scale(0.93); }
	// 3% { opacity:1;  }
	5% { opacity:1;  }
	25% { opacity:1;  }
	30% { opacity:0; -webkit-transform:translate(0px,0px) scale(1.0); } 
}


@-moz-keyframes fade {
	0% { opacity:0; -webkit-transform:translate(0px,0px) scale(0.93); }
	5% { opacity:1;  }
	25% { opacity:1;  }
	30% { opacity:0; -moz-transform:translate(0px,0px) scale(1.0); } 
}

@-moz-keyframes fade_start_opaque {
	0% { opacity:0; -webkit-transform:translate(0px,0px) scale(0.93); }
	5% { opacity:1;  }
	25% { opacity:1;  }
	30% { opacity:0; -moz-transform:translate(0px,0px) scale(1.0); } 
}


#CSS3Slideshow, #CSS3Slideshow img 
{ 
    position:absolute 
}

#CSS3Slideshow 
{ 
	overflow:hidden;
	width:100%; 
	height:100%;

	background-color: $color3;
}


#CSS3Slideshow img 
{ 


	left: -10%;
	top: -10%;

	height: 100vh;
	width: auto;

	opacity:0; 

}


/* 20s : 20s; // MUST BE A MULTIPLE OF THE NUMBER OF SLIDES, USUALLY 4 */




#CSS3Slideshow .img1 {
 	opacity: 1;
 	-webkit-animation:fade_start_opaque_alt 20s linear infinite; 
 	-moz-animation:fade_start_opaque 20s linear infinite; 
 		-webkit-animation-delay:0s; -moz-animation-delay:0s;

}

#CSS3Slideshow .img2 {
	-webkit-animation:fade 20s linear infinite; 
	-moz-animation:fade 20s linear infinite; 
	-webkit-animation-delay:5s; -moz-animation-delay:5s;
}

#CSS3Slideshow .img3 {
 	-webkit-animation:fade 20s linear infinite; 
	-moz-animation:fade 20s linear infinite; 
	-webkit-animation-delay:10s;...

JavaScript

var app = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});


app.controller('myappcontroller', function($scope) {
$scope.images = [];
    $scope.images.push('http://rollingout.com/wp-content/uploads/2013/06/prince.jpg');
    
 $scope.images.push('http://static.guim.co.uk/sys-images/Music/Pix/pictures/2011/6/3/1307115506503/Prince-performing-on-stag-007.jpg');
    
     $scope.images.push('http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/background-wallpapers-23.jpg');
    
     $scope.images.push('http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/background-wallpapers-23.jpg');
});