Animate CSS div to a fixed position

Question

This code takes a ball and moves it to the right and back again. How can I get it to move to the right, and stay there?

You can fiddle with a Live version of the output there.

body {
padding: 30px;
}

#animate {
position: absolute;
top: 100px;
left: 30px;
 width: 100px;
 height: 100px;
 border-radius: 50%;
background: red;

animation: move 3s ease infinite;
 }

@keyframes move {
  50% {
 top: 200px;
 left: 130px;
 }
}

The css code says 'infinite' and when I delete that, it moves the ball to the right, and then back to where it was one time. I'd like it to move to the right, and just stay there.

When I remove infinite, the ball floats to the right, and back to where it was one time. I'dl like it to float to the right and just stay there one time, Update ahead — McMonty
– McMonty, Commented Jan 8, 2016 at 22:20

blurfus · Accepted Answer · 2016-01-08 22:24:07Z

2

Replace infinite with forwards and add a from and to to your @keyframes

Adjust the top, left values as necessary.

See below:

body {
  padding: 30px;
}
#animate {
  position: absolute;
  top: 100px;
  left: 30px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: red;
  animation: move 3s ease forwards;
}
@keyframes move {
  from {
    top: 0px;
    left: 10px;
  }
  to {
    top: 200px;
    left: 130px;
  }
}

<h1>Animate with Top/Left</h1>

<div id="animate"></div>

answered Jan 8, 2016 at 22:24

blurfus

14.1k9 gold badges63 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chuck Le Butt · Accepted Answer · 2016-01-08 22:27:10Z

2

Here you go:

 animation: move 3s ease forwards;

http://codepen.io/anon/pen/yebvZx

You can read about the animation-fill-mode property here:
https://drafts.csswg.org/css-animations-1/#animation-fill-mode

forwards - After the animation ends (as determined by its animation-iteration-count), the animation will apply the property values for the time the animation ended.

edited Jan 8, 2016 at 22:27

answered Jan 8, 2016 at 22:21

Chuck Le Butt

49k62 gold badges213 silver badges299 bronze badges

2 Comments

Chuck Le Butt Over a year ago

@icebear Great. Don't forget to upvote and accept my answer if it helped :)

Chuck Le Butt Over a year ago

@icebear :-/ Why did you accept ochi's answer over mine? I was there first and his answer added an unnecessary step. Oh well :(

Captain Quirk · Accepted Answer · 2016-01-08 22:23:20Z

1

Your are looking for:

animation-fill-mode: forwards;

answered Jan 8, 2016 at 22:23

Captain Quirk

3761 silver badge8 bronze badges

Collectives™ on Stack Overflow

Animate CSS div to a fixed position

3 Answers 3

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Related