Animation css animation does not return to original state

Question

Animation css animation does not return to original state

Navigation

#1 by (4 votes)
#2 by (2 votes)

1

I have a div, which is animated, and I would not like that at the end of the animation it turns to the state of when it started, because it ends up returning to the original state at the end of the animation.

#div1 {
    height:100px;
    width:100px;
    background-color:silver;
    position:relative;
    animation-name:animacao;
    animation-duration:3s;
    animation-iteration-count:1;
    animation-delay:0.5s;
}
@keyframes animacao {
    from {
        left:0px
    }
    to {
        left:100px
    }
}

<div id="div1"></div>

jsfiddle: link

css

asked by anonymous 08.01.2015 / 19:23

2 answers

2

You can add the property -webkit-animation-fill-mode: forwards; to not return to the initial position:

#div1 {
    height:100px;
    width:100px;
    background-color:silver;
    position:relative;
    -webkit-animation-name:animacao;
    -webkit-animation-duration:3s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-delay:0.5s;
    -webkit-animation-fill-mode: forwards;

}
@-webkit-keyframes animacao {
    from {
        left:0px
    }
    to {
        left:100px
    }
}

08.01.2015 / 19:40

Popup with AJAX and jQuery Set value of a null or empty ROW in a gridview

score 4 · Accepted Answer

There is an experimental property called animation-fill-mode that defines " as a CSS animation should apply the styles to the target before and after its execution. " The forwards value determines that the element retains the styles of the last keyframe of the animation.

Applying this, with the prefix -webkit for all properties, your CSS would look like this:

#div1 {
    height:100px;
    width:100px;
    background-color:silver;
    position:relative;
    -webkit-animation-name:animacao;
    -webkit-animation-duration:3s;
    -webkit-animation-iteration-count:1;
    -webkit-animation-delay:0.5s;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes animacao {
    from {
        left:0px
    }
    to {
        left:100px
    }
}

link

But note: code with this prefix will only work on browsers that accept this prefix. It is advisable to include all prefixes besides a non-prefixed version (or use some JS that does this for you).