悬停效果n图像图标使用CSS

Question

当我尝试将悬停效果用于图像图标时，它在我的本地服务器中正常工作但是当我在悬停时在线服务器中部署时，图像的颜色不会立即改变，需要时间来更改第一个图标的颜色time.Thanks in Advance。

CSS：

.images1, .images2, .images3, .images4, .images5, .images6, .images7
 {
        display: inline-block;
        vertical-align: middle;
       -webkit-transform: translateZ(0);
        transform: translateZ(0);
          box-shadow: 0 0 1px rgba(0, 0, 0, 0);
         -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
         -moz-osx-font-smoothing: grayscale;
          -webkit-transition-duration: 0.3s;
           transition-duration: 0.3s;
         -webkit-transition-property: transform;
          transition-property: transform;
          }

          .images1:hover, .images1:focus, .images1:active,
.images2:hover, .images2:focus, .images2:active,
         .images3:hover, .images3:focus, .images3:active,
        .images4:hover, .images4:focus, .images4:active, 
        .images5:hover, .images5:focus, .images5:active, 
       .images6:hover, .images6:focus, .images6:active, 
      .images7:hover, .images7:focus, .images7:active, 

     {
     -webkit-transform: scale(1.1);
      transform: scale(1.1);
       }