How can create transition effect in font awesome icon

问题

I need solution for this problem but it should be dependable in font-awesome icon.

please help me. to easy create font awesome icon transition effect when hover on icon

回答1:

Fontawesome transitions could be done like any other CSS transition. You just need to set for them what properties will have this transition effect, and also define the "new" values.

For example:

.fa{
     font-size:30px;
     margin:5px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.fa:hover{
  font-size: 40px;
  transform: rotate(45deg);
}

In this example, on hover the icon will grow and will be rotated by 45 degrees.

Please read about transitions here: http://www.w3schools.com/cssref/css3_pr_transform.asp

You can see a live example here: http://jsfiddle.net/gn57dkez/

来源：https://stackoverflow.com/questions/34116779/how-can-create-transition-effect-in-font-awesome-icon

标签

icons