CSS3 背景图像悬停过渡

Question

请检查以下链接

http://intelmarketing.mk/demos/security/services/

你会连续看到 3 个图标，几乎所有悬停都有 css3 转换，但我无法将动画添加到我尝试过几个例子的图标上，比如

http://css3.bradshawenterprises.com/cfimg/ - 示例 1

但是没有接缝工作，而且我的图像是透明的，所以示例 1 没有按我想要的方式工作，所以我想要的是当我将鼠标悬停在框上时，按钮和图标同时平滑地悬停，按钮工作但是图标没有 我该如何解决这个问题？

第一个图标的CSS:

.fastvagticon
{
    width:299px;
    height:166px;
    margin:0 auto;
    background-image:url('images/FASTVAGT.png');
    background-repeat:no-repeat;
    background-position:center;
}

.servbox:hover .fastvagticon
{
    width:299px;
    height:166px;
    background-image:url('images/FASTVAGTh.png');
    background-repeat:no-repeat;
    margin-top:0px;
}

按钮的CSS

.servbtn1
{
    background-color:transparent;
    background-position: right center;
    background-image: url("images/eempy.png");
    background-repeat: no-repeat;
    color: #FFFFFF;
    height: 34px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 35px;
    padding-top: 8px;
    text-align: left;
    width: 151px;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
      -o-transition: all 1s ease;
      transition: all 1s ease;
      border:1px solid #fff;
}

.servbox:hover .servbtn1
{
    width:184px;
    height:34px;
    background-color:#3E1C1E;
    background-repeat: no-repeat;
    color: #FFFFFF;
    margin-left: auto;
    margin-right: auto;
    padding-left: 35px;
    padding-top: 8px;
    text-align: left;
    width: 151px;
}

Answer 1

您没有向图标添加任何过渡:

.fastvagticon
{
    width:299px;
    height:166px;
    margin:0 auto;
    background-image:url('images/FASTVAGT.png');
    background-repeat:no-repeat;
    background-position:center;

    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

此外，我不知道您是否知道，但这在 Firefox 中不起作用。 Firefox 不允许背景图像的任何动画。