Css-transform doesn't apply if element use animation

Question

I have a problem with transform property. There is a box with position: absolute. To put this in the center of parent div I use transform: translate(-50%, -50%) because in real project I have adaptive page. So, I can't use px and negative margin.

In addition I want to apply zoomIn animation and see that with animation line transform: translate(-50%, -50%) doesn't work. I suppose, it's because of double transform property.

How can I fix it?

This is example on Codepen https://codepen.io/pndparade/pen/VKGXPj

html,
body{
  height: 100%;
  margin: 0;
  padding: 0;
}
.box{
  height: 100%;
  width: 100%;
  background: red;
  position: relative;
}
.box-in{
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  animation-duration: 1.5s;
  animation-delay: 0.8s;
  animation-fill-mode: both;
  animation-name: zoomIn;
  animation-iteration-count: infinite;
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }

  to {
    -webkit-transform: scale3d(1, 1, .1);
    transform: scale3d(1, 1, 1);
  }
}

Possible duplicate of [How to apply multiple transforms in CSS?](http://stackoverflow.com/questions/10765755/how-to-apply-multiple-transforms-in-css) — Pete, Oct 17 '16 at 10:36

score 0 · Answer 1 · answered Oct 17 '16 at 10:39

you can use calc by left and right position:

left:calc(50% - 100px);
top: calc(50% - 100px);

when you need older browser support you can add:

left:-webkit-calc(100% - 100px);
left:-moz-calc(100% - 100px);
left:calc(50% - 100px);

right:-webkit-calc(100% - 100px);
right:-moz-calc(100% - 100px);
right: calc(50% - 100px);

score 0 · Answer 2 · answered Oct 17 '16 at 10:48

For horizontally center i have use margin 0 tricks and vertical i have use scale.

Note: better understand i marked .box green bg

html,
body{
  height: 100%;
  margin: 0;
  padding: 0;
  background: red;
}
.box{
  height: 100%;
  width: 200px;
  margin:0 auto;
  position: relative;
  background: green;
}
.box-in{
  width: 200px;
  height: 200px;
  position: absolute;
  left: 0;
  top:-webkit-calc(100% - 100px);
  top:-moz-calc(100% - 100px);
  top:calc(50% - 100px);
  background: #fff;
  animation-duration: 1.5s;
  animation-delay: 0.8s;
  animation-fill-mode: both;
  animation-name: zoomIn;
  animation-iteration-count: infinite;
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
  
  to {
    -webkit-transform: scale3d(1, 1, .1);
    transform: scale3d(1, 1, 1);
  }
}

<div class="box">
  <div class="box-in"></div>
</div>

score 0 · Answer 3 · answered Oct 17 '16 at 10:52

I'm not sure about how you want the final result, but the general solution for this would be to combine the transform properties together like below:

-webkit-transform: scale3d(1, 1, .1) translate(-50%, -50%);
transform: scale3d(1, 1, 1) translate(-50%, -50%);

For example:

To make the element zoom in and scale at the same time: https://codepen.io/anon/pen/rrkAZQ
To make the element scale first before zooming in: https://codepen.io/anon/pen/EgZpKB

score 0 · Answer 4 · answered Oct 17 '16 at 21:37

The trick is to set on the animation both transform.

Also tricky is the order of the transforms...

html,
body{
  height: 100%;
  margin: 0;
  padding: 0;
}
.box{
  height: 100%;
  width: 100%;
  background: red;
  position: relative;
}
.box-in{
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  animation-duration: 1.5s;
  animation-delay: 0.8s;
  animation-name: zoomIn;
  animation-iteration-count: infinite;
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform:  translate(-50%, -50%) scale3d(.3, .3, .3);
    transform:  translate(-50%, -50%) scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
  
  to {
    -webkit-transform:  translate(-50%, -50%) scale3d(1, 1, .1);
    transform:  translate(-50%, -50%) scale3d(1, 1, 1);
  }
}

<div class="box">
  <div class="box-in"></div>
</div>

Css-transform doesn't apply if element use animation

4 Answers4