yun77op/css-containment-layout.html Secret

## css-containment-layout.html
<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>css containment</title>


        <style>
      body {
  padding: 30px;
}

#animate {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: red;
  transition: transform 2s 0s;
  will-change: transform;
}

    </style>


  <button onclick="moveIt()">moveIt</button>


  </head>

  <body>

    <h1>css containment</h1>

<div id="animate_wrap" style="contain:layout; overflow:hidden; position:relative;width:100px;height:200px;">
  <div id="animate"></div>
</div>

    <script>
      function moveIt() {
        document.getElementById('animate').style.top = '10px';
      }
    </script>


  </body>
</html>
	<!DOCTYPE html>
	<html >
	<head>
	<meta charset="UTF-8">
	<title>css containment</title>


	<style>
	body {
	padding: 30px;
	}

	#animate {
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: red;
	transition: transform 2s 0s;
	will-change: transform;
	}

	</style>


	<button onclick="moveIt()">moveIt</button>



	</head>

	<body>

	<h1>css containment</h1>

	<div id="animate_wrap" style="contain:layout; overflow:hidden; position:relative;width:100px;height:200px;">
	<div id="animate"></div>
	</div>

	<script>
	function moveIt() {
	document.getElementById('animate').style.top = '10px';
	}
	</script>


	</body>
	</html>