WEB-нотатки - записник он-лайн

transition - анімація/перехід для будь-якої властивості CSS 3.

transition-property - вказуємо властивість, яку будемо анімувати (можна вказати декілька через кому);
transition-duration - вказуємо час анімації (в секундах або мілісекундах);
transition-timing-function - вказуємо тип зміни;

або ж можна всі правила вказати в одну властивість:
transition - вписуємо через пробіл всі правила.

Щоб змінити колір фону контейнеру при наведенні, пишемо наступне:

Code

.mycontainer {
background:#cccccc;
-webkit-transition-property:background;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
}
.mycontainer:hover {
background:#сс9999;
}

Або простіше:

Code

.mycontainer {
background:#cccccc;
-webkit-transition:background 1s linear;
}
.mycontainer:hover {
background:#сс9999;
}

Ми вказали, що при наведенні курсору на блок "mycontainer", буде змінюватися кольору фону, час переходу з кольору на колір - 1 секунда і тип зміни - лінійна функція - "linear".

"transition-timing-function” має багато властивостей:

default
linear
ease-in
ease-out
ease-in-out
cubic-bezier (x1, y1, x2, y2)

Такі ж дії можна зробити з безліччю властивостей, таких як: зміна розмірів блоку, тіні для блоку/тексту, непрозорість, розміри шрифту та багатьох інших. Більш наочно можна побачити в демо:

Відкрити демо в новій сторінці

Використані стилі в "Демо":

Code

.mycontainer1 {
  background:#cccccc;
  margin:10px 0;
  padding:10px;
  border:1px solid #666666;
  text-align:justify;
  transition:background 1s ease-in;
  -webkit-transition:background 1s ease-in;
  }
  .mycontainer1:hover {
  background:#cc9999;
  }
  .mycontainer2 {
  background:#00CCFF;
  margin:10px 0;
  padding:10px;
  border:1px solid #666666;
  text-align:justify;
  opacity:0.5;
  filter:alpha(opacity=50);
  transition:opacity 1s linear;
  -webkit-transition:opacity 1s linear;
  }
  .mycontainer2:hover {
  opacity:1.0;
  filter:alpha(opacity=100);
  }
  .mycontainer3 {
  background:#dddddd;
  margin:10px 0;
  padding:10px;
  border:1px solid #666666;
  text-align:justify;
  font-size:10px;
  transition:font-size 0.5s linear;
  -webkit-transition:font-size 0.5s linear;
  }
  .mycontainer3:hover {
  font-size:14px;
  }
  .mycontainer4 {
  background:#eeeeee;
  margin:10px 0;
  padding:10px;
  border:1px solid #666666;
  text-align:justify;
  width:530px;
  transition:width 1s linear;
  -webkit-transition:width 1s linear;
  }
  .mycontainer4:hover {
  width:350px;
  }
  .mycontainer5 {
  background:#bbbbbb;
  margin:10px 0;
  padding:10px;
  border:1px solid #666666;
  text-align:justify;
  height:20px;
  transition:height 1s linear;
  -webkit-transition:height 1s linear;
  }
  .mycontainer5:hover {
  height:50px;
  }
  .mycontainer6 {
  background:#bbbbbb;
  margin:10px 0;
  padding:10px;
  border:1px solid #666666;
  text-align:justify;
  width:530px;
  height:40px;
  opacity:0.5;
  filter:alpha(opacity=50);
  font-size:10px;
  transition:width, height, background, opacity, font-size 1s linear;
  -webkit-transition:width, height, background, opacity, font-size 1s linear;
  }
  .mycontainer6:hover {
  width:450px;
  height:60px;
  background:#eeeeee;
  opacity:1.0;
  filter:alpha(opacity=100);
  font-size:14px;
  }
  a:link, a:hover, a:active, a:visited {
  text-decoration:none;
  color:#ffffff;
  }
  .bt a:link, .bt a:hover, .bt a:active, .bt a:visited {
  text-decoration:underline;
  color:#0033FF;
  }