Задать вопрос
@Vova135798

Как сюда добавить анимацию?

Как добавить анимацию появления формы поиска? Я хочу чтобы она плавно выезжала влево из значка поиска
https://codepen.io/vladimir2021794/pen/dyzBabO

Примерно то, что мне нужно https://codepen.io/khadkamhn/pen/BNwxEa
  • Вопрос задан
  • 87 просмотров
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
@OlZhi
Попробуй вот это
<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
			<style> 
				input[type=text] 
          {
				  width: 130px;
				  box-sizing: border-box;
				  border: 2px solid #ccc;
				  border-radius: 4px;
				  font-size: 16px;
				  background-color: white;
				  background-image: url('searchicon.png');
				  background-position: 10px 10px; 
				  background-repeat: no-repeat;
				  padding: 12px 20px 12px 40px;
				  -webkit-transition: width 0.4s ease-in-out;
				  transition: width 0.4s ease-in-out;
				  }

				input[type=text]:focus {
				width: 100%;
				}
			</style>
	</head>
<body>
	<form>
		<input type="text" name="search" placeholder="Search..">
	</form>
</body>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы