Add Hover animations

For every element that has a hover treatment, we should add a nice transition animation. While this is subtle, it will help the entire experience feel more polished and professional.

This animation should be a 200ms linear transition. See details and examples here: https://docs.gitlab.com/ce/development/ux_guide/animation.html#hover

I did a quick search for hover in our CSS folder to try and compile a list, but I probably missed things. I suspect we won't get everything in the first pass, but I'm sure we can get a good start 😄

• Awards buttons
• Buttons
• Cell on User contributer Calendar (this works with svg and it therefore harder to animate.. will leave this for now)
• Dropdowns
• Rows in File list (under Repository)
• Links
• Navigation tabs
• Icon commands (such as bold, italic, etc. in a markdown comment field, edit, delete for a comment in an issue, copy to clipboard buttons)
• Cycle analytics stage tabs
• Text fields & Search fields
• Pipeline status badges
• labels (also add hover state)

mentioned in issue #24831 (closed)

created branch 26207-add-hover-animations

assigned to @dimitrieh

marked the task labels (also add hover state) as completed

marked the task Icon commands (such as bold, italic, etc. in a markdown comment field, edit, delete for a comment in an issue, copy to clipboard buttons) as completed

marked the task Cycle analytics stage tabs as completed

marked the task Text fields & Search fields as completed

marked the task Pipeline status badges as completed

mentioned in merge request !8415 (merged)

see !8415 (merged)

closed via merge request !8415 (merged)

mentioned in commit f8b0b197

mentioned in issue #26863 (closed)