Анимированные эффекты при наведении на веб-иконки с использованием шрифта Font Awesome

Сегодня рассмотрим небольшую коллекцию анимированных ховер-эффектов иконок на основе иконочного шрифта. Это позволит расширить удобство в оформление внешнего вида и уменьшить необходимость использования графических редакторов. Имеется в виду не анимация, а веб-иконки. То есть весь дизайн, как и сама анимация, построена только средствами CSS. И если понадобиться изменить цвет или еще что-то, то нужно будет лишь подправить код, а не рисовать все с нуля.

Для создания веб-иконок воспользуемся шрифтом Font Awesome. Он может применяться как к псевдо-элементам, так и встраивается в файл через тег <i> </i>. Это очень практично тем более, когда приходиться иметь дело только со стилями CSS. Вместо редактирования исходного кода, прописывается псевдо-элемент и через свойство content: ""; выводится иконка. В сборке используются оба варианта и на выходе получаем довольно красивые анимированные эффекты, при наведении курсора на иконку (ссылку).

Бесплатный звонок

HTML

 <div class="phonewrap">
     <span><i class="fa fa-phone"></i></span> <a href="#">Бесплатный звонок</a>
  </div>

CSS


.phonewrap  {
    display: table;
}

.fa-phone {
    color: #fff;
    display: inline-block;
    font-size: 21px !important;
        line-height: 26px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    vertical-align: middle;
}

.phonewrap span {
    background-color:#F95785;
    border-radius: 50%;
    display: inline-block;
    margin: 10px 5px;
    padding: 5px;
    width: 25px;
    height: 25px;
    text-align: center;
}

.phonewrap:hover > span i  {
    animation: 1200ms ease 0s normal none 1 running shake;
}
@keyframes shake {
0% {
    transform: rotateZ(0deg);
}
10% {
    transform: rotateZ(-30deg);
}
20% {
    transform: rotateZ(15deg);
}
30% {
    transform: rotateZ(-10deg);
}
40% {
    transform: rotateZ(7.5deg);
}
50% {
    transform: rotateZ(-6deg);
}
60% {
    transform: rotateZ(5deg);
}
70% {
    transform: rotateZ(-4.28571deg);
}
80% {
    transform: rotateZ(3.75deg);
}
90% {
    transform: rotateZ(-3.33333deg);
}
100% {
    transform: rotateZ(0deg);
}
}

Оповещение

HTML

 <div class="bellwrap">
     <span><i class="fa fa-bell"></i></span> <a href="#">Оповещение</a>
  </div>

CSS

.bellwrap  {
    display: table;
}

.fa-bell {
    color: #f9ec31;
    display: inline-block;
    font-size: 19px !important;
        line-height: 25px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transform-origin: 50% 0 0;
    vertical-align: middle;
}

.bellwrap span {
    background-color: #8087aa;
    border-radius: 50%;
    display: inline-block;
    margin: 10px 5px;
    padding: 5px;
    width: 25px;
    height: 25px;
    text-align: center;
}

.bellwrap:hover > span i {
    animation: 1300ms ease 0s normal none 1 running shake;
}
@keyframes shake {
0% {
    transform: rotateZ(0deg);
}
10% {
    transform: rotateZ(-30deg);
}
20% {
    transform: rotateZ(15deg);
}
30% {
    transform: rotateZ(-10deg);
}
40% {
    transform: rotateZ(7.5deg);
}
50% {
    transform: rotateZ(-6deg);
}
60% {
    transform: rotateZ(5deg);
}
70% {
    transform: rotateZ(-4.28571deg);
}
80% {
    transform: rotateZ(3.75deg);
}
90% {
    transform: rotateZ(-3.33333deg);
}
100% {
    transform: rotateZ(0deg);
}
}

Сердцебиение

HTML

<div class="heartwrap">
     <span><i class="fa fa-heart"></i></span> <a href="#">Сердцебиение</a>
  </div>

CSS

.heartwrap  {
    display: table;
}

.fa-heart {
    color: #fff;
    display: inline-block;
    font-size: 19px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transform-origin: 50% 50% 0;
    vertical-align: middle;
        line-height: 27px !important;
}

.heartwrap span {
    background-color: #B83D6C;
    border-radius: 50%;
    display: inline-block;
    margin: 10px 5px;
    padding: 5px;
    width: 25px;
    height: 25px;
    text-align: center;
}

