Question

目前我正在创建一个网站，我想使用“新”css3动画。很难描述我做了什么，所以我用这个问题做了一个小例子。当你用鼠标悬停在块上时，firefox中的动画非常难看。此外，背景图像抖动1px。字体变得模糊，徽标也是如此。在IE11中，Chrome全部工作得很好:) 以下是链接：https://jsfiddle.net/0gk3fhnv/或完整代码：

<ul id="parallelogram-box">
<li class="parallelogram">
    <div class="text">Very nice descr Text! And here sec Row...</div>
    <div class="logo"></div>
</li>
</ul>

body {
    background: #eee;
}
#parallelogram-box {
    list-style-type: none;
    margin-left: 0px;
    padding-left: 0px;
    text-align: center;
}
#parallelogram-box li {
    text-align: left;
    position: relative;
    list-style-type: none;
    display: inline-block;
    min-height: 400px;
    min-width: 200px;
    max-width: 200px;
    transform: skew(-15deg);
    -o-transform: skew(-15deg);
    -webkit-transform: skew(-15deg);
    margin: 20px;
    overflow: hidden;
    border-radius: 5%;
    backface-visibility: hidden;
}
#parallelogram-box li:hover .text {
    bottom: 0px;
    transition: bottom 0.2s ease-in 0s;
    -webkit-transition: bottom 0.2s ease-in 0s;
    -moz-transition: bottom 0.2s ease-in 0s;
    -o-transition: bottom 0.2s ease-in 0s;
}
#parallelogram-box li:hover {
    transform: skew(-15deg);
    -o-transform: skew(-15deg);
    -webkit-transform: skew(-15deg);
}
#parallelogram-box li:before {
    content: "";
    position: absolute;
    width:200%;
    height:200%;
    z-index: -1;
    transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
    -o-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
    -webkit-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
}
li.parallelogram:before {
    background: url(http://i65.photobucket.com/albums/h235/Ignwar/Album%20Mountains/AlaskanMonoliths.jpg);
    background-position: -1000px -200px;
}
#parallelogram-box p {
    font-size: 20px;
    text-align: center;
}
#parallelogram-box li > * {
    transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
    -o-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
    -webkit-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
}
.text {
    background: rgba(36,36,36,.9);
    color: #e9e9e9;
    position: absolute;
    bottom: -75px;
    height: 100px;
    width: 180px;
    z-index: 1;
    font-size: 14pt;
    margin-left: -12px;
    text-align: center;
    padding: 10px 25px 10px 25px;
    transition: bottom 0.1s ease-in 0s;
    -webkit-transition: bottom 0.1s ease-in 0s;
    -moz-transition: bottom 0.1s ease-in 0s;
    -o-transition: bottom 0.1s ease-in 0s;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.logo {
    position: absolute;
    top: 50%;
    margin-top: -100px;
    width: 200px;
    height: 200px;
}
.parallelogram .logo {
    background: url(http://www.findthatlogo.com/wp-content/uploads/2011/10/dallas-mavericks-logo.png) no-repeat;
    background-size: contain;
    background-position: 50% 50%;
}

你能告诉我，这是什么造成这种奇怪的行为？有工作吗？

Answer 1

我找到了解决方案！看https://jsfiddle.net/0gk3fhnv/5/

    @-moz-document url-prefix() {
        #parallelogram-box li:after {
            content: "";
            position: absolute;
            width:200%;
            height:200%;
            z-index: -1;
            transform: none !important;
        }

        li.parallelogram:after {
            background-image: url(for_firefox_skewed_picure.png);
        }   
    }

我将firefox的转换持续时间更改为0.01秒，并使用线性动画来模糊模糊文本。此外，我添加了上面的css代码，这为Firefox添加了一个例外。该代码消除了背景图像的偏斜。因此，您必须为Firefox添加自定义背景图像，并在Photoshop或其他照片编辑软件中将其偏斜为％。

Firefox非常丑陋抖动模糊的css3过渡（动画）

1 个答案: