CODEWITHSUNDEEP
csssvgcss-animations
scoob
scoob

Reputation: 367

CSS transform-origin issue

I'm working on a ghost floating here.

The issue I'm having is the transform-origin property. Right now the shadow (the ellipse on the bottom) seems to be expanding from the left to the right and then shrinking in that direction again. The behavior I wanted was for the shadow to expand and shrink from the middle - hence the transform-origin: 50% 50%;.

Here's the relevant code, although it helps to look at the Codepen:

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -64.5px;
  margin-top: -85.5px;
}

.shadow {
  margin-left: 22px;
  animation: shrink 3s ease-out infinite;
  transform-origin: center center;
  ellipse {
    transform-origin: center center;
  }
}

@keyframes shrink {
  0% {
    width: 20%;
  }
  50% {
    width: 27%;
  }
  100% {
    width: 20%;
  }
}

If anyone has any ideas, thank you so much! Really struggling with this for some reason.

Upvotes: 2

Views: 2288

Answers (1)

Josh Powell
Josh Powell

Reputation: 6297

Okay I got a solution for you.

What I did was use margin and width for the animation to keep it centered. I also gave the p tag that is containing the svg shadow a set width of the ghost to keep the shadow centered.

Here is the css I edited,

.shadowFrame {
 width: 130px;
}
.shadow {
  animation: shrink 3s ease-out infinite;
  transform-origin: center center;
  ellipse {
    transform-origin: center center;
  }
}

@keyframes shrink {
  0% {
    width: 90%;
    margin: 0 5%;
  }
  50% {
    width: 60%;
    margin: 0 20%;
  }
  100% {
    width: 90%;
    margin: 0 5%;
  }
}

Here is the live link.

Upvotes: 2

Related Questions