So I'm aiming to have two circles meet from either side of the screen and meet in the middle to perform the second half of the animation (scaling and opacity change).
But by setting the initial keyframe and last using vw they don't meet in the middle - since the vw value is relative to the left side of the div and not the centre (I have used vw as I need this to be responsive). So, what happens is that the left sides of the circle meet in the centre.
Does anyone know a simple fix to this using just css? I am newish to coding, so if the answer is obvious I apologise.
Here is my code:
@keyframes left {
0% {
transform: translate3d(0vw, 50%, 0) scale3d(1, 1, 1);
opacity: 50%;
animation-timing-function: ease-in;
}
60% {
transform: translate3d(50vw, 50%, 0) scale3d(1, 1, 1);
opacity: 50%;
animation-timing-function: ease-out;
}
100% {
transform: translate3d(50vw, 50%, 0) scale3d(2, 2, 1);
opacity: 0%;
animation-timing-function: ease-out;
}
}
@keyframes right {
0% {
transform: translate3d(100vw, 50%, 0) scale3d(1, 1, 1);
opacity: 50%;
animation-timing-function: ease-in;
}
60% {
transform: translate3d(50vw, 50%, 0) scale3d(1, 1, 1);
opacity: 50%;
animation-timing-function: ease-out;
}
100% {
transform: translate3d(50vw, 50%, 0) scale3d(2, 2, 1);
opacity: 0%;
animation-timing-function: ease-out;
}
}
.circleleft {
overflow: hidden;
position: absolute;
background: white;
border-radius: 50%;
width: 500px;
height: 500px;
animation: left 2s;
animation-fill-mode: forwards;
}
.circleright {
overflow: hidden;
position: absolute;
background: white;
border-radius: 50%;
width: 500px;
height: 500px;
animation: right 2s;
animation-fill-mode: forwards;
}
<div style="width:100vw; height:100vh; background-color:#87827E">
<div class="circleleft"></div>
<div class="circleright"></div>
</div>
You can see it in use here too: https://ruairimadine.co.uk/sudoroux
One trick is to initially position both circles in the center and the animation/translation will offset them from the left or right.
I optimized the code to only use pseudo-elements and make it easier to understand: