deguchi/slider animation

## slider animation
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Noto Sans JP", "ＭＳ Ｐゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
            overflow: hidden;
            padding: 0;
            margin: 0;
        }

        @-webkit-keyframes sliderIndex {
            0% {
                opacity: 0;
            }
            70% {
                opacity: 1;
            }
            100% {
                -webkit-transform: scale(1.05) rotate(0.01deg);
                transform: scale(1.05) rotate(0.01deg);
                opacity: 0;
            }
        }

        @keyframes sliderIndex {
            0% {
                opacity: 0;
            }
            70% {
                opacity: 1;
            }
            100% {
                -webkit-transform: scale(1.05) rotate(0.01deg);
                transform: scale(1.05) rotate(0.01deg);
                opacity: 0;
            }
        }

        .slider {
            position: relative;
            height: 100%;
        }

        .slider>img {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }

        @media screen and (max-width: 768px) {
            .hero {
                height: 100vw;
            }
            .slider>img {
                width: 150%;
                height: 100%;
                margin-left: -25%;
            }
        }

        .slider>img.animation {
            display: block;
            -webkit-animation: sliderIndex 8s ease 0s forwards;
            animation: sliderIndex 8s ease 0s forwards;
        }
    </style>
</head>

<body>
    <div class="hero">
        <div class="slider">
            <img src="https://thinkcorp.netlify.com/assets/top/hero-1.jpg" alt="">
            <img src="https://thinkcorp.netlify.com/assets/top/hero-2.jpg" alt="">
            <img
                src="https://thinkcorp.netlify.com/assets/top/hero-3.jpg" alt="">
            <img src="https://thinkcorp.netlify.com/assets/top/hero-4.jpg" alt="">
            <img
                src="https://thinkcorp.netlify.com/assets/top/hero-5.jpg" alt="">
            <img src="https://thinkcorp.netlify.com/assets/top/hero-6.jpg" alt="">
        </div>
    </div>
    <script>
        var sliderImages = document.querySelectorAll('.slider img');
        var imageCount = sliderImages.length;
        var count = 0;

        function addAnimationClass() {
            Array.prototype.slice.call(sliderImages).map(function (sliderImage, index) {
                if (count === index) {
                    sliderImage.classList.add('animation');
                    setTimeout(function () {
                        sliderImage.classList.remove('animation');
                    }, 8000);
                }
            });
            if (count === imageCount - 1) {
                count = 0;
            } else {
                count += 1;
            }
        }

        setTimeout(function () {
            addAnimationClass();
            setInterval(addAnimationClass, 6000);
        }, 1500);
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	html, body {
	width: 100%;
	height: 100%;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Noto Sans JP", "ＭＳＰゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	overflow: hidden;
	padding: 0;
	margin: 0;
	}

	@-webkit-keyframes sliderIndex {
	0% {
	opacity: 0;
	}
	70% {
	opacity: 1;
	}
	100% {
	-webkit-transform: scale(1.05) rotate(0.01deg);
	transform: scale(1.05) rotate(0.01deg);
	opacity: 0;
	}
	}

	@keyframes sliderIndex {
	0% {
	opacity: 0;
	}
	70% {
	opacity: 1;
	}
	100% {
	-webkit-transform: scale(1.05) rotate(0.01deg);
	transform: scale(1.05) rotate(0.01deg);
	opacity: 0;
	}
	}

	.slider {
	position: relative;
	height: 100%;
	}

	.slider>img {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	}

	@media screen and (max-width: 768px) {
	.hero {
	height: 100vw;
	}
	.slider>img {
	width: 150%;
	height: 100%;
	margin-left: -25%;
	}
	}

	.slider>img.animation {
	display: block;
	-webkit-animation: sliderIndex 8s ease 0s forwards;
	animation: sliderIndex 8s ease 0s forwards;
	}
	</style>
	</head>

	<body>
	<div class="hero">
	<div class="slider">
	<img src="https://thinkcorp.netlify.com/assets/top/hero-1.jpg" alt="">
	<img src="https://thinkcorp.netlify.com/assets/top/hero-2.jpg" alt="">
	<img
	src="https://thinkcorp.netlify.com/assets/top/hero-3.jpg" alt="">
	<img src="https://thinkcorp.netlify.com/assets/top/hero-4.jpg" alt="">
	<img
	src="https://thinkcorp.netlify.com/assets/top/hero-5.jpg" alt="">
	<img src="https://thinkcorp.netlify.com/assets/top/hero-6.jpg" alt="">
	</div>
	</div>
	<script>
	var sliderImages = document.querySelectorAll('.slider img');
	var imageCount = sliderImages.length;
	var count = 0;

	function addAnimationClass() {
	Array.prototype.slice.call(sliderImages).map(function (sliderImage, index) {
	if (count === index) {
	sliderImage.classList.add('animation');
	setTimeout(function () {
	sliderImage.classList.remove('animation');
	}, 8000);
	}
	});
	if (count === imageCount - 1) {
	count = 0;
	} else {
	count += 1;
	}
	}

	setTimeout(function () {
	addAnimationClass();
	setInterval(addAnimationClass, 6000);
	}, 1500);
	</script>
	</body>

	</html>