css Question posted in
Some basic documentation can be found here.

Css – preserve size of an HTML element at 0% of an animation [RESOLVED]

I’m trying to make an animation in css and for the first frame, so at 0%, I need the size of the element before his data-space attribute change before collapsing something like that.

Something like that

#settings {
    display: grid;
    grid-template-columns: repeat(8, 64px);
    grid-template-rows: repeat(2, 64px);
}

#settings[data-space=collapsed] {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;

}

#settings[data-space=collapsed][data-firstAnimation=false] {
    animation: collapseSettings 1s ease 0s 1 normal none;
}

@keyframes collapseSettings {
    0% {
      width: /*something to get the width before collapsing*/
      height: /*something to get the height before collapsing*/
    }

    /*...*/
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I resolved my issue using JS, before change the attribute data-space to collapsed I save in a JS variable the size of my element then I change the attribute and I start the animation setting the width and the height using CSS variables whitch are set at 0px and just before starting the animation I change value of my variables using the JS function document.documentElement.style.setProperty(). So it give me somthing like that.

    const settings = document.getElementById("settings")

settings.addEventListener("click", () => {
    let width = settings.offsetWidth
    let height = settings.offsetHeight
    document.documentElement.style.setProperty("--width-init", width + "px")
    document.documentElement.style.setProperty("--height-init", height + "px")
    settings.setAttribute("data-space", "collpased")

})
    :root {
    --width-init: 0px;
    --height-init: 0px;
}

#settings {
    width: 50px;
    height: 50px;
    background-color: #f00;
}

#settings[data-space=collpased] {
    animation: settings-collapse 1s ease 0s 1 normal none;
    width: 100px;
    height: 100px;
}

@keyframes settings-collapse {
    0% {
        width: var(--width-init);
        height: var(--height-init);
    }
}
    <div id="settings"></div>


  2. 0

    what you are looking for is most likely animation-fill-mode CSS property.
    using this you can specify how your element will look like after the animation

    so, you can do something like:

    #settings[data-space=collapsed][data-firstAnimation=false] {
    width: /*something to get the width before collapsing*/
    height: /*something to get the height before collapsing*/
    animation: collapseSettings 1s ease 0s 1 normal none;
}

    then you can add the final result of after the animation like this :

    #settings[data-space=collapsed][data-firstAnimation=false] {
    width: /*something to get the width before collapsing*/
    height: /*something to get the height before collapsing*/
    animation: collapseSettings 1s ease 0s 1 normal none;
    animation-fill-mode: forwards;
}

    or you can shorthand with the animation

    animation: collapseSettings 1s ease 0s 1 normal forwards;

    check: mdn docs for animation-fill-mode

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search