CODEWITHSUNDEEP
css
McMonty
McMonty

Reputation: 85

Animate CSS div to a fixed position

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?

http://codepen.io/chriscoyier/pen/pBCax

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.

Upvotes: 3

Views: 478

Answers (3)

Chuck Le Butt
Chuck Le Butt

Reputation: 48758

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.

Upvotes: 2

blurfus
blurfus

Reputation: 14031

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>

Upvotes: 2

Captain Quirk
Captain Quirk

Reputation: 376

Your are looking for:

animation-fill-mode: forwards;

Upvotes: 1

Related Questions