Transition animation with CSS - html

Question

I am trying to implement image transition in slide show. I have 4 rectangular boxes fit in a div container. Each box need to disappear the part that is coming into another box area after intersecting with another box as they move. At 100%, each box need to disappear completely.
#keyframes testAnimateOne {
0% {
transform: rotate(0);
transform-origin: bottom right;
opacity: 1;
}
100% {
transform-origin: bottom right;
transform: rotate(90deg);
}
}
#keyframes testAnimateTwo {
0% {
transform: rotate(0);
transform-origin: top right;
opacity: 1;
}
100% {
transform-origin: top right;
transform: rotate(-90deg);
}
}
#keyframes testAnimateThree {
0% {
transform: rotate(0);
transform-origin: bottom left;
opacity: 1;
}
100% {
transform-origin: bottom left;
transform: rotate(-90deg);
}
}
#keyframes testAnimateFour {
0% {
transform-origin: top left;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: top left;
transform: rotate(90deg);
}
}
.layer1 {
width:50%;
height: 43px;
position: absolute;
background-color: black;
animation-name: testAnimateOne;
animation-duration: 5s;
}
.layer2 {
margin-top: 30%;
width: 50%;
height: 43px;
position: absolute;
background-color:black;
animation-name: testAnimateTwo;
animation-duration: 5s;
}
.layer3 {
width: 50%;
height: 50%;
margin-left: 50%;
position: absolute;
background-color: black;
animation-name: testAnimateThree;
animation-duration: 5s;
}
.layer4 {
margin-top: 30%;
margin-left: 50%;
width: 50%;
height: 50%;
position: absolute;
background-color: black;
animation-name: testAnimateFour;
animation-duration: 5s;
}
.container {
width: 140px;
height: 86px;
position: relative;
display: block;
}
<div class="container">
<div class="layer1"></div>
<div class="layer2"></div>
<div class="layer3"></div>
<div class="layer4"></div>
</div>
How is that possible? please help

Answer 1

You can hide the layers completely at the end of the animation by wrapping each in a container and giving those containers the property overflow: hidden so that the layer does not come out on the other side.
Make sure also to apply the sizing and positioning rules to the containers and then have the layers just fill their container completely, have color, and have the animation.
#keyframes testAnimateOne {
0% {
transform: rotate(0);
transform-origin: bottom right;
opacity: 1;
}
100% {
transform-origin: bottom right;
transform: rotate(90deg);
}
}
#keyframes testAnimateTwo {
0% {
transform: rotate(0);
transform-origin: top right;
opacity: 1;
}
100% {
transform-origin: top right;
transform: rotate(-90deg);
}
}
#keyframes testAnimateThree {
0% {
transform: rotate(0);
transform-origin: bottom left;
opacity: 1;
}
100% {
transform-origin: bottom left;
transform: rotate(-90deg);
}
}
#keyframes testAnimateFour {
0% {
transform-origin: top left;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: top left;
transform: rotate(90deg);
}
}
.container {
width: 140px;
height: 86px;
position: relative;
display: block;
}
.layer {
width: 100%;
height: 100%;
background-color: black;
animation-duration: 5s;
animation-fill-mode: both;
}
.layer1-container {
width: 50%;
height: 43px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.layer1-container .layer {
animation-name: testAnimateOne;
}
.layer2-container {
width: 50%;
height: 43px;
position: absolute;
bottom: 0;
left: 0;
overflow: hidden;
}
.layer2-container .layer {
animation-name: testAnimateTwo;
}
.layer3-container {
width: 50%;
height: 50%;
position: absolute;
top: 0;
right: 0;
overflow: hidden;
}
.layer3-container .layer {
animation-name: testAnimateThree;
}
.layer4-container {
width: 50%;
height: 50%;
position: absolute;
bottom: 0;
right: 0;
overflow: hidden;
}
.layer4-container .layer {
animation-name: testAnimateFour;
}
<div class="container">
<div class="layer1-container">
<div class="layer"></div>
</div>
<div class="layer2-container">
<div class="layer"></div>
</div>
<div class="layer3-container">
<div class="layer"></div>
</div>
<div class="layer4-container">
<div class="layer"></div>
</div>
</div>

Answer 2

Wrapping the divs in a container then setting that to overflow: hidden will result in the rotating divs being cut off whenever they would go outside the container. However, if you want the rotating bits to visually jut out from the container, it's a little more complicated.
For some reason, the specs say that when one overflow direction is hidden, the other must either be hidden or auto. This results in us needing to use hacky methods to get the required result. In this case, it's using padding and negative margins to expand the containing divs.
#keyframes rotateClockwise {
0% {transform: rotate(0);}
100% {transform: rotate(90deg);}
}
#keyframes rotateAnticlockwise {
0% {transform: rotate(0);}
100% {transform: rotate(-90deg);}
}
.container {
width: 140px;
height: 86px;
position: relative;
}
.layer {
width: 50%;
height: 100%;
position: absolute;
overflow-x: hidden;
top: 0;
padding: 50% 0 50% 0;
margin: -50% 0 -50% 0;
}
.rotate {
width: 100%;
height: 50%;
background-color: black;
animation-duration: 5s;
}
.layer1 {
left: 0;
}
.layer2 {
left: 50%;
}
.rotate1 {
animation-name: rotateClockwise;
transform-origin: bottom right;
}
.rotate2 {
animation-name: rotateAnticlockwise;
transform-origin: top right;
}
.rotate3 {
animation-name: rotateAnticlockwise;
transform-origin: bottom left;
}
.rotate4 {
animation-name: rotateClockwise;
transform-origin: top left;
}
<div class="container">
<div class="layer layer1">
<div class="rotate rotate1"></div>
<div class="rotate rotate2"></div>
</div>
<div class="layer layer2">
<div class="rotate rotate3"></div>
<div class="rotate rotate4"></div>
</div>
</div>