CSS Анимации Keyframes

CSS Анимации Keyframes

CSS Анимации Keyframes применимы для простой анимации. Для более сложных анимаций, существует модуль CSS Animations.

В нижеприведенном примере: используется элемент .animable. Основная анимация в данном примере присутствует в двух кадрах для анимирования цвета фона. Мы применим имя ( animation-name: cambiarColor) и продолжительность анимации ( animation-duration: 5s). Третье правило ( animation-iteration-count: infinite) говорит нам, что анимация повторяется до бесконечности.

.animable {
    animation-name: cambiarColor;
    animation-duration: 5s;
    animation-iteration-count: infinite;
  }

Мы используем префиксы для должной работы анимации на различных браузерах.

.animable {
    -webkit-animation-name: cambiarColor;
    animation-name: cambiarColor;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }

@keyframes

Мы знаем, что анимация состоит из последовательности кадров ( ключевых кадров ).
Синтаксис похож на @media-query или @font-face. Правило, которое определяет фреймы для использования начинается с ключевого слова, — @keyframes, за которым следует название анимации, в данном случае — cambiarColor. Затем в фигурных скобках {} указываются кадры.

@keyframes cambiarColor {   
      /* все кадры для cambiarColor */
  }

Во время анимации цвет фона элемента .animable будет меняться от желтого ( rgb(219, 157, 58)) до белого цвета ( rgb(255, 255, 255)). Анимация имеет два кадра: в начале ( 0%) и завершении ( 100%), продолжительность нашей анимации 5 секунд.

@keyframes cambiarColor {   
     0%   { background-color: rgb(219, 157, 58);}   
     100% { background-color: rgb(255, 255, 255);}  
  }

Внимание! : Кадры 0% и 100%, это проценты и должны нести символ %. Также, в качестве селекторов ключевых слов можно использовать from ( от ) вместо 0% и to ( до ) вместо 100%.

@keyframes cambiarColor {   
     from   { background-color: rgb(219, 157, 58);}   
     to { background-color: rgb(255, 255, 255);}  
  }

Опять же, необходимо использовать префиксы для работы анимации в различных браузерах.

@-webkit-keyframes cambiarColor {   
     0%  { background-color: rgb(219, 157, 58);}   
    100% { background-color: rgb(255, 255, 255); }   
  } 
  @keyframes cambiarColor {   
     0%   { background-color: rgb(219, 157, 58);}   
     100% { background-color: rgb(255, 255, 255);}  
  } 

HTML CSS и РЕЗУЛЬТАТ

Результаты нашей CSS Анимации Keyframes

HTML
<div class="animable"></div>

CSS
.animable {
  width: 250px;
  height: 150px;
  border: 1px solid #d9d9d9;
  margin: 0 auto;
  -webkit-animation-name: cambiarColor;
  animation-name: cambiarColor;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes cambiarColor {
  0% {
    background-color: rgb(219, 157, 58);
  }
  100% {
    background-color: rgb(255, 255, 255);
  }
}

@keyframes cambiarColor {
  0% {
    background-color: rgb(219, 157, 58);
  }
  100% {
    background-color: rgb(255, 255, 255);
  }
}

table.cheatsheet.referencia tr th {
  background-color: #CC3366;
  color: #fff;
} 

Aliexpress INTAliexpress INTAliexpress INT

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *