Transition animation with CSS

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

score 0 · Answer 1 · answered Nov 30 '20 at 22:55

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>

Thanks for your reply and you solution works when I run this on it's own, But when I intergrate with my actual code there is a problem. Problem is when all boxes are rotating there is a diamond shape in the middle (white space - till rotation completes), also at the center both top and bottom - another white space. What could be reason? I am using scss, could it be the reason? — vg527, Dec 01 '20 at 01:23
Not sure (but probably not due to using SCSS), can you share a full working example? Like a fiddle or codepen link? — Henry Woody, Dec 01 '20 at 18:36

score 0 · Answer 2 · answered Nov 30 '20 at 23:08

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>

Transition animation with CSS

2 Answers2