Looking to craft a single animation that will transition elements from the center of the current view back to their original positions.
Unfortunately, CSS animations do not support toggling the display property. This limitation causes the second rectangle in the image below (animated with position:absolute) to remain in the center instead of moving to its starting position.
Are there any solutions using Pure CSS that can achieve this desired effect? Any recommendations or suggestions would be greatly appreciated.
https://i.stack.imgur.com/VXeqN.png
Below are my current attempts:
.instruction-target {
position: relative;
}
.highlight-box {
width: 100px;
height: 20px;
font-weight: bold;
font-size: 2em;
border: solid 5px red;
display: inline-block;
}
.float-highlight-box {
position: absolute;
top: 0;
left: 0;
animation-name: moving-to-target;
animation-duration: 3s;
opacity: 0;
}
@keyframes moving-to-target {
/* animate from: center of current view */
from {
top: 50vh;
left: 50vw;
position: fixed;
opacity: 1;
}
/* animate to: its original position */
to {
top: 0px;
left: 0px;
//position: absolute;
opacity: 0;
}
}<div style="width: 100%; min-height: 400px;border: solid 1px blue">
<a style="position:fixed;top: 50vh; left: 50vw;">CENTER</a>
<button class="instruction-target">
Test1
<span class="highlight-box float-highlight-box"></span>
</button>
<button class="instruction-target" style="margin-left: 400px">
Test2
<span class="highlight-box float-highlight-box"></span>
</button>
</div>