Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
css containment layout
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment