Animating an image once CSS

Question

Basically I want to move an image from the middle to the left 100 pixels once and then stay in that position. I preferable want it to run a few seconds after the webpage has loaded.I've tried using this

        div img {
    width: 120px;
    height: 120px;
    position: relative;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}
/* Standard syntax */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {left: 500px;}
    to {left: 400px;}
}
/* Standard syntax */
@keyframes mymove {
    from {left: 500px;}
    to {left: 400px;}
}

Although this is infinite and happens as soon as the page loads which I can't seem to figure out how to add a wait. Also I I don't think I and define the middle to move from and then 100 pixels from that.

Thanks, Max

Can you post your HTML, too? – Michael Hommé Jul 06 '16 at 21:57 — Michael Hommé, Jul 06 '16 at 21:57

jeffjenx · Accepted Answer · 2016-07-06T23:31:01.280

2

Use CSS's animation-delay and animation-iteration-count properties. E.g.

div {
  animation-delay: 1s; /* start the animation after 1 second */
  animation-iteration-count: 1; /* only do the animation once */
  animation-fill-mode: forwards; /* don't go back to the start */
}

Edit: It might be a good idea to just review all of the animation-* properties to fully understand what is needed to accomplish your desired output. As @Hans mentions in the comments, you may need to add animation-fill-mode in order to keep it on the final animation frame after running (as opposed to reverting to the starting frame).

edited Jul 06 '16 at 23:31

answered Jul 06 '16 at 22:00

jeffjenx

17,041
6
57
99

This doesn't stay in the position, it moves back to the start after it has completed. How would I stop this/ – Max Kortge Jul 06 '16 at 22:05
1

`animation-fill-mode: forwards;` from http://stackoverflow.com/questions/12991164/maintaining-the-final-state-at-end-of-a-css3-animation – Hans Jul 06 '16 at 22:34
This works perfectly, but do you know how I would go about setting the start point to the centre and then move say 10% or 100px to the left? – Max Kortge Jul 07 '16 at 01:44
If the centered object is a fixed width, just do `left: 50%; margin-left: 60px;` where `60px` is the width of the object divided by two. Or, you could do `left: 50%; transform: translateX(-50%);` but transform may have less compatibility (though it works with objects of variable widths). You could also use the `left: calc(50% - 60px);` but again it is up to you how you want to implement it. – jeffjenx Jul 07 '16 at 02:54

score 0 · Answer 2 · answered Jul 06 '16 at 22:41

Try this on your css :

.yourclassanimationname{
    -ms-animation: animatedctrls 1s;
    -webkit-animation: animatedctrls 1s;
    animation: animatedctrls 1s;
}

@keyframes animatedctrls{
    0%{margin-right:-60%;}
    100%{margin-right:25%;}
}

Where those margins are the start and the end of the movement, apply this class to the image and it should do. Hope it helps !

Animating an image once CSS

2 Answers2