start CSS animation on page load

Question

Is it possible to initiate a css animation on pageload. Currently It only works for hover, focus and active states. The animation causes the item to bob but I want this to happen automatically and constantly.

the css is as follows:

@-webkit-keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }

  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }

  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

@keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }

  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }

  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

.hvr-bob {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.hvr-bob:before, .hvr-bob:focus, .hvr-bob:active {
  -webkit-animation-name: hvr-bob-float, hvr-bob;
  animation-name: hvr-bob-float, hvr-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}

score 3 · Accepted Answer · answered Jan 17 '16 at 00:03

3

Change this line

.hvr-bob:before, .hvr-bob:focus, .hvr-bob:active {

to this

.hvr-bob {

JSBIN

answered Jan 17 '16 at 00:03

J. Titus

9,535
1
32
45

2

Any reason for the -1? It looks like it does what the OP is asking for... – J. Titus Jan 17 '16 at 00:05
I upvoted you, your answer seems right. The question is infact very common and I don't think the user did enough research. I would downvote the question if I could – Gerard Jan 17 '16 at 00:07
brilliant, this worked like a charm. As simple as that as well! I was expecting to have to use some kind of pseudo element to get it to work. thanks very much :) – MarkHughes88 Jan 17 '16 at 00:08
No problem, @MarkHughes88. Glad I could help. – J. Titus Jan 17 '16 at 00:10
@MarkHughes88 you may consider checking this as the correct answer since it worked for you – Mi-Creativity Jan 17 '16 at 00:16
done. i tried when i commented but it wouldnt let me. it has now though :) I should have known this really. it's a bit of a novice question. I put it down to being a long day with little sleep. Hopefully this will help anyone else who has a similar issue though :) – MarkHughes88 Jan 17 '16 at 00:20

start CSS animation on page load

1 Answers1