How to make similar animations and elements?

Question

css

Good day, gurus in their field, and just good people :)
A few questions have accumulated, so I decided to ask them at once ..
The site is being made in minimalism, on WordPress. As an example, I will show or indicate the necessary features on another site - the site is not my sketchapp.me/. I must say right away that I have no knowledge in JS.
1) When hovering over the round profile/person icon in the upper right corner, it changes color from white to green and back. I thought to do it myself, but now this fa fa-user file is loaded from somewhere else, because it is not in the topic (or I did not find it). How to make such an animation?
2) There are social elements in the footer of the site - also when you hover over them, they bounce - as you can see, only white elements bounce (with a shadow at the back), the rectangular icons themselves do not move. How to do the same?
3) There is a subscription element in the header (on the right) and in the footer (on the right). I will do the same, in fact, when you hover the mouse over the Subscribe button, the animation is also played (small illumination). How to do the same?
4) On the main page, under the inscription New posts, we see tags for the posts - they are white, when hovered over, they have a green outline of the frame and text. When we open a post and see the tag at the top, it is also white and is colored on hover. I tried to do the same in both cases - alas, I just have a tag that is filled with color, the inscription itself is white. How to do the same?
5) If we click on any record, then we see breadcrumbs under the menu, and they turn into colors, while the record itself is without color, but the path it went through is colored green. And if I hope to somehow figure it out with crumbs, then with color ... again a problem. How to do the same?
Sorry for the confusion and perhaps impudence, but I like the design, so I would like to adopt some elements. Please do not swear and do not flood, do not throw slippers :)

Answer 1

All items have the same answer.
Open the developer console and see how and what is done.
In chrome and mozilla this can be opened with ctrl+shift+i.
I don't see the point in pointing out anything specific.
Everything is visible in the code.
PS: Not everything there requires JS, regular CSS effects.