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

Question

[Антон Вебсайтовский]

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

На ссылки, на кнопки, на 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;
}

Comments

[lamer350]

какой ужас...

[Антон Вебсайтовский]

lamer350, а вы как обычно делаете?

[Ankhena]

1. Если заголовки, блоки, списки, жирный текст и т.д. не являются интерактивными элементами, то анимировать их в большинстве случаев не стоит.
Если все таки нужно, например для карточек товаров, которые сами по себе не интерактивны, но содержат ссылки и кнопки, то добавлять класс.
2. Достаточно задать transition только для начального состояния. Пример: https://jsfiddle.net/tmoc62rz/
3.

opacity:0.5;
-moz-opacity:0.5;

Сначала пишутся свойства с префиксом, потом без него. И мозила уже очень давно умеет прозрачность без префиксов.

4. Итого:

a, 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; 
}

[Антон Вебсайтовский]

Ankhena, а ну я так уже сделал, ниже писал, что обновил код ! убрал лишнее.

[Ankhena]

Антон Вебсайтовский, в вашем сокращённом 5 правил, а достаточно 2х.

[Антон Вебсайтовский]

Ankhena, привидите пример, а то не совсем понимаю.

[Ankhena]

Антон Вебсайтовский,
вставлен же прямо код выше

[Антон Вебсайтовский]

Ankhena, а ну у меня так и сделано ! я к этому пришел уже. Ниже в посте писал.
Ховер ток добавить и все ) и фокус для импутов и т.д

[Ankhena]

Антон Вебсайтовский, если анимация одинаковая, то не нужно писать ее для ховеров и фокусов

[Антон Вебсайтовский]

Ankhena, как понять если одинаковая ! ховер это когда наводишь ! она срабатывает, а фокус, это для импутов и т.д
Не совсем вас понял, приведите пример.

[Антон Вебсайтовский]

Ankhena, а все понял, точно, работает, если одинаковая, спасибо ! а я чет лепил ).

Answer 1

[Антон Вебсайтовский]

Можно конечно по проще сделать, переработал и сделал так.

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);
}

вроде все ок, везде как работало и работает.