Зациклить анимацию посредством css3

Question

Есть у меня вот такой указатель: ssmaker.ru/622c6439. jpg

Интересно, можно ли его зациклить посредством css3? То есть, сделать прыгающим в низ в верх без помощи js.

<i class="down"></i>

.down {
    display: block;
    width: 20px;
    height: 20px;
    margin-right: auto;
    margin-left: auto;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(45deg);
}

Answer 1

Например так:

.down {
    display: block;
    width: 40px;
    height: 40px;
    margin-right: auto;
    margin-left: auto;
    border-right: 3px solid red;
    border-bottom: 3px solid red;
    transform: rotate(45deg);
animation: downUp 1s infinite ease-in-out alternate; /* включаем анимацию и задаем параметры */

}
/* анимация */
@keyframes downUp { 
  from {margin-top: 10px;}

  to {margin-top: 70px;}
}

  <i class="down"></i>

  

Смотрим в доки и используем префиксы там, где необходимо

Анимация без alternate

.down {
    display: block;
    width: 40px;
    height: 40px;
    margin-right: auto;
    margin-left: auto;
    border-right: 3px solid red;
    border-bottom: 3px solid red;
    transform: rotate(45deg);
animation: downUp 2s infinite ease-in-out; /* включаем анимацию и задаем параметры */

}
/* анимация */
@keyframes downUp { 
  from {margin-top: 10px;}

  50% {margin-top: 50px;}
  to {margin-top: 10px;}
}

 <i class="down"></i>

Честно говоря, ресурсов про css анимацию и их параметры очень много. Стоит почитать. Для простых анимаций это несложно