Примеры CSS Transition

Transition — являются одним из самых популярных дополнений в CSS3, с помощью которого можно добавлять различные красивые эффекты. Плавные переходы между псевдоселекторами ссылок, искажение элементов, плавное увеличение блоков и многое другое.

Все это делается довольно просто. Ниже приведены несколько примеров с использованием свойства Transition. Применение, которое поможет подчеркнуть современный дизайн, внешний вид вашего сайта.

№1.Изменение фона, шрифта

Посмотреть Demo

a.bottom{
  color: #fff;
  -webkit-transition:  color 0.5s;
  -moz-transition:     color 0.5s;
  -o-transition:       color 0.5s;
  transition:          color 0.5s;
  background:#8d42fd;
  padding:5px;
}
a.bottom:hover {
  color: #000;
  background:#fda342;
}

№2.Обычное изменение размера блока

Посмотреть Demo

a.bottom2 {
   background:#e40000;
   color:#fff;
   padding: 5px;
   display:block;
   width:140px;
   -webkit-transition: width 2s;
   -moz-transition: width 2s;
   -o-transition: width 2s;
   transition: width 2s;
}
a.bottom2:hover {
        width: 500px;
}

№3.Плавное изменение размера блока

Посмотреть Demo

a.bottom3 {
        display:block;
        background: #E869AA;
        color: #000;
        width: 140px;
        padding: 5px;
        -webkit-transition: color 4s, width 4s, background-color 4s;
        -o-transition: color 4s, width 4s, background-color 4s;
        -moz-transition: color 4s, width 4s, background-color 4s;
        transition: color 4s, width 4s, background-color 4s;
}
a.bottom3:hover {
        color: #FFFFFF;
        width: 400px;
        background: #880045;
}

№4.Плавное изменение цвета блока при отводе курсора

Посмотреть Demo

a.bottom4{
        display:block;
        background: #7e00ff;
        color: #fff;
        width: 140px;
        padding: 5px;
        -webkit-transition: 1s;
        -o-transition: 1s;
        -moz-transition:  1s;
        transition: 1s;
}
a.bottom4:not(:hover){
        -webkit-transition: 4s;
        -o-transition: 4s;
        -moz-transition: 4s;
        background: #ff8400;
}

№5.Уменьшение блока

Посмотреть Demo

a.bottom5{
  display:block;
  background: #8ab023;
  color: #FFF;
  padding: 5px;
  text-align: center;
  margin:0px auto;
  width: 400px;
  -webkit-transition: 3s linear;
        -o-transition: 3s linear;
        -moz-transition: 3s linear;
}
a.bottom5:hover{
         width: 140px;
}

№6.Изменение непрозрачности

Посмотреть Demo

a.bottom6{
  display:block;
  background: #913c0d;
  color: #FFF;
  padding: 5px;
  width:140px;
 -webkit-transition: 3s linear;
        -o-transition: 3s linear;
        -moz-transition: 3s linear;
}
a.bottom6:hover{
        opacity: .0;
}

№7.Поворот на 380 градусов

Посмотреть Demo

a.bottom7{
  display:block;
  background: #0d9174;
  color: #FFF;
  padding: 5px;
  width:140px;
  -moz-transition: all 3s;
   -o-transition: all 3s;
   -webkit-transition: all 3s;
    transition: all 3s;
}
a.bottom7:hover{
         -moz-transform: rotate(360deg);
     -ms-transform: rotate(360deg);
     -o-transform: rotate(360deg);
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
}

№8.Увеличение блока

Посмотреть Demo

a.bottom8{
  display:block;
  background: #843737;
  color: #FFF;
  padding: 5px;
  width:140px;
  -moz-transition: all 3s;
   -o-transition: all 3s;
   -webkit-transition: all 3s;
   transition: all 3s;
}
a.bottom8:hover{
         -moz-transform: scale(2);
     -ms-transform: scale(2);
     -o-transform: scale(2);
     -webkit-transform: scale(2);
      transform: scale(2);
}

№9.Искажение

Посмотреть Demo

a.bottom9{
  display:block;
  background: #c2a13c;
  color: #FFF;
  padding: 5px;
  width:140px;
  -moz-transition: all 3s;
   -o-transition: all 3s;
   -webkit-transition: all 3s;
   transition: all 3s;
}
a.bottom9:hover{
        -moz-transform: skew(10deg, 40deg);
    -ms-transform: skew(10deg, 40deg);
    -o-transform: skew(10deg, 40deg);
    -webkit-transform: skew(10deg, 40deg);
    transform: skew(10deg, 40deg);
}

Это не большие примеры из множество возможных, главное понять принцип, как это работает. Подробнее о Transition можно узнать здесь w3.org/TR/css3-transitions

Посмотреть Demo