How to keep the element in the final position of the animation?

Asked

Viewed 480 times

2

I am using this code to make an effect and keep the element in the final position of the animation, ie to the right.

HTML:

<div id="anim">


</div>

CSS code:

#anim{

  position: relative;
  background: green;
  width: 100px;
  height: 100px;

}

#anim:hover{

  -webkit-animation-name: toRight;
  animation-duration: 1s;

}



@-webkit-keyframes toRight{

  from {left: 0px;}
  to {left: 200px;}
}

@keyframes toRight{

  from {left: 0px;}
  to {left: 200px;}

}
css css3 animation

2 answers

3

Try adding animation-fill-mode: forwards;, for example:

-webkit-animation: toRight 1.0s forwards;

2


Using animation-fill-mode with forwards.

@-webkit-keyframes right {
  from { left: 0px   }
  to   { left: 200px }
}

@keyframes right {
  from { left: 0px   }
  to   { left: 200px }
}


div {
  position: absolute;
  height: 100px;
  width:  100px;
  background-color: skyblue;
  
  -webkit-animation: right 2s forwards;
          animation: right 1s forwards;
}
<div></div>

  • Very good @re22. But I tried to do with an animation that increased the size of a input, put in the same format right 2s forwards but it didn’t work. Is that for input elements is something different?

  • I got it, it’s just code of the example you did not put the Animation-Fill-mode: forwards;

  • I know @re22, I changed the names, but in the same sequence you did Animation: toRight 2s forwards; did not work rsrs.

  • 1

    If you’re in Chrome, you need to use prefix vendor: -webkit-animation: toRight 2s forwards;

  • Now yes, it worked that way there.

Browser other questions tagged css css3 animation

You are not signed in. Login or sign up in order to post.