Анимация из-за формы поиска?

Question

Геннадий @Gzsetimc6325u

HTML
CSS

Анимация из-за формы поиска?

Добрый день. Есть див. В нём имеются логотип и пара кнопок. Но при добавлении в этот див инпута, при загрузке сайта логотип и кнопки начинают анимироваться... Анимация происходит относительно исходного положения, т.е. логотип и кнопки "подъезжают" в заданное положение. Сам же инпут остаётся неподвижный. У всех элементов задано позиционирование относительно этого дива. Может быть, проблема в этом?

Вопрос задан более трёх лет назад
168 просмотров

Комментировать

Подписаться 1 Оценить Комментировать

Помогут разобраться в теме Все курсы

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Академия Эдюсон

Frontend-разработчик: тариф PRO

10 месяцев

Далее
ProductStar × РБК

Профессия: Инженер по тестированию + ИИ

6 месяцев

Далее

Решения вопроса 1

5 комментариев

Геннадий @Gzsetimc6325u Автор вопроса

Вот код:

<body>
        <div id="MainPage_Body">
            <div id="Header">
                <div id="Logo"><a href="Index.html"></a></div>
                <div id="CategorySelector"></div>
                <form>
                    <input id="Search" type="text" autocomplete="off" required>
                </form>
            </div>
        </div>
</body>

#Header {
    width: 100%; height: 100px;
    background-color: #2d2d2d;
    position: relative;
}

#Logo {
    width: 400px; height: 100px;
    background-image: url(Images/Logo/Logo.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 50%; margin-left: -200px;
    cursor: pointer;
    transition-duration: 0.2s;
}
#Logo:active {
    background-size: 90%;
}

#CategorySelector {
    width: 50px; height: 50px;
    background-image: url(Images/Icons/CategorySelectorIcon.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    margin-top: 25px; margin-left: 30px;
    cursor: pointer;
    transition-duration: 0.2s;
}
#CategorySelector:active {
    background-size: 80%;
}

#Search {
    width: 20%; height: 50px;
    text-align: center;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 30px;
    color: #2d2d2d;
    background-color: #ffb0f0;
    border: 0;
    border-radius: 25px;
    position: absolute;
    right: 25px; top: 25px;
}

Написано более трёх лет назад

Николай @nickolyashka

transition-duration: 0.2s;

Убирай у тех элементов, которые не хочешь анимировать и все.

Написано более трёх лет назад
Геннадий @Gzsetimc6325u Автор вопроса

Николай: В этом то и дело, я хочу чтобы они плавно нажимались. Как тогда быть?

Написано более трёх лет назад
alvvi @alvvi

Геннадий: заменить на transition: background-size 200ms

Написано более трёх лет назад
alvvi @alvvi

Геннадий: и впредь для предотвращения такх ситуаций анимировать только конкретное свойство

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

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

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

CSS

Простой
Почему @media запрос не работает?
- нет подписчиков
- вчера
- 49 просмотров
0

ответов
HTML

+2 ещё

Простой
Как блок уведомлений поднять выше dialog?
- 1 подписчик
- 21 мая
- 101 просмотр
2

ответа
CSS

Простой
Как добиться одинаковой ширины для определеных блоков в гриде?
- 1 подписчик
- 15 мая
- 108 просмотров
1

ответ
HTML

+1 ещё

Простой
Как свг заменить на фон?
- 1 подписчик
- 08 мая
- 243 просмотра
1

ответ
HTML

+1 ещё

Простой
Чем препроцессить в HTML сокращения?
- 2 подписчика
- 04 мая
- 319 просмотров
1

ответ
CSS

Простой
Filter: blur() размывает края при градиентном размытие?
- 1 подписчик
- 03 мая
- 127 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему у поля input атрибут required не срабатывает?
- 2 подписчика
- 01 мая
- 356 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Как обновлять данные массива, чтобы по нажатию на кнопку на странице добавлялся еще один элемент массива?
- 3 подписчика
- 12 апр.
- 745 просмотров
4

ответа
JavaScript

+1 ещё

Простой
Почему не работает код из js файла?
- 3 подписчика
- 12 апр.
- 703 просмотра
4

ответа
HTML

+1 ещё

Простой
Беда с input. Как избавиться от выделения заполненного поля?
- 2 подписчика
- 31 мар.
- 362 просмотра
1

ответ
Показать ещё Загружается…

Answer 1 · 2017-04-02 12:38:57

Может у тебя для всех элементов или для данного div задан translate + transition, достаточно будет найти данные строки в своем css и или убрать вовсе или обнулить значения. Если используются сторонние библиотеки animate.css или wow.js подключение может быть к классам через html и через js файл обращаться к элементам. Было бы замечательно если бы ты публиковал код)

Анимация из-за формы поиска?

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

Минуточку внимания

Войдите на сайт