How to make an icon appear smoothly (css/html)?

Question

css

Hello! Faced the problem of "sharp" appearance of the icon when clicking, I wanted to make the appearance / disappearance smooth through the "transition", but the idea was not successful ... =(
Here is the css code:
content: "\f00c";
font: normal 10px FontAwesome;
text -align: center;
color: #2da5da;
position: absolute;
left: 3px;
top: 3px;
Can anyone tell me how to solve the problem? Thanks!

Answer 1

Depending on whether the icon was originally (that is, it occupied some space in the block) or is inserted dynamically (which leads to a jump and displacement of adjacent elements). If initially it is present, you can usually change the transparency (opacity) from 0 to 1 using transition. If it is inserted dynamically, which leads to displacement of neighboring elements or parent sizes, then you can smoothly change the font-size from 0 (or better from 0.001px - on some versions of android there is a bug with font-size: 0) to the required value ( if the icon is in font). Thus, you can somehow make a smooth shift.

Answer 2

Like this? https://jsfiddle.net/yus383p8/

Answer 3

daneden.github.io/animate.css Download, connect, assign the "animate" class and the class with the name of the desired animation to the element.