Помогите border radius animation

327

28 февраля 2017, 16:39

Подскажите как в:

@keyframes switchSize {
   100% {
}}

Задать изменение border-radius у вызываемого элемента?
А именно :

.class1{
    -webkit-animation: rotate 6s linear infinite,switchSize 1s infinite !important;
    animation: rotate 6s linear infinite,switchSize 1s infinite !important;
}

Answer 1

Не совсем понятно, какую именно анимацию нужно получить. Вот как вариант.
Значения можно поставить свои.

.class1 { 
    padding: 10px; 
    background-color: blue; 
    width: 100px; 
    color: white; 
    border-radius: 50px; 
    -webkit-animation: rotate 6s linear infinite,switchSize 1s infinite !important; 
    animation: rotate 6s linear infinite,switchSize 1s infinite !important; 
} 
 
 
@keyframes switchSize { 
  50% { 
    border-radius: 10px; 
  } 
}