Question 293104 in Html Question posted in
Some basic documentation can be found here.

Html – CSS Animation Transform a div into another

I’m trying to code an animation that transforms one div into another.

For example, if I want to transform div1 into div2, I’d like div1 to get the size, position, rotation and background color of div2.

Here is my first code (without any animation) :

https://jsfiddle.net/53yr7usq/

<!DOCTYPE html>
<style>
.center {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#div1 {
    background-color: red;
    width: 100px;
    height: 100px;
    text-align: center;
}
#div2 {
    position:absolute;
    left:-30px;
    bottom:10px;
    background-color: blue;
    width: 80px;
    height: 120px;
    transform: rotate(-10deg);
}
</style>
<html>
    <body>
        <div class="center">
            <div id="div1">
                <h1>
                    DIV1
                </h1>
            </div>
        </div>
        <div id="div2">
            <h1>
                DIV2
            </h1>
        </div>
    </body>
</html>

So after…

I tried to create an animation with keyframes, but it’s not fluid at all (there’s a jump and the movement isn’t fluid).

https://jsfiddle.net/dnwarojb/2/

<!DOCTYPE html>
<style>
.center {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#div1 {
    background-color: red;
    width: 100px;
    height: 100px;
    text-align: center;
    animation: transformation 2s infinite;
}
#div2 {
    position:absolute;
    left:-30px;
    bottom:10px;
    background-color: blue;
    width: 80px;
    height: 120px;
    transform: rotate(-10deg);
}
@keyframes transformation {
    100% {
        position:absolute;
        left:-30px;
        bottom:10px;
        width: 80px;
        height: 120px;
        background-color: blue;
        transform: rotate(-10deg);
    }
}
</style>
<html>
    <body>
        <div class="center">
            <div id="div1">
                <h1>
                    DIV1
                </h1>
            </div>
        </div>
        <div id="div2">
            <h1>
                DIV2
            </h1>
        </div>
    </body>
</html>

Finally, I thought of using a transform translate but I don’t know how to determine the pixels to translate….

https://jsfiddle.net/9egh5unf/3/

<style>
:root {
--x:-10px;
--y:10px;
}
@keyframes transformation {
    100% {
        width: 80px;
        height: 120px;
        background-color: blue;
        transform: rotate(-10deg) translate(var(--x),var(--y));
    }
}
</style>
<script>
function gap() {
    div1 = "div1"
    div2 = "div2"
    w1_rotate = document.getElementById(div1).getBoundingClientRect().width;
    w1_droit = document.getElementById(div1).clientWidth;
    w_cut = (w1_rotate - w1_droit) / 2

    po_x_2 = (window.innerWidth - w1_rotate) / 2
    
    translate_x = w_cut + po_x_2 + 129.5
    
    h1_rotate = document.getElementById(div1).getBoundingClientRect().height;
    h1_droit = document.getElementById(div1).clientHeight;
    h_cut = (h1_rotate - h1_droit) / 2

    po_y_2 = document.getElementById(div2).getBoundingClientRect().bottom;
    po_y_1 = document.getElementById(div1).getBoundingClientRect().bottom;

    translate_y = po_y_1 - po_y_2 + h_cut

    console.log(translate_x)
    console.log(translate_y)
    //Change CSS Variable with the new translate_x and translate_y
}
</script>

But here again I have a problem: the number of pixels I’m calculating isn’t right, so my translation is wrong…

So I’d like to know if there’s a way of transforming div1 into div2, either without jumping in the animation, or with the right number of pixels for translation.

Thanks a lot!

— Summary of what I tried to do —

So, has I said, I tried to create an animation but it wasn’t fluid/smooth… So I decided to use a transform : translate() to make it smoother but I don’t arrive to find the good X_translation and the good Y_translation

Tags:

2

Answers


  1. 0

    You should change your keyframe you should have a 0% too. you should say what you want to change in 100% block code.

    Login or Signup to reply.
  2. 0

    It seems the principal issue was that div1 was not using absolute positioning like div2, if you change div1 to use absolute positioning with left and bottom, exactly as div2, it doesn’t jump anymore: https://jsfiddle.net/carolhmj/sbtocmqd/6/. I’m not 100% sure what should happen in the browser when animating from an non-absolute to an absolute position, but it’s probably best to avoid this from happening on the first place.

    In the fiddle, div1 is:

    #div1 {
    position: absolute;
    background-color: red;
    width: 100px;
    height: 100px;
    text-align: center;
    left: 260px;
    bottom: 260px;
    animation: transformation 2s infinite;
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search