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

Question

Геннадий @Gzsetimc6325u

HTML
CSS

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

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

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

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

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

Решения вопроса 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

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

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

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

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

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

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

HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 29 минут назад
- 22 просмотра
1

ответ
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 5 часов назад
- 49 просмотров
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 15 часов назад
- 66 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 15 часов назад
- 42 просмотра
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 20 часов назад
- 49 просмотров
0

ответов
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- вчера
- 87 просмотров
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- вчера
- 66 просмотров
1

ответ
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- вчера
- 32 просмотра
0

ответов
HTML

Простой
Как на html реализовать блоки «Внимание / Важно»?
- 1 подписчик
- вчера
- 116 просмотров
1

ответ
HTML

+1 ещё

Простой
Как разместить элементы с разных блоков, чтобы они перекрывали друг друга?
- 1 подписчик
- 21 нояб.
- 55 просмотров
1

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Сделать 5 видеобэкграундов для выступления детей

23 нояб. 2024, в 13:29

400 руб./за проект

Разработать Back-end часть веб-приложения

23 нояб. 2024, в 12:39

100000 руб./за проект

Написать код на языке Python

23 нояб. 2024, в 12:16

60000 руб./за проект

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

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

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

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

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

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