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

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

+1 ещё

Простой
Почему не работает свойство backdrop-filter: blur?
- 1 подписчик
- 5 часов назад
- 13 просмотров
0

ответов
HTML

+2 ещё

Простой
Почему моргает видеофон на сайте?
- 1 подписчик
- 9 часов назад
- 61 просмотр
0

ответов
CSS

Простой
В контейнере шириной 100% при разрешении 320рх кнопка вылазит за его пределы. как поставить ее в правый верхий угол?
- 2 подписчика
- 14 часов назад
- 161 просмотр
0

ответов
CSS

Простой
Как сделать такую границу?
- 2 подписчика
- вчера
- 168 просмотров
0

ответов
HTML

+1 ещё

Простой
Как изменить строчку кода HTML на чужом сайте tampermonkey?
- 2 подписчика
- вчера
- 301 просмотр
1

ответ
JavaScript

+2 ещё

Простой
Добавление определенного класса к header при прокрутке до определенного блока?
- 1 подписчик
- вчера
- 65 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как лучше обратиться к кнопке через id или через class?
- 2 подписчика
- 01 мая
- 178 просмотров
2

ответа
CSS

Простой
Как сделать плавную анимацию изображения при наведении/убирании курсора мыши?
- 1 подписчик
- 01 мая
- 110 просмотров
2

ответа
CSS

Простой
Как сделать, чтобы блоки занимали половину доступной ширины, а последний нечётный — всю?
- 1 подписчик
- 01 мая
- 129 просмотров
4

ответа
JavaScript

+2 ещё

Простой
Галерея 3DWave. Перевел HTML в JS. Не работает.?
- 1 подписчик
- 30 апр.
- 96 просмотров
0

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

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Создать значок/обложку для видео Ютуб

04 мая 2024, в 01:47

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

Tensorflow + аппаратный ускоритель нейронок. Embedded linux приложение

04 мая 2024, в 00:43

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

Собрать товар с Tilda для импорта в woocommerce wordpress

04 мая 2024, в 00:15

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

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

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

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

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

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

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