Анимация на сайта, теги а, див кнопки, 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;
}
  • Вопрос задан
  • 80 просмотров
Пригласить эксперта
Ответы на вопрос 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);
}


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

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

Войти через TM ID
Похожие вопросы