Открыть мобильное меню

Микроанимация элементов с помощью transition в сss3

Элементы на сайте можно сделать более интересными применив микроанимацию. Самый простой способ — использовать доступные инструменты прямо в css3.

transition обеспечивает плавное изменение в значениях свойств класса и псевдоклассах hover и active. Так же его можно применять используя javascript.

Параметры свойства transition: [all или конкретное свойство] [2s - продолжительность анимации] [ease - вариант интерполяции перехода] [0s - задержка до начала анимации]

Плавная смена цвета

Поменяю цвет
.but-bg{ 
   transition: all .2s ease-in-out; 
   color:#fff; 
   background:#29ab14; 
   display:inline-block; 
   padding:5px 15px; 
   border-radius:5px; 
   cursor:pointer; 
}
.but-bg:hover{ 
   color:#d2f8fb; 
   background:#149fab; 
}

Масштабирование элемента

scale - масштабирование элемента по двум осям (x, y).
scaleX - масштабирование по горизонтали. Ось x.
scaleY - масштабирование по вертикали. Ось y.

Увеличюсь
.but-scale{ 
   transition:transform .2s cubic-bezier(0.6, 0.3, 0, 2.5); 
   color:#fff; 
   background:#29ab14; 
   display:inline-block; 
   padding:5px 15px; 
   border-radius:5px; 
   cursor:pointer; 
}
.but-scale:hover{ 
   transform:scale(1.1); 
} 

Поворот

rotate - поворот в двумерном пространстве. rotate(5deg)
rotate3d - поворот в трёхмерном пространстве. rotate3d(1,1,1,15deg)
rotateX, rotateY, rotateZ - поворот по оси.

Повернусь
.but-rot{ 
   transition:transform .2s cubic-bezier(0.6, 0.4, 0, 2.5); 
   color:#fff; 
   background:#29ab14; 
   display:inline-block; 
   padding:5px 15px; 
   border-radius:5px; 
   cursor:pointer; 
}
.but-rot:hover{ 
   transform:rotate(5deg); 
}

Изменение размера

Расширюсь
.but-size{ 
   transition:all .2s cubic-bezier(0.6,-0.4, 0.4, 1.5); 
   color:#fff; 
   background:#29ab14; 
   display:inline-block; 
   padding:5px 15px; 
   border-radius:5px; 
   cursor:pointer; 
}
.but-size:hover{ 
   padding: 5px 29px; 
   transform: translateX(-7px); 
}

Смещение по осям

translate - смещение элемента по двум осям (x, y).
translateX - смещение по горизонтали. Ось x.
translateY - смещение по вертикали. Ось y.

Передвинусь
.but-pos{ 
   transition:transform .2s cubic-bezier(0.6,-0.4, 0.4, 1.5); 
   color:#fff; 
   background:#29ab14; 
   display:inline-block; 
   padding:5px 15px; 
   border-radius:5px; 
   cursor:pointer; 
}
.but-pos:hover{ 
   transform:translateX(15px); 
}

Несколько одновременных изменений

Увеличюсь и повернусь
.but-multi{ 
   transition:transform .2s cubic-bezier(0.6, 0.3, 0, 2.5); 
   color:#fff; 
   background:#29ab14; 
   display:inline-block; 
   padding:5px 15px; 
   border-radius:5px; 
   cursor:pointer; 
}
.but-multi:hover{ 
   transform:scale(1.1) rotate(-3deg);
 }
Задайте вопрос или оставьте комментарий:


Вопросы и комментарии: