Как сделать плавное появление иконки?

Question

[Михаил Р.]

Здравствуйте! Столкнулся с проблемой "резкого" появления иконки при клике, хотел сделать плавность появления/исчезновения через "transition", но задумка успехом не увенчалась... =(

Вот css код:
content: "\f00c";
font: normal 10px FontAwesome;
text-align: center;
color: #2da5da;
position: absolute;
left: 3px;
top: 3px;

Может кто подскажет, как решить задачу? Спасибо!

Answer 1

[Вадим Белкин]

В зависимости от того, была иконка изначально (то есть она занимала какое-то место в блоке) или вставляется динамически (что приводит к скачку и смещению соседних элементов). Если изначально она присутствует, можно обычной менять прозрачность (opacity) из 0 в 1 с использованием transition. Если же она вставляется динамически, что приводит к смещению соседних элементов или размеров родителя, то можно плавно менять font-size от 0 (а лучше от 0.001px - на каких-то версиях андроида баг с font-size: 0) до необходимого значения (если иконка шрифтом сделана). Тем самым можно как-то плавное смещение сделать.

Answer 2

[Saboteur]

плавная смена цвета при наведении мышкой. транзишн работает вроде везде.
div.news a, a:link, a:active, a:visited{
color:#2571AC;
font-weight:bold;
}
div.news a:hover{
color:#1CC873;
font-weight:bold;
transition:All 1s ease;
}

Answer 3

[phpus]

Почитай про css3 анимация.
А вообще,

.element{
transition: All .8s
}

читай, хотя блог ... >,< /

Answer 4

[Александр Зачиналов]

Типа такого? https://jsfiddle.net/yus383p8/

Answer 5

[Kevgar]

daneden.github.io/animate.css Качаешь, подключаешь, к элементу приписываешь класс "animate" и класс с названием желаемой анимации.