Простая анимация с использованием Css3

Question

Как я могу заставить элемент HTML, такой как круг, вести себя так, как будто он подпрыгивает, как перемещать его несколько раз? это возможно только с CSS3?

Answer 1

Да, вам нужно использовать анимацию ключевых кадров, чтобы сделать это.Вот простой пример:

HTML:

<div class="bounce"></div>

CSS:

@-webkit-keyframes hop {
       from{
        -webkit-transform: translate(0px,0px);
        }


         to {
        -webkit-transform: translate(0px,-30px);
        }  
      }

@-moz-keyframes hop {
       from{
        -moz-transform: translate(0px,0px);
        }


         to {
        -moz-transform: translate(0px,-30px);
        }  
      }

.bounce{
    display:block;
    height:200px;
    width:200px;
    background:#ff6600;
    border-radius:300px;
    margin-top:100px;
-webkit-animation-name: hop;
    -webkit-animation-duration:.3s;
     -webkit-animation-direction:alternate;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay:0s;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-name: hop;
    -moz-animation-duration:.3s;
     -moz-animation-direction:alternate;
    -moz-animation-timing-function:linear;
    -moz-animation-delay:0s;
    -moz-animation-iteration-count:infinite;
}

И скрипка для вашегоудовольствие от просмотра: http://jsfiddle.net/hpBhf/1/

Answer 2

Я думаю, что самый простой способ сделать это - использовать animate.css , поддерживать множество различных анимаций, если вы хотите быстро добавить анимацию, это очень хороший выбор, и вот простая игра который разработан animate.css, http://www.gbin1.com/technology/democenter/20120812-animate-css/index.html