начало анимации CSS на загрузке страницы

Question

Возможно ли инициировать анимацию css для pageload. В настоящее время он работает только для зависания, фокусировки и активных состояний. Анимация заставляет элемент bob, но я хочу, чтобы это происходило автоматически и постоянно.

CSS-код выглядит следующим образом:

@-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; 
} 

Answer 1

Измените эту строку

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

к этому

.hvr-bob { 

JSBIN