CSS transitions

CSS transitions надають спосіб створювати анімаційні ефекти, контролювати швидкість анімації за допомогою складених правил CSS.
Властивості transition: ; transition-property Вказує ім'я властивостей, чиї переходи повинні анімовані. Тільки ці властивості будуть анімуються в переходах.Інші відбуватимуться звичайним чином.

transition-duration Визначає час походження переходу. Можна вказати час анімації всіх властивостей переходу відразу або для кожного властивості окремо.

transition-timing-function Визначає функцію, яка вказує, як обчислюються проміжні значення властивостей.
Ви можете вибрати функцію звідси:


transition-delay Визначає як багато має пройти часу, перед тим як почнеться перехід.
Наприкладtransition-delay: 0.5s
Анімація часто використовується для підсвічених елементів в меню при наведенні миші.Такий ефект робить меню більш привабливим.
Завдання 1 створіть вебсторінку із горизонтальним меню. За основу оберіть код css внизу.

.menuButton {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  text-align: left;
  background-color: grey;
  left: 5px;
  top: 5px;
  height: 26px;
  color: white;
  border-color: black;
  font-family: sans-serif;
  font-size: 20px;
  text-decoration: none;
  box-shadow: 2px 2px 1px black;
  padding: 2px 4px;
  border: solid 1px black;
}

.menuButton:hover {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  background-color:white;
  color:black;
  box-shadow: 2px 2px 1px black;
}

Увага!!! у деяких властивостей використовуються префікси браузерів, для того, щоб ця властивість у них працювала.
-webkit- чи -moz чи -o-

Функція трансформації анімації: transform

Функція	Опис
none	Значення за замовчуванням, означає відсутність трансформації. Також скасовує трансформацію для елемента з групи трансформованих елементів.
matrix(a, c, b, d, x, y)	Зміщує елементи і задає спосіб їх трансформації, дозволяючи об'єднати декілька функцій 2D-трансформацій в одній. Як трансформації допустимі поворот, масштабування, нахил і зміна положення. Значення a змінює масштаб по горизонталі. Значення від 0 до 1 зменшує елемент, більше 1 — збільшує. Значення c деформує (зрушує) сторони елемента по осі Y, позитивне значення — вгору, негативне — вниз. Значення b деформує (зрушує) сторони елемента по осі X, позитивне значення — вліво, негативне — вправо. Значення d змінює масштаб по вертикалі. Значення менше 1 зменшує елемент, більше 1 — збільшує. Значення x зміщує елемент по осі X, позитивне — вправо, негативне — вліво. Значення y зміщує елемент по осі Y, позитивне значення — вниз, негативне — вгору.
translate(x,y)	Зрушує елемент на нове місце, переміщаючи щодо звичайного положення вправо і вниз, використовуючи координати X і Y, не зачіпаючи при цьому сусідні елементи. Якщо потрібно зрушити елемент ліворуч чи вгору, то потрібно використовувати негативні значення.
translateX(n)	Зрушує елемент щодо його звичайного положення по осі X.
translateY(n)	Зрушує елемент щодо його звичайного положення по осі Y.
scale(x,y)	Масштабує елементи, роблячи їх більше або менше. Значення від 0 до 1 зменшують елемент. Перше значення масштабує елемент по ширині, друге — по висоті. Від'ємні значення відображають елемент дзеркально.
scaleX(n)	Функція масштабує елемент по ширині, роблячи його ширше або вже. Якщо значення більше одиниці, елемент стає ширше, якщо значення знаходиться між одиницею і нулем, елемент стає вже. Від'ємні значення відображають елемент дзеркально по горизонталі.
scaleY(n)	Функція масштабує елемент по висоті, роблячи його вище або нижче. Якщо значення більше одиниці, елемент стає вище, якщо значення знаходиться між одиницею і нулем — нижче. Від'ємні значення відображають елемент дзеркально по вертикалі.
rotate(кут)	Повертає елементи на вказану кількість градусів, від'ємні значення від -1deg до -360deg повертають елемент проти годинникової стрілки, позитивні — за годинниковою стрілкою. Значення rotate(720deg) повертає елемент на два повних оберти.
skew(x-кут,y-кут)	Використовується для деформації (викривлення) сторін елемента відносно координатних осей. Якщо вказати одне значення, друге буде визначено браузером автоматично.
skewX(кут)	Деформує боку елемента відносно осі X.
skewY(кут)	Деформує боку елемента відносно осі Y.
initial	Встановлює значення властивості значення за промовчанням.
inherit	Успадковує значення властивості від батьківського елементу.

До блоку нижче застосуються анімації для властивостей: width, height, background-color, transform.
Наведіть мишу на прямокутник, щоб побачити, як він анімується

Завдання 2 створіть вебсторінку із своєю анімацією, змініть час, функцію і інші елементи на свій розсуд.

.box {
    border-style:solid;
    border-width:1px;
	text-align:center;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.box:hover {
    background-color: #FFCCCC;
    width: 200px;
    height: 200px;
    -webkit-transform:rotate(180deg);
	transform:rotate(180deg);
    
  }