Задать вопрос
ws17
@ws17
html

Анимация на сайта, теги а, див кнопки, ul, li, input и т.д, кто как делает?

Здравствуйте, кто как делает анимацию на сайте.

На ссылки, на кнопки, на li, ul, input, textarea, button, select, на картинки если картинка как ссылка.
Если картинка как ссылка, то на нее добавляю класс, пример ниже.
На кнопки и т.д, тож добавляю класс.

Может есть более удобные и хорошие методы, я так добавляю класс и решаю какой объект анимирует.

Я к примеру делаю так:
<b>input, textarea, button, select</b>

input, textarea, button, select{
  -webkit-transition:color 200ms linear 0ms, background 200ms linear 0ms, border 200ms linear 0ms;
  transition: color 200ms linear 0ms, background 200ms linear 0ms, border 200ms linear 0ms;
  -webkit-transition-property:color, background, border;
  transition-property: color, background, border;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transition-timing-function: linear, linear, linear;
  transition-timing-function: linear, linear, linear;
  -webkit-transition-delay: 0ms, 0ms, 0ms;
  transition-delay: 0ms, 0ms, 0ms;
}
input, textarea, button, select:hover{
  -webkit-transition:color 200ms linear 0ms, background 200ms linear 0ms, border 200ms linear 0ms;
  transition: color 200ms linear 0ms, background 200ms linear 0ms, border 200ms linear 0ms;
  -webkit-transition-property:color, background, border;
  transition-property: color, background, border;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transition-timing-function: linear, linear, linear;
  transition-timing-function: linear, linear, linear;
  -webkit-transition-delay: 0ms, 0ms, 0ms;
  transition-delay: 0ms, 0ms, 0ms;
}
input, textarea, button, select:focus{
  -webkit-transition:color 200ms linear 0ms, background 200ms linear 0ms, border 200ms linear 0ms;
  transition: color 200ms linear 0ms, background 200ms linear 0ms, border 200ms linear 0ms;
  -webkit-transition-property:color, background, border;
  transition-property: color, background, border;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transition-timing-function: linear, linear, linear;
  transition-timing-function: linear, linear, linear;
  -webkit-transition-delay: 0ms, 0ms, 0ms;
  transition-delay: 0ms, 0ms, 0ms;
}

на картинку
.animi img {
  -webkit-transition:opacity 200ms linear 0ms;
  transition: opacity 200ms linear 0ms;
  -webkit-transition-property:opacity;
  transition-property: opacity;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transition-timing-function: linear ;
  transition-timing-function: linear ;
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;
  opacity:1; -moz-opacity:1; filter:alpha(opacity=100);
}
.animi img:hover{
  -webkit-transition:opacity 200ms linear 0ms;
  transition: opacity 200ms linear 0ms;
  -webkit-transition-property:opacity;
  transition-property: opacity;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;
  opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50);
}

<b>для кнопок, для а и т.д</b>
.anim a{
  -webkit-transition:color 200ms linear 0ms, background 200ms linear 0ms, border 200ms linear 0ms;
  transition: color 200ms linear 0ms, background 200ms linear 0ms, border 200ms linear 0ms;
  -webkit-transition-property:color, background, border;
  transition-property: color, background, border;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transition-timing-function: linear, linear, linear;
  transition-timing-function: linear, linear, linear;
  -webkit-transition-delay: 0ms, 0ms, 0ms;
  transition-delay: 0ms, 0ms, 0ms;
}
.anim:hover{
  -webkit-transition:color 200ms linear 0ms, background 200ms linear 0ms, border 200ms linear 0ms;
  transition: color 200ms linear 0ms, background 200ms linear 0ms, border 200ms linear 0ms;
  -webkit-transition-property:color, background, border;
  transition-property: color, background, border;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transition-timing-function: linear, linear, linear;
  transition-timing-function: linear, linear, linear;
  -webkit-transition-delay: 0ms, 0ms, 0ms;
  transition-delay: 0ms, 0ms, 0ms;
}
.anim a:hover{
  -webkit-transition:color 200ms linear 0ms, background 200ms linear 0ms, border 200ms linear 0ms;
  transition: color 200ms linear 0ms, background 200ms linear 0ms, border 200ms linear 0ms;
  -webkit-transition-property:color, background, border;
  transition-property: color, background, border;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transition-timing-function: linear, linear, linear;
  transition-timing-function: linear, linear, linear;
  -webkit-transition-delay: 0ms, 0ms, 0ms;
  transition-delay: 0ms, 0ms, 0ms;
}

