Question

我正在使用CSS矩阵来允许在容器内进行平移和缩放（这由jquery.panzoom库处理）

在容器内部，我正在使用CSS动画，导致容器内的所有内容在Chrome中变得模糊。

我在this page上尝试了答案，但我没有看到任何差异。

这是jsfiddle，其中包含正在发生的事情的基本示例。

基本上问题是这个CSS规则：

.outer .effect {
-webkit-animation: sonarEffect 1.3s infinite 75ms;
-moz-animation: sonarEffect 1.3s infinite 75ms;
animation: sonarEffect 1.3s infinite 75ms;
}

如果您检查.effect元素并切换它的可见性，您可以清楚地看到，当隐藏所有内容时，一切看起来都很清晰，然后在变亮时变得模糊。

Answer 1

目前，效果扩大到100％以上。最好以50％开始效果，并以100％结束。

例如，如果我们想要从100px扩展到200px。最好将元素从200px开始并将其缩小到50％，然后使其动画为100％。超过100％可以实现模糊效果。

相关答案：CSS @keyframes scale text blurry

然而，大多数模糊性质都是由-webkit-transform：matrix（在CSS中的.container元素上...）引起的。如果你扩展，质量将会丢失......

以下是一个示例（http://jsfiddle.net/MZf6D/1/）。你必须修改它来修复你的需求，但是，应该让你开始正确的道路。

.container{
    width: 300px;
    position: relative;
}

.outer {
    background: #fff;
    -webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
    -moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
    transition: transform ease-out 0.1s, background 0.2s;
    border: 5px solid #e373ff;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    position:absolute;
    right:50px;
    top:0;
}
.outer .border {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    height: 84px;
    width:84px;
    border: 5px solid #fff;
    background: #c22ce2;
    padding: 3px;
}
.outer .effect {
    -webkit-animation: sonarEffect 1.3s infinite 75ms;
    -moz-animation: sonarEffect 1.3s infinite 75ms;
    animation: sonarEffect 1.3s infinite 75ms;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    position: absolute;
    left: -25%;
    top: -25%;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5);
}
@-webkit-keyframes sonarEffect {
    0% {
        opacity: 0.2;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 1px rgba(255,255,255,7), 0 0 4px 4px #c22ce2, 0 0 0 4px rgba(255,255,255,0.5);
    }
    100% {
        box-shadow: 0 0 0 1px rgba(255,255,255,7), 0 0 4px 4px #c22ce2, 0 0 0 4px rgba(255,255,255,0.5);
        -webkit-transform: scale(1);
        opacity: 0;
}

}
@-moz-keyframes sonarEffect {
    0% {
        opacity: 0.2;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 1px rgba(255,255,255,7), 0 0 4px 4px #c22ce2, 0 0 0 4px rgba(255,255,255,0.5);
    }
    100% {
        box-shadow: 0 0 0 1px rgba(255,255,255,7), 0 0 4px 4px #c22ce2, 0 0 0 4px rgba(255,255,255,0.5);
        -moz-transform: scale(1);
        opacity: 0;
    }
}
@keyframes sonarEffect {
    0% {
        opacity: 0.2;
    }
    40% {
        opacity: 0.5;
        box-shadow: 0 0 0 1px rgba(255,255,255,7), 0 0 4px 4px #c22ce2, 0 0 0 4px rgba(255,255,255,0.5);
    }
    100% {
        box-shadow: 0 0 0 1px rgba(255,255,255,7), 0 0 4px 4px #c22ce2, 0 0 0 4px rgba(255,255,255,0.5);
        transform: scale(1);
        opacity: 0;
    }
}

img{
    width:30%;
    height: 30%;
}

CSS动画和矩阵使一切变得模糊

1 个答案: