，这是我的html

Question

以下是FIDDLE链接。

我的问题是动画在Firefox上运行正常，但不知何故它在chrome中没有按预期工作。

请在Chrome浏览器中查看小提琴＆amp;火狐＆amp;鼠标移动图像＆amp;你会看到差异。

下面的GIven是样式表

===================================

.portfolio_container {
    position:relative;
    display:block;
    overflow:hidden;
    width:100%;
}
.portfolio_container .portfolio {
    position:relative;
    display:block;
    float:left;
    overflow:hidden;
    width:25%;
    height:auto;
}
.portfolio_container .portfolio .media_box figure a img {
    display:block;
    margin-left: auto;
    margin-right: auto;
}
.portfolio_container .portfolio .media_box .hover_effect {
    top:0;
    left:0;
}

.thumbLink {
    display: block;
    width: 100%;
}
.thumbImage {
    float: left;
    position: relative;
    overflow: hidden;
    display: block;
    margin-bottom: 0px;
    box-sizing: border-box;
    text-align: center;
    width: 100%;
    height: 100%;
}
.thumbImage img{
    transition: all 0.7s ease-in-out;
}
.thumbImage .thumbText h3 {
    margin-bottom: 10px;
    padding-top: 10px;
    border-bottom: 1px solid #fff;
    transition: all 1s ease-in-out;
}
.thumbImage .thumbText p {
    margin-bottom: 10px;
    color: #fff;
    transition: all 1s ease-in-out;
}
.thumbImage .thumbTextWrap {
    position: absolute;
    top: 0;
    height: 100%;
    max-width: 100%;
    min-width: 100%;
    opacity: 0;
    background: #7B133C;
    text-align: center;
    transition: all 1s ease-in-out;
    -webkit-user-select: none;
}
.ie8 .thumbImage .thumbTextWrap {
    display:none;
}
.thumbImage .thumbTextWrap:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.5em; /* Adjusts for spacing */
}
.thumbText {
    text-align: center;
    transform: scale(0);
    transition: all 0.7s ease-in-out;
    display: inline-block;
    vertical-align: middle;
    width: 90%;
}
.thumbImage:hover img {
    opacity: 0;
    transform: scale(10);
}
.touch-device .thumbImage:hover img {
    transform: none;
}
.thumbImage:hover .thumbTextWrap {
    opacity: 1;
}
.thumbImage:hover .thumbText {
    transform: scale(1);
    -webkit-transform: scale(1);
}

，这是我的html

<section class="portfolio_container">


            <article class="portfolio">
                <section class="thumbImage">
                    <img src="http://html5css3templates.com/themes/surrealstudio/templates/images/gallery/gallery-04-thumb.jpg" alt="">
                    <div class="thumbTextWrap">
                        <div class="thumbText">
                            <h3 class="sectionTitle">Gallery Item</h3>
                            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                            <a class="thumbLink" href="http://html5css3templates.com/themes/surrealstudio/templates/images/gallery/gallery-04.jpg" rel="prettyPhoto[gallery1]" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum."><i class="icon-search"></i></a>
                        </div>
                    </div>
                </section>
            </article>

        </section>

任何帮助都将被批准。

谢谢

维卡斯

Answer 1

将此css添加到您的css

 .thumbImage:hover img {
    opacity: 0;
    transform: scale(10);
   -webkit-transform: scale(10); /* your forgot to add this -webkit prefix for crome */
   -ms-tranform:scale(10);    /** for ie10 browser **/
   -o-tranform:scale(10);    /** for opera browser **/
   -moz-transform: scale(10) /** for old mozilla browser **/
 }

这里是演示小提琴

http://jsfiddle.net/jkkheni/7gvRT/2/

Answer 2

您没有将-webkit前缀添加到转换属性

.thumbImage:hover img {
    opacity: 0;
    transform: scale(10);
    -webkit-transform: scale(10);
}

有关前缀here

的更多信息

更多关于前缀的信息

CSS供应商前缀或CSS浏览器前缀是浏览器制造商在某种测试和实验期间添加对新CSS功能的支持的一种方式。浏览器前缀用于添加可能不属于正式规范的新功能，以及在尚未最终确定的规范中实现功能。

来源 About.com

CSS转换/动画跨浏览器无法正常工作

，这是我的html

2 个答案: