<div class="wrapper">
<button class="accelerated box"></button>
<button class="janky box"></button>
</div>
.box {
width: 50px;
height: 50px;
border: none;
border-radius: 4px;
outline-offset: 4px;
}
.box:first-of-type {
margin-right: 16px;
}
.wrapper {
display: flex;
}
.accelerated.box {
transition: transform 750ms;
will-change: transform;
background-color: slateblue;
}
.accelerated.box:hover,
.accelerated.box:focus {
transform: translateY(10px);
}
.janky.box {
transition: margin-top 750ms;
will-change: margin-top;
background-color: deeppink;
}
.janky.box:hover,
.janky.box:focus {
margin-top: 10px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.