如何在规模动画中保持图像中心的起源？ [英] How to keep origin in center of image in scale animation?

问题描述

我的情况类似于这个小提琴，我有一个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）;不透明度：0.4;} 
 100％{transform：scale（4）; opacity：0;} 
} 
 
 .container {
 position：relative; 
 display：inline-block; 
保证金：10vmax; 
} 
 
 .cat {
 height：20vmax; 
} 
 
 .center-point {
 position：absolute; 
 top：50％; 
剩下：50％; 
 transform：translate（-50％，-50％）; 
 height：10px; 
 width：10px; 
背景：蓝色; 
} 
 
 .to-animate {
 position：absolute; 
 top：50％; 
剩下：50％; 
 transform：translate（-50％，-50％）; 
 border：1px纯红色; 
 height：5vmax; 
 width：5vmax; 
 transform-origin：center; 
} 
 
 .one {
 -webkit-animation：ripple_large 2s linear 0s infinite; 
动画：ripple_large 2s线性0s无限; 
} 
 
 .two {
 -webkit-animation：ripple_large 2s linear 1s infinite; 
动画：ripple_large 2s线性1s无限; 
 
  

解决方案

问题在于你擦除 translate 转换。

当您指定一个新转换（动画中的转换）时，它会覆盖第一个转换，因此您需要将它们添加到相同的 transform 属性。在您的情况下，您正在移除修正 center 对齐的翻译：

  @keyframes ripple_large {0％{transform：translate（-50％，-50％）scale（1）; } 75％{transform：translate（-50％，-50％）scale（3）;不透明度：0.4; } 100％{transform：translate（-50％，-50％）scale（4）;不透明度：0; }}。container {position：relative;显示：inline-block; margin：10vmax;}。cat {height：20vmax;}。center-point {position：absolute;顶部：50％;剩下：50％;变换：翻译（-50％，-50％）; height：10px;宽度：10px;背景：蓝色; transform-origin：center;}。to-animate {position：absolute;顶部：50％;剩下：50％;变换：翻译（-50％，-50％）;边框：1px纯红色;身高：5vmax; width：5vmax;}。one {-webkit-animation：ripple_large 2s linear 0s infinite;动画：ripple_large 2s linear 0s infinite;}。two {-webkit-animation：ripple_large 2s linear 1s infinite;动画：ripple_large 2s linear 1s infinite;}  

< div类= '容器' > < 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>

b
$ b

UPDATE

作为@Gaby aka G. Petrioli评论说，最好使用另一个元素方法来避免改变动画，因为这可以与其他元素一起使用。

I have a situation similar to this fiddle, where I have a CSS3 animation that scales an element absolute-positioned in the centre of another element. However, when the animation takes place it is off-centre, as seen by the red squares relative to blue in the example. How do I centre it? I have tried a couple of configurations around the transform-origin property, but this isn't producing the correct results.

Code below:

@-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;
}

解决方案

The issue is that you are erasing the translate transformation.

When you specify a new transformation (the one inside the animation) it override the first one, so you need to add them in the same transform property. In your case you are removing the translation that is fixing the center alignment :

@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>

UPDATE

As @Gaby aka G. Petrioli commented, it's better to center your element using another method than translation to avoid changing the animation since this can be used with other elements.

这篇关于如何在规模动画中保持图像中心的起源？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！