Анимация на CSS3

В настоящее время активно развивается CSS3, и все больше его свойств поддерживаются современными браузерами. 
Сегодня мы поговорим о том, как с помощью CSS3 создать анимацию, для этого нам понадобиться свойство transition. 

Рассмотрим простой пример: 

a { 
    background: #000; 
    color: #fff; 
    transition: all 0.5s ease; 
    } 
a:hover { 
    background: #fff; 
    color: #000; 
    } 
  
Данный код при наведении мышки будет изменять background и color плавно в течении полусекунды. 

Если нам необходимо выполнять анимацию для каждого свойтсва в отдельности можно поступить так: 

a { 
background: #000; 
      color: #fff; 
transition: background 0.5s ease; 
transition: color 0.3s ease; 
} 
a:hover { 
    background: #fff; 
    color: #000; 
 } 

В данном примере время выполнения анимации для каждого свойства указано отдельно. Так же можно добавить задержку анимации с помощью transition-delay: 0.5s; С помощью данного свойства можно анимировать практически любые свойства CSS.