Не работает transition?

Question

[NofriOne]

Что тут не так? Почему я не могу сделать плавное увеличение формы?

.nav-color {
    color: white;
    background: #3097D1;
    padding: 4px; 
    vertical-align: -2px;
}
.nav-text {
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	color: rgba(255, 255, 255, 0.5);
	vertical-align: -2px
}

.nav-text:hover {
	color: rgba(203, 229, 241, 1);
}

.btn-circle {
    width: 35px;
    height: 35px;
    border-radius: 50%;

}
.img-circle {
	border-radius: 50%; 
	width: 35px; 
	height: 35px;
}

.form-control:focus {
    
    width: 300px;

}

Comments

[WapSter]

Собственно где код с анимацией?

Answer 1

[Andrey Vasilev]

Задай для формы

transform: scale(1.1,1.1);
transition: 0.2s;

https://codepen.io/Nolis/pen/vYBajjE
если нужно будет увеличить именно ФОРМУ, то всё тоже самое, но через hover.
т.к. focus онли для
<a>, <input>, <select> и <textarea>

Comments

[Одиночка Айс]

Во-первых, transition задается для блока по умолчанию, тогда анимация не будет дергаться в конце, а во-вторых, зачем 2 одинаковых значения для осей? Достаточно одного ведь.

[Andrey Vasilev]

Одиночка Айс, где это transition задаётся по умолчанию? Одинаковые значения для читаемости человеком подключившим бс и не знающем как сделать простой hover/focus эффект

[Одиночка Айс]

Andrey Vasilev, в элементе, переделанный ваш пример: https://codepen.io/daemonhk/pen/KKPBGKR

Answer 2

[NofriOne]

А для input так?

.form-control:focus { 
width: 300px;
 transition: 0.2s;
}

(Мне ширину увеличить при фокусе)

Comments

[Andrey Vasilev]

.form-control:focus { 
transform: scaleX(1.05);
transition: 0.2s;
}