notcome/transition.html

## transition.html
<!DOCTYPE html>
<html>
<head>
  <title>Transition</title>
  <style type="text/css">
    #container {
      width: 512px;
      margin: auto;
      height: 512px;
      overflow: hidden;
    }
    #wrapper, .image {
      width: 512px;
    }

    #wrapper {
      transition: transform 2s ease 0s;
      height: 512px;
    }
    .image img {
      display: block;
      width: 512px;
      height: 512px;
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="wrapper" style>
      <div class="image"><img id="img1" src="1.png"></div>
      <div class="image"><img id="img2" src="2.png"></div>
      <div class="image"><img id="img3" src="3.png"></div>
      <div class="image"><img id="img4" src="4.png"></div>
      <div class="image"><img id="img5" src="5.png"></div>
      <div class="image"><img id="img6" src="6.png"></div>
    </div>
  </div>

  <script>
    var i = 0;
    wrapper = document.getElementById('wrapper');

    function nextY () {
      i ++;
      if (i == 6)
        i = 0;
      return i * -512;
    }

    setInterval(function() {
      console.log("Hello!");
      wrapper.setAttribute("style", `transform: translateY(${nextY()}px);`);
    }, 3000);
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Transition</title>
	<style type="text/css">
	#container {
	width: 512px;
	margin: auto;
	height: 512px;
	overflow: hidden;
	}
	#wrapper, .image {
	width: 512px;
	}

	#wrapper {
	transition: transform 2s ease 0s;
	height: 512px;
	}
	.image img {
	display: block;
	width: 512px;
	height: 512px;
	}
	</style>
	</head>
	<body>
	<div id="container">
	<div id="wrapper" style>
	<div class="image"><img id="img1" src="1.png"></div>
	<div class="image"><img id="img2" src="2.png"></div>
	<div class="image"><img id="img3" src="3.png"></div>
	<div class="image"><img id="img4" src="4.png"></div>
	<div class="image"><img id="img5" src="5.png"></div>
	<div class="image"><img id="img6" src="6.png"></div>
	</div>
	</div>

	<script>
	var i = 0;
	wrapper = document.getElementById('wrapper');

	function nextY () {
	i ++;
	if (i == 6)
	i = 0;
	return i * -512;
	}

	setInterval(function() {
	console.log("Hello!");
	wrapper.setAttribute("style", `transform: translateY(${nextY()}px);`);
	}, 3000);
	</script>
	</body>
	</html>