.heartwrap:hover > span i {
    animation: 1500ms ease 0s normal none 1 running pulse;
}
@keyframes pulse {
0% {
    transform: scaleX(1) scaleY(1);
}
10% {
    transform: scaleX(0.85) scaleY(0.85);
}
20% {
    transform: scaleX(1) scaleY(1);
}
30% {
    transform: scaleX(0.85) scaleY(0.85);
}
40% {
    transform: scaleX(1) scaleY(1);
}
50% {
    transform: scaleX(0.85) scaleY(0.85);
}
60% {
    transform: scaleX(1) scaleY(1);
}
70% {
    transform: scaleX(0.85) scaleY(0.85);
}
80% {
    transform: scaleX(1) scaleY(1);
}
90% {
    transform: scaleX(0.85) scaleY(0.85);
}
100% {
    transform: scaleX(1) scaleY(1);
}
}

Bump Right

HTML

<a href="#" class="right1_1">Bump Right</a>

CSS

.right1_1{
        color: #5587c4;
    text-decoration: none;
        font:500 19px arial;
        display: table;
}

.right1_1:after {
  transition: margin .2s;
  margin-left: 7px;
  content: '\f0a9';
  font-family: 'FontAwesome';
  display: inline-block;
}

.right1_1:hover{color:#9D1396;}
.right1_1:hover:after {
  margin-left: 12px;
  color:#9D1396;
}

Slide In & Out

HTML

<a href="#" class="right1_2">Slide In & Out</a>

CSS

.right1_2{
        color: #5587c4;
    text-decoration: none;
        font:500 19px arial;
        display: table;
}

.right1_2:after {
  transition: all .25s;
  opacity: 0;
  margin-left: -.5em;
  content: '\f0a9';
  font-family: 'FontAwesome';
  display: inline-block;
}

.right1_2:hover{color:#9D1396;}
.right1_2:hover:after {
  opacity: 1;
  margin-left: .4em;
}

Slide In & Out

HTML

<a href="#" class="right1_3">Slide In & Out</a>

CSS

.right1_3{
        color: #5587c4;
    text-decoration: none;
        font:500 19px arial;
        display: table;
}

.right1_3:after {
  transition: margin .25s, opacity .25s, transform .25s;
  transform: rotate(-180deg);
  opacity: 0;
  margin-left: -10px;
  content: '\f0a9';
  font-family: 'FontAwesome';
  display: inline-block;
}

.right1_3:hover{color:#9D1396;}
.right1_3:hover:after {
  transition: margin .5s, opacity .25s, transform .5s;
  transform: rotate(0);
  opacity: 1;
  margin-left: .7em;
}

Swoop In

HTML

 <a href="#" class="right1_4">Swoop In</a>

CSS

.right1_4{
        color: #5587c4;
    text-decoration: none;
        font:500 19px arial;
        display: table;
}

.right1_4:after {
  margin: 0;
  transform: rotate(20deg) translateX(-1.5em) translateY(-0.2em);
  opacity: 0;
  content: '\f061';
  font-family: 'FontAwesome';
  display: inline-block;
}

.right1_4:hover{color:#9D1396;}
.right1_4:hover:after {
  transition: opacity .25s, transform .5s;
  transform: rotate(0) translateX(0.5em) translateY(0);
  opacity: 1;
}

Scale & Bump

HTML

<a href="#" class="right1_5">Scale & Bump</a>

CSS

.right1_5{
        color: #5587c4;
    text-decoration: none;
        font:500 19px arial;
        display: table;
        transform: translateY(1px);
}

.right1_5:after {
  margin: 0;
  transform: scale(0.6) translateX(0.3em) translateY(2px);
  transition: transform .25s;
  content: '\f054';
  font-family: 'FontAwesome';
  display: inline-block;
}

.right1_5:hover{color:#9D1396;}
.right1_5:hover:after {
   transform: scale(1) translateX(0.8em) translateY(1px);
}

Shoot In

HTML

<a href="#" class="right1_6">Shoot In</a>

CSS

.right1_6{
        color: #5587c4;
    text-decoration: none;
        font:500 19px arial;
}

.right1_6:after {
  transition: margin 0s;
  margin-left: -10em;
  opacity: 0;
  content: '\f178';
  font-family: 'FontAwesome';
  display: inline-block;
}

.right1_6:hover{color:#9D1396;}
.right1_6:hover:after {
  transition: margin .35s, opacity .1s;
  margin-left: .5em;
  opacity: 1;
}

Rotate In

HTML

<a href="#" class="right1_7">Rotate In</a>

CSS

.right1_7{
        color: #5587c4;
    text-decoration: none;
        font:500 19px arial;
        display: table;
}

.right1_7:after {
  transform: rotate(-90deg) translateX(-1em) translateY(-1em);
  opacity: 0;
  content: '\f064';
  font-family: 'FontAwesome';
  display: inline-block;
  margin-left: 8px;
}

.right1_7:hover{color:#9D1396;}
.right1_7:hover:after {
  transition: opacity .25s, transform .5s;
  transform: rotate(0) translateX(0) translateY(0);
  opacity: 1;
}

Take Off

HTML

<a href="#" class="right1_8">Take Off</a>

CSS

.right1_8{
        color: #5587c4;
    text-decoration: none;
        font:500 19px arial;
        display: table;
}

.right1_8:after {
  transform: rotate(30deg) skew(-15deg);
  margin: 0;
  transform: scale(2) rotate(0) skew(0) translateX(-2em) translateY(1em);
  opacity: 1;
  visibility: hidden;
  content: '\f1d8';
  font-family: 'FontAwesome';
  display: inline-block;
}

.right1_8:hover{color:#9D1396;}
.right1_8:hover:after {
  margin-left: 1em;
  transform: rotate(30deg) translateX(8em) translateY(-20em);
  opacity: 0;
  visibility: visible;
  transition: transform 2s, opacity 1.8s, visibility .15s;
}

Buzz

HTML

<a href="#" class="other1_1">Buzz</a>

CSS

.other1_1{
        color: #696c72;
        background: #f2f2f2;
    border: 1px solid #ececec;
    padding: 5px;
    text-decoration: none;
        font:500 19px arial;
        display: table;
        backface-visibility: hidden;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    vertical-align: middle;
}

.other1_1:after {
  padding-left: 9px;
  transform: translateZ(0px);
  content: "";
  font-family: 'FontAwesome';
  display: inline-block;
}

.other1_1:hover{color:#9D1396;}
.other1_1:hover:after, .other1_1:focus:after, .other1_1:active:after {
    animation-duration: 0.15s;
    animation-iteration-count: infinite;
    animation-name: hvr-icon-buzz;
    animation-timing-function: linear;
}
@keyframes hvr-icon-buzz {
50% {
    transform: translateX(3px) rotate(2deg);
}
100% {
    transform: translateX(-3px) rotate(-2deg);
}
}

Reboot

HTML

<a href="#" class="other1_2">Reboot</a>

CSS

.other1_2{
        color: #696c72;
        background: #f2f2f2;
    border: 1px solid #ececec;
    text-decoration: none;
        font:500 19px arial;
        display: table;
        backface-visibility: hidden;
    padding: 5px;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    vertical-align: middle;
}

.other1_2:after {
  margin-left:9px;
  transition-duration: 1s;
  transition-property: transform;
  transition-timing-function: ease-in-out;
  content:"";
  font-family: 'FontAwesome';
  display: inline-block;
}

.other1_2:hover{color:#9D1396;}
.other1_2:hover:after, .other1_2:focus:after, .other1_2:active:after {
   transform: rotate(360deg);
}
@keyframes hvr-icon-drop {
0% {
    opacity: 0;
}
50% {
    opacity: 0;
    transform: translateY(-100%);
}
51%, 100% {
    opacity: 1;
}
}

Drop

HTML

<a href="#" class="other1_3">Drop</a>

CSS

.other1_3{
        color: #696c72;
        background: #f2f2f2;
    border: 1px solid #ececec;
    text-decoration: none;
        font:500 19px arial;
        display: table;
        backface-visibility: hidden;
    padding: 7px;
    position: relative;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    vertical-align: middle;
}

.other1_3:after{
  opacity: 1;
  margin-left:9px;
  transform: translateZ(0px);
  content: "";
  font-family: 'FontAwesome';
  display: inline-block;
}

.other1_3:hover{color:#9D1396;}
.other1_3:hover:after, .other1_3:focus:after, .other1_3:active:after {
     animation-delay: 0.3s;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-name: hvr-icon-drop;
    animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
    opacity: 0;
    transition-duration: 0.3s;
}
@keyframes hvr-icon-drop {
0% {
    opacity: 0;
}
50% {
    opacity: 0;
    transform: translateY(-100%);
}
51%, 100% {
    opacity: 1;
}
}

4 комментария

stig85:

23.10.2016 в 11:52

Ух-ты, отличные эффекты!
Вот теперь голову ломаю куда и какие приладить...
Спасибо!

Ответить
1. WordSmall:
  
  23.10.2016 в 14:25
  
  Не за что)
  
  Ответить
Дмитрий:

10.02.2018 в 15:48

Замечательно! Спасибо огромное! А как сделать так, что бы все это великолепие выпадало, выезжало и выкатывалось не после, а перед основным текстом?

Ответить
1. WordSmall:
  
  10.02.2018 в 18:11
  
  Не за что) Ну, в целом так и задумано, чтобы стрелка была после текста. Но можете попробовать поменять псевдоэлемент after на before. Может из этого что-то выйдет.
  
  Ответить