<b>Хотя для а, можно и так сделать чтобы для всех ссылок на сайте срабатывала анимашка:</b>
a{
  -webkit-transition:color 200ms linear 0ms, background 200ms linear 0ms, border 200ms linear 0ms;
  transition: color 200ms linear 0ms, background 200ms linear 0ms, border 200ms linear 0ms;
  -webkit-transition-property:color, background, border;
  transition-property: color, background, border;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transition-timing-function: linear, linear, linear;
  transition-timing-function: linear, linear, linear;
  -webkit-transition-delay: 0ms, 0ms, 0ms;
  transition-delay: 0ms, 0ms, 0ms;
}
a:hover{
  -webkit-transition:color 200ms linear 0ms, background 200ms linear 0ms, border 200ms linear 0ms;
  transition: color 200ms linear 0ms, background 200ms linear 0ms, border 200ms linear 0ms;
  -webkit-transition-property:color, background, border;
  transition-property: color, background, border;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transition-timing-function: linear, linear, linear;
  transition-timing-function: linear, linear, linear;
  -webkit-transition-delay: 0ms, 0ms, 0ms;
  transition-delay: 0ms, 0ms, 0ms;
}


Ну или вот так можно сделать, более короткий код css
a, b, strong, h1, h2, h3, h4, h5, h6, i, div, input, textarea, button, select{
  text-decoration: none;
  -webkit-transition:color 200ms linear 0ms, background 200ms linear 0ms, border 200ms linear 0ms;
  transition: color 200ms linear 0ms, background 200ms linear 0ms, border 200ms linear 0ms;
  -webkit-transition-property:color, background, border;
  transition-property: color, background, border;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transition-timing-function: linear, linear, linear;
  transition-timing-function: linear, linear, linear;
  -webkit-transition-delay: 0ms, 0ms, 0ms;
  transition-delay: 0ms, 0ms, 0ms;
}
a, b, strong, h1, h2, h3, h4, h5, h6, i, div, input, textarea, button, select:hover{
  -webkit-transition:color 200ms linear 0ms, background 200ms linear 0ms, border 200ms linear 0ms;
  transition: color 200ms linear 0ms, background 200ms linear 0ms, border 200ms linear 0ms;
  -webkit-transition-property:color, background, border;
  transition-property: color, background, border;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transition-timing-function: linear, linear, linear;
  transition-timing-function: linear, linear, linear;
  -webkit-transition-delay: 0ms, 0ms, 0ms;
  transition-delay: 0ms, 0ms, 0ms;
}
input, textarea, button, select:focus{
  -webkit-transition:color 200ms linear 0ms, background 200ms linear 0ms, border 200ms linear 0ms;
  transition: color 200ms linear 0ms, background 200ms linear 0ms, border 200ms linear 0ms;
  -webkit-transition-property:color, background, border;
  transition-property: color, background, border;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transition-timing-function: linear, linear, linear;
  transition-timing-function: linear, linear, linear;
  -webkit-transition-delay: 0ms, 0ms, 0ms;
  transition-delay: 0ms, 0ms, 0ms;
}
  • Вопрос задан
  • 216 просмотров
11 комментариев
Подписаться 1 Простой 11 комментариев
Пригласить эксперта
Ответы на вопрос 1
ws17
@ws17 Автор вопроса
Можно конечно по проще сделать, переработал и сделал так.

a, b, strong, h1, h2, h3, h4, h5, h6, i, div, input, textarea, button, select{
  text-decoration: none;
  -webkit-transition:color 200ms linear 0ms, background 200ms linear 0ms, border 200ms linear 0ms;
  transition: color 200ms linear 0ms, background 200ms linear 0ms, border 200ms linear 0ms;
}

a img {
  -webkit-transition:opacity 200ms linear 0ms;
  transition: opacity 200ms linear 0ms;
  opacity:1; 
  -moz-opacity:1; 
  filter:alpha(opacity=100);
}
a img:hover{
  -webkit-transition:opacity 200ms linear 0ms;
  transition: opacity 200ms linear 0ms;
  opacity:0.5; 
  -moz-opacity:0.5; 
  filter:alpha(opacity=50);
}


вроде все ок, везде как работало и работает.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Требуется Pure PhP + Symfony (Обязательно) разработчик для CRM/ERP
26 апр. 2024, в 14:07
3000 руб./в час
Спарсить каталог сайта
26 апр. 2024, в 14:06
15000 руб./за проект
Доработка бота на языке C++ (D) (достойная оплата труда)
26 апр. 2024, в 14:06
55555 руб./за проект
Ещё заказы