Простая анимация с данного сайта

Question

Я совершенно новичок в CSS-анимации, и я хотел смоделировать эффект, найденный на этом сайте: http://pl.playstation.com/psn/. В середине экрана (белый фон) присутствуют некоторые персонажи, и перед ними есть синие символы (крест, круг, квадрат), которые идут вверх и вниз довольно гладко. Как имитировать такой же эффект на примере div? Я просмотрел код их анимации и нашел что-то вроде:

-webkit-animation-duration: 4000ms; 
transition-delay: 1500ms; 
-webkit-animation: infinite alternate ease-in-out; 
-webkit-perspective: 1000; 
transition: opacity 1000ms,transform 1000ms; 

Как заставить элементы перемещаться на основе этого? Нужно ли мне преобразовывать: translate() и давать некоторые значения и как автоматически запускать его, когда кто-то находится на странице?

Answer 1

Вы можете использовать ключевые кадры для этого - просто не забудьте включить префикс для кросс-браузера!

Идея за ключевыми кадрами в том, что вы можете анимировать элементы очень быстро, используя синтаксис ключевого кадра:

@keyframes Floating { 
    from { 
    transform: translate(0, 0px); 
    } 
    65% { 
    transform: translate(0, 15px); 
    } 
    to { 
    transform: translate(0, -0px); 
    } 
} 

, который будет переводить его, как вы хотите.

---

DEMO

.floating { 
 
    float: left; 
 
    -webkit-animation-name: Floatingx; 
 
    -webkit-animation-duration: 3s; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -webkit-animation-timing-function: ease-in-out; 
 
    -moz-animation-name: Floating; 
 
    -moz-animation-duration: 3s; 
 
    -moz-animation-iteration-count: infinite; 
 
    -moz-animation-timing-function: ease-in-out; 
 
    animation-name: Floating; 
 
    animation-duration: 3s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: ease-in-out; 
 
    margin-left: 30px; 
 
    margin-top: 5px; 
 
} 
 
@-webkit-keyframes Floatingx { 
 
    from { 
 
    -webkit-transform: translate(0, 0px); 
 
    } 
 
    65% { 
 
    -webkit-transform: translate(0, 15px); 
 
    } 
 
    to { 
 
    -webkit-transform: translate(0, -0px); 
 
    } 
 
} 
 
@-moz-keyframes Floating { 
 
    from { 
 
    -moz-transform: translate(0, 0px); 
 
    } 
 
    65% { 
 
    -moz-transform: translate(0, 15px); 
 
    } 
 
    to { 
 
    -moz-transform: translate(0, -0px); 
 
    } 
 
} 
 
@keyframes Floating { 
 
    from { 
 
    transform: translate(0, 0px); 
 
    } 
 
    65% { 
 
    transform: translate(0, 15px); 
 
    } 
 
    to { 
 
    transform: translate(0, -0px); 
 
    } 
 
}

<img src="http://placekitten.com/g/300/200" class="floating" />