brandomeniconi/css-fade-gallery.php

## css-fade-gallery.php
<?php
function crossfade_css($selector, $count, $showtime=4, $transition=2 ){

	static $instance = 0; $instance++;

	$duration = ($showtime+$transition)*$count; ?>
	<style type="text/css">
		@keyframes crossfade<?php echo $instance ?> {
			0%, <?php echo ceil($showtime/$duration*100); ?>%, 100%  { opacity:1; }
			<?php echo ceil(1/$count*100); ?>%, <?php echo 100-ceil(($transition/$duration)*100); ?>% { opacity:0; }
		}

		<?php echo $selector; ?> {
			animation: crossfade<?php echo $instance ?> <?php echo ($showtime*$count); ?>s ease-in-out infinite;
		}

		<?php for($i=1; $i<=$count; $i++): ?>
		<?php echo $selector; ?>:nth-of-type(<?php echo $i ?>) { animation-delay: <?php echo $showtime*($count-$i) ?>s; }
		<?php endfor; ?>
	</style>
	<?php
} ?>

<?php  ?>
<html>
  <head>
    <title>CSS Native Image Fader</title>
    <style type="text/css">
      #gallery1 {
        height: 500px;
        width: 300px;
      }

      img {
        max-width: 100%:;
      }
    </style>
  </head>
  <body>
    <?php crossfade_css('#gallery1 img', 4, 5, 3); ?>
    <div id="gallery1">
      <img src="https://pixabay.com/get/e831b5082af4023ed1534705fb0938c9bd22ffd41db7144996f0c67aa5/poppy-1447203_1920.jpg" >
      <img src="https://pixabay.com/get/e831b10e2df4083ed1534705fb0938c9bd22ffd41db7144996f0c67ea3/squirrel-1401509_1920.jpg" >
      <img src="https://pixabay.com/get/e836b70729fc063ed1534705fb0938c9bd22ffd41db7144996f0c97ba4/apple-blossoms-1368187_1920.jpg" >
      <img src="https://pixabay.com/get/e836b60b2efd043ed1534705fb0938c9bd22ffd41db7144996f0c970a5/tettigonia-viridissima-1374695_1920.jpg" >
    </div>
  </body>
</html>
	<?php
	function crossfade_css($selector, $count, $showtime=4, $transition=2 ){

	static $instance = 0; $instance++;

	$duration = ($showtime+$transition)*$count; ?>
	<style type="text/css">
	@keyframes crossfade<?php echo $instance ?> {
	0%, <?php echo ceil($showtime/$duration*100); ?>%, 100% { opacity:1; }
	<?php echo ceil(1/$count100); ?>%, <?php echo 100-ceil(($transition/$duration)100); ?>% { opacity:0; }
	}

	<?php echo $selector; ?> {
	animation: crossfade<?php echo $instance ?> <?php echo ($showtime*$count); ?>s ease-in-out infinite;
	}

	<?php for($i=1; $i<=$count; $i++): ?>
	<?php echo $selector; ?>:nth-of-type(<?php echo $i ?>) { animation-delay: <?php echo $showtime*($count-$i) ?>s; }
	<?php endfor; ?>
	</style>
	<?php
	} ?>

	<?php ?>
	<html>
	<head>
	<title>CSS Native Image Fader</title>
	<style type="text/css">
	#gallery1 {
	height: 500px;
	width: 300px;
	}

	img {
	max-width: 100%:;
	}
	</style>
	</head>
	<body>
	<?php crossfade_css('#gallery1 img', 4, 5, 3); ?>
	<div id="gallery1">
	<img src="https://pixabay.com/get/e831b5082af4023ed1534705fb0938c9bd22ffd41db7144996f0c67aa5/poppy-1447203_1920.jpg" >
	<img src="https://pixabay.com/get/e831b10e2df4083ed1534705fb0938c9bd22ffd41db7144996f0c67ea3/squirrel-1401509_1920.jpg" >
	<img src="https://pixabay.com/get/e836b70729fc063ed1534705fb0938c9bd22ffd41db7144996f0c97ba4/apple-blossoms-1368187_1920.jpg" >
	<img src="https://pixabay.com/get/e836b60b2efd043ed1534705fb0938c9bd22ffd41db7144996f0c970a5/tettigonia-viridissima-1374695_1920.jpg" >
	</div>
	</body>
	</html>