CSS Animation - Grow from center (Zoom from center dot to full container)
You should use transform in the animation for better performance and more control. Then you won't have to repeat the static px values, and you can use transform-origin to control where the transform happens. scale() will scale from the center by default.
div {
background: red;
animation: createBox .25s;
width: 98px; height: 98px;
}
@keyframes createBox {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}<div></div>Here's a full-size example. I created it for myself, while playing around with Michael Coker's StackSnippet - but thought I'd share after all.
/* Look Carefully: This is NOT jQuery */
const $ = document.querySelector.bind(document);
$('button').addEventListener("click", function() {
$('button').style.display = 'none';
$('div').style.display = 'block';
});/* All You Need */
p {
position: absolute;
top:0;
left:0;
margin:0;
background: red;
animation: createBox .5s;
width: 100vw; height: 100vh;
}
@keyframes createBox {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
/* Extras for this Demo */
body{margin:0;} /* Required for StackSnippet Container */
div{
display:none;
margin: 0;
padding: 0;
position: relative;
width: 100%;
height: 100%;
min-height: 100vh;
max-height: 100vh;
overflow: hidden;
}
p{
display: grid;
place-items: center;
}
aside{
height: 50vh;
display: grid;
place-items: center;
}
button{
padding: 30px;
font-size: 2rem;
}
sup{
font-size: .9rem;
}<div><p>Hit the Run Code Snippet button again to re-run</p></div>
<aside><button>Show Me<br><sup>(Best viewed "Full Page")</sup></button></aside>