Dollar Ionicon

ionic-v1
21

I made some changes to suit my needs. It works great on a desktop browser. But lags and appears Janky on web view. So far for animation. I will better wait for it in the icons kit or stick with the available animated icons.

22

God damn it ! All these days I thought animated icons are some kind of weird black magic produced by vector math or whatever. I DID NOT KNOW they were icons with CSS animations. Hell no! Is that so simple? Why didn’t I Inspect element on any of the animating icons. God I feel so dumb now.

And @mhartington thank you for the animating bell. When you pointed out to me the plunker you had made I thought it was just an icon with CSS animations and not the correct black magic thing or whatever. And I was hesitating to use it. Now I know that animating icons are nothing but good old icons with simple and plain CSS animation.

1 Like
23

Does the following work for you on an icon.

Example: <i class="icon ion-android-reminder bell"></i>

.bell{
  animation: animationFrames linear 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transform-origin: 50% 0%;
  -webkit-animation: animationFrames linear 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-transform-origin: 50% 0%;
  -moz-animation: animationFrames linear 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: alternate;
  -moz-transform-origin: 50% 0%;
}

@keyframes animationFrames{
  0% {
    left:0px;
    top:0px;
    opacity:1;
    transform:  rotate(-30deg) scaleX(1) scaleY(1) ;
  }

  100% {
    left:0px;
    top:0px;
    opacity:1;
    transform:  rotate(30deg) scaleX(1) scaleY(1) ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    left:0px;
    top:0px;
    opacity:1;
    -moz-transform:  rotate(-30deg) scaleX(1) scaleY(1) ;
  }
  100% {
    left:0px;
    top:0px;
    opacity:1;
    -moz-transform:  rotate(30deg) scaleX(1) scaleY(1) ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    left:0px;
    top:0px;
    opacity:1;
    -webkit-transform:  rotate(-30deg) scaleX(1) scaleY(1) ;
  }
 
  100% {
    left:0px;
    top:0px;
    opacity:1;
    -webkit-transform:  rotate(30deg) scaleX(1) scaleY(1) ;
  }
}

It works for me on all the elements except icons.

24

Try adding :before to .bell.

.bell:before{
...
}
25

On the next update for Ionicons, would you add the vertical more icon. Thanks.

26

Thank You for the updates. It looks great.

27

Icon Request: blocked icon.