mardi 21 avril 2015

CSS3 keyframe animation with 2-3 sec START delay (not iterate)

I would like the below to start animating AFTER about a 2-3 seconds delay.

Anyone have any idea as to how to add a delay to start of CSS3 keyframe animation like below? (jQuery is not preffered, but if I must)

.coin{  
  animation: animationFrames ease 2.5s;
  -webkit-animation: animationFrames ease 2.5s; /* Safari 4+ */
  animation-iteration-count: 8;
  -webkit-animation-iteration-count: 8;
  transform-origin: 50% 50%;
  -webkit-transform-origin:  50% 50%;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode: forwards;
  max-width: 55px;
  position:relative;
  top: 63px;
  left: 195px;
}

and:

  @-webkit-keyframes animationFrames {
      0% {
        -webkit-transform:  translate(-402px,55px)  ;
      }
      4% {
        -webkit-transform:  translate(-333px,26px)  ;
      }
      9% {
        -webkit-transform:  translate(-257px,-13px)  ;
      }
      14% {
        -webkit-transform:  translate(-183px,-18px)  ;
      }

Aucun commentaire:

Enregistrer un commentaire