CSS Box Sizing animation effect
CSS Box Sizing animation
This animation alternates the box-sizing model between border-box and content-box. The fixed width and height make it easy to compare how borders and padding contribute to the rendered size.
<style>
.box-sizing {
/* Uncomment as needed. */
/* width: 100px; */
/* height: 100px; */
/* background-color: deeppink; */
}
.box-sizing::after {
content: 'A';
position: absolute;
z-index:20;
color: black;
font-size:24px;
font-weight:bold;
animation-name: box-sizing;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
/* For box-sizing to take effect we need to
specify a width and height*/
width:42px;
height:37px;
border:3px solid black;
outline:2px solid deeppink;
padding:5px;
/*display:flex;
align-items:center;
justify-content:center;*
text-shadow:1px 0 3px aqua;*/
}
@keyframes box-sizing {
0% { box-sizing: border-box; }
20% { box-sizing: content-box;}
40% { box-sizing: border-box;}
60% { box-sizing: content-box; }
80% { box-sizing: border-box; }
100% { box-sizing: content-box; }
}
</style> Animation effects source code licensed under the MIT License