我遇到的情况与此fiddle类似,在这里,我有一个CSS3动画,该动画可缩放绝对位于另一个元素中心的元素。但是,发生动画时,动画会偏离中心,如本例中红色方块相对于蓝色方块所示。如何居中?我已经尝试过围绕transform-origin
属性进行一些配置,但这无法产生正确的结果。
代码如下:
@-webkit-keyframes ripple_large {
0% {-webkit-transform:scale(1);}
75% {-webkit-transform:scale(3); opacity:0.4;}
100% {-webkit-transform:scale(4); opacity:0;}
}
@keyframes ripple_large {
0% {transform:scale(1); }
75% {transform:scale(3); opacity:0.4;}
100% {transform:scale(4); opacity:0;}
}
.container {
position: relative;
display: inline-block;
margin: 10vmax;
}
.cat {
height: 20vmax;
}
.center-point {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 10px;
width: 10px;
background: blue;
}
.to-animate {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid red;
height: 5vmax;
width: 5vmax;
transform-origin:center;
}
.one {
-webkit-animation: ripple_large 2s linear 0s infinite;
animation: ripple_large 2s linear 0s infinite;
}
.two {
-webkit-animation: ripple_large 2s linear 1s infinite;
animation: ripple_large 2s linear 1s infinite;
}
最佳答案
问题是您要擦除translate
转换。
指定新的转换(动画中的转换)时,它会覆盖第一个转换,因此您需要将它们添加到相同的transform
属性中。在您的情况下,您要删除固定中心对齐的平移:
@keyframes ripple_large {
0% {
transform: translate(-50%, -50%) scale(1) ;
}
75% {
transform: translate(-50%, -50%) scale(3) ;
opacity: 0.4;
}
100% {
transform:translate(-50%, -50%) scale(4) ;
opacity: 0;
}
}
.container {
position: relative;
display: inline-block;
margin: 10vmax;
}
.cat {
height: 20vmax;
}
.center-point {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 10px;
width: 10px;
background: blue;
transform-origin:center;
}
.to-animate {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid red;
height: 5vmax;
width: 5vmax;
}
.one {
-webkit-animation: ripple_large 2s linear 0s infinite;
animation: ripple_large 2s linear 0s infinite;
}
.two {
-webkit-animation: ripple_large 2s linear 1s infinite;
animation: ripple_large 2s linear 1s infinite;
}
<div class='container'>
<img src='http://www.catster.com/wp-content/uploads/2017/08/Pixiebob-cat.jpg' class='cat'>
<div class='center-point'>
</div>
<div class='to-animate one'></div>
<div class='to-animate two'></div>
</div>
更新
如前所述,最好使用其他方法将元素居中,而不要使用平移以避免更改动画,因为这可以与其他元素一起使用。
关于html - 如何在比例动画中保持原点在图像中心?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58274661/