Efeito Infinto

Detalhes da questão

Descrição

Código:

(function ($) {
  'use strict';
 
  $(function () {
    $('img[alt="Novas mensagens"]')
      .closest('td')
        .find('.topic-ball')
          .children('i')
            .css({
              'box-shadow': '0px -40px 0px #2ea3f2 inset',
              'border-radius': '100px',
              'color': '#fff'
            })
    ;
  });
 
}(jQuery));

Código:

@-webkit-keyframes fa_rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes fa_rotate {
  from {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
        transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
        transform: rotate(360deg);
  }
}

Código:

(function ($) {
  'use strict';
 
  $(function () {
    $('img[alt="Novas mensagens"]')
      .closest('td')
        .find('.topic-ball')
          .children('i')
            .css({
              'box-shadow': '0px -40px 0px #2ea3f2 inset',
              'border-radius': '100px',
              'animation': 'fa_rotate .7s linear infinite',
              'color': '#fff'
            })
    ;
  });
 
}(jQuery));

1. Remova os códigos passados acima.
   
2. Adicione à CSS:

   Código:

   @keyframes fa_animation {
  0% {
    border-color: #b7b7b7;
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
    color: #444;
    border-radius: 50px;
  }
  50% {
    border-color: #2ea3f2;
    -webkit-transform: rotate(15deg) scale(.7);
    transform: rotate(15deg) scale(0.8);
    color: #2ea3f2;
    cursor: pointer;
    border-radius: 50px;
  }
  100% {
    border-color: #b7b7b7;
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
    color: #444;
    border-radius: 50px;
  }
}

3. Troque o JavaScript por:

   Código:

   (function ($) {
  'use strict';
 
  $(function () {
    $('img[alt="Novas mensagens"]')
      .closest('td')
        .find('.topic-ball')
          .children('i')
            .css({
              'animation': 'fa_animation 1s linear infinite',
            })
    ;
  });
 
}(jQuery));