How to Keep Origin in Center of Image in Scale Animation

CSS: How to scale an image from the center instead of top-left

Just replace width: 400px; with transform: scale(2,2) on :hover.

img {    width: 100%; max-width: 100%;}div {    position: absolute; left: 20%; top: 20%;    width: 250px;    transition: all 2s ease-in-out;}div:hover {    transform: scale(2,2)}

<div>    <a href="http://photobucket.com/images/cat" target="_blank">        <img src="http://i583.photobucket.com/albums/ss278/campipr/coolcat.gif" border="0" alt="cat photo: cat coolcat.gif"/>    </a></div>

Using scale and translate on animated element messes up the transform-origin

First, you should use transform-origin: 0 0;

By default, the origin of a transform is center.

transform-origin CSS property

You also have a typo here. it is transform not trasform

 0% {
    trasform: scale(1.2);
  }

.mic-container {
  width: 52px;
  height: 166px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #6593c3;
  border-radius: 3px;
}

button {
  background: none;
  border: none;
  outline: none;
  position: relative;
}

button::before {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: scale(0) translate(-50%, -50%);
  transform-origin: 0 0;
  border-radius: 100%;
  background-color: #6593c3;
  z-index: 0;
  transition: 1.5s all ease;
  animation: ripple 1.5s infinite;
}

@keyframes ripple {
  0% {
    transform: scale(1.2) translate(-50%, -50%);
  }
  50% {
    transform: scale(1.8) translate(-50%, -50%);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.4) translate(-50%, -50%);
    opacity: 0;
  }
}

<div class='mic-container'>
  <button>
    <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 20.7129C17.5605 20.7129 19.6289 18.5156 19.6289 15.8203V6.76758C19.6289 4.07227 17.5605 1.875 15 1.875C12.4395 1.875 10.3711 4.07227 10.3711 6.76758V15.8203C10.3711 18.5156 12.4395 20.7129 15 20.7129Z" fill="#4976A6"/>
<path d="M21.5039 11.25V15.9199C21.5039 19.4473 18.5859 22.3184 15.0586 22.3184C11.5312 22.3184 8.61328 19.4473 8.61328 15.9199V11.25H7.5V15.9199C7.5 19.8574 10.6055 23.1035 14.5312 23.3906V27.0703H10.2539V28.125H19.6875V27.0703H15.6445V23.3906C19.5117 23.1035 22.5 19.8574 22.5 15.9199V11.25H21.5039Z" fill="#6593C3"/>
</svg>
  </button>
</div>

Android image scale animation relative to center point

Forget the additional translation, set android:pivotX, android:pivotY to half the width and height and it will scale from the center of the image.

Transform scale animation begins from wrong position

@keyframes scale-down {
  0% {
    transform: scale(1);
    transform-origin: top left;
  }
  100% {
    transform: scale(0);
    transform-origin: bottom right;
  }
}

here you're resetting the transform property rather than appending to it

instead of

transform: scale(1);

use

transform: translate(-50%, -40%) scale(1);

make sure the new one is always at the end

How to scale i tag from the center of It's parent element?

Simply use font size:

.field {  height: 100px;  width: 100px;  border: 2px solid black;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}.field i {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  font-size: 70px;  transform-origin: center;}.field .fa-times {  transition: 0.5s;  color: red;}.field .fa-times:hover {  font-size:120px;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/><div class="field">    <i class="fa fa-times"></i></div>

Using transform to center a div along with animation

One trusted way to centralize one item is to use display: flex with justify-content: center and align-items: center in the parent element.

*, *::before, *::after{
  box-sizing:border-box;
}

.waitwrapper{
  background-color: #455879;
  width: 98vw;
  height: 97vh;
  display:flex;
  justify-content:center;
  align-items:center
}

.loader{
  border: 16px solid  #f3f3f3;
  border-top: 16px solid #455879; /* w3schools loader */
  border-radius: 50%;
  width: 20%;
  aspect-ratio:1;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<section class="waitwrapper" v-else>
  <div class="loader"></div>
</section>

SVG Scale Animation from Center Point instead of Upper-Left Corner

You could also have done that with the help of CSS styles and transform-origin property.

The benefit is that you do not have to calculate coordinates and translate your objects.

<svg version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <style>
    #logo { transform-origin: center; }
  </style>

  <g id="logo">
    <animateTransform attributeName="transform" begin="0s" type="scale" dur="2s" from="1" to=".5" repeatCount="indefinite"/>
    <circle r="8" cx="12" cy="12" />
  </g>
</svg>

#logo {
  transform-origin: center;
}

<svg version="1.1" viewBox="0 0 24 24" width="100%" height="100px" xmlns="http://www.w3.org/2000/svg">
  <g id="logo">
    <animateTransform attributeName="transform" begin="0s" type="scale" dur="2s" from="1" to=".5" repeatCount="indefinite"/>
    <circle r="8" cx="12" cy="12" />
  </g>  
</svg>

css - center loading animation

Your animation is overriding your transform property.

Try something more like :

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg) }
    100% { transform: translate(-50%, -50%) rotate(360deg)  }
}