Dashicons transition

[Looimaster]

In /wp-includes/css/dashicons.css there is:

.dashicons,
.dashicons-before:before {
display: inline-block;
width: 20px;
height: 20px;
font-size: 20px;
line-height: 1;
font-family: "dashicons";
text-decoration: inherit;
font-weight: normal;
font-style: normal;
vertical-align: top;
text-align: center;
-webkit-transition: color .1s ease-in 0;
transition: color .1s ease-in 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

The -webkit-transition: color .1s ease-in 0; transition: color .1s ease-in 0; part should be removed because it's not related to what this block of code is supposed to do. There can be another CSS class like .dashicons-animation-color { -webkit-transition: color .1s ease-in 0; transition: color .1s ease-in 0; } for that.

Some plugins and themes may want some kind of animation on icons, not necessarily color animation though but most don't want animations. They have to overwrite this to transition: none; in most cases now.

This project did it OK, they have perfect classes in their CSS file: ​http://fortawesome.github.io/Font-Awesome/

[ocean90]

Related: ​https://github.com/melchoyce/dashicons/issues/13

[chriscct7]

​https://github.com/melchoyce/dashicons/issues/13 was closed