CODEWITHSUNDEEP
jqueryhtmlcss
Max Kortge
Max Kortge

Reputation: 527

Animating an image once CSS

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

Upvotes: 0

Views: 161

Answers (2)

jeffjenx
jeffjenx

Reputation: 17457

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).

Upvotes: 2

jsanchezs
jsanchezs

Reputation: 2070

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 !

Upvotes: 0

Related Questions