How to transition an image once only when page loads?

Question

I have an image in a table positioned like this:

<img src="images/home/dress.png" alt="dress" width="138" height="344" class="homeimg">

Here is the CSS:

.homeimg {
    position: absolute;
    background-image: url(../images/home/dress.png);
    background-repeat: no-repeat;
    top: 97px;
    left: 500px;
    width: 138px;
    max-height: 344px;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

I want this image to transition only once when the page initially loads. Not on click or hover...

left: 16px;

...and fade in from completely invisible to visible.

Duplicate: http://stackoverflow.com/questions/6805482/css3-transition-animation-on-load — roNn23, Jan 15 '15 at 15:35

Fabrizio Calderan · Accepted Answer · 2015-01-15T15:43:24.470

Use an animation instead of a transition and define animation-fill-mode: forwards to retain last animation frame

Example: http://codepen.io/anon/pen/RNpyvm

.homeimg {
   position: absolute;
   ...
   -webkit-animation: appear 1s;
   animation: appear 1s;
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
}

@-webkit-keyframes appear {
   0% { left: 500px; opacity: 0; }
   100% { left: 16px; opacity: 1; }  
}

@keyframes appear {
   0% { left: 500px; opacity: 0; }
   100% { left: 16px; opacity: 1; }  
}

The animation will run just once

How to transition an image once only when page loads?

1 Answers1