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

#css3

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

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



.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);
}

    

Ответы

Ответ 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;}
}
  

  




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

Анимация без 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;}
}
 




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