Animation on the site, a tags, button divs, ul, li, input, etc., who does what?

Question

css

Hello, who does the animation on the site.
For links, for buttons, for li, ul, input, textarea, button, select, for pictures if the picture is a link.
If the picture is like a link, then I add a class to it, an example is below.
On buttons, etc., I also add a class.
Maybe there are more convenient and good methods, so I add a class and decide which object animates.
For example, I do this:

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

Well, or this is how you can do it, shorter css code

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

Answer 1

Of course, you can make it easier, reworked it and did it that way.

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

like everything is ok, everywhere how it worked and works.