CODEWITHSUNDEEP
htmlcsscss-transitionscss-animations
null
null

Reputation: 1162

Transition HTML element from center in CSS3

I am trying to animate height property of an element using CSS but I want it from the center. Below is my code but it changes height from bottom.

.toggle {
  position: absolute;
  width: 400px;
  height: 200px;
  background: #ccc;
}

.left-border {
  position: absolute;
  top: 50px;
  left: 10px;
  width: 20px;
  height: 60px;
  border-radius: 200px;
  background-color: #ff0000;
  animation: height 2s;
}

@-webkit-keyframes height {
  from {
    height: 60px;
  }
  to {
    height: 10px;
  }
}
<div class="toggle">
  <div class="left-border"></div>
</div>

Here is JSFIDDLE

Upvotes: 1

Views: 473

Answers (4)

Ori Drori
Ori Drori

Reputation: 193318

You can animate the top with the height to make the height change appear from the center:

.toggle {
  position: relative;
  width: 400px;
  height: 200px;
  background: #ccc;
}

.left-border {
  position: absolute;
  top: 25px;
  left: 10px;
  width: 20px;
  height: 60px;
  border-radius: 200px;
  background-color: #ff0000;
  animation: height 2s forwards;
}

@keyframes height {
  from {
    top: 25px;
    height: 60px;
  }
  to {
    top: 50px;
    height: 10px;
  }
}
<div class="toggle">
  <div class="left-border"></div>
</div>

You can also use transform: scaleY() in the animation. The default transform origin is the center.

.toggle {
  position: relative;
  width: 400px;
  height: 200px;
  background: #ccc;
}

.left-border {
  position: absolute;
  top: 25px;
  left: 10px;
  width: 20px;
  height: 60px;
  border-radius: 200px;
  background-color: #ff0000;
  animation: height 2s forwards;
}

@keyframes height {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0.167);
  }
}
<div class="toggle">
  <div class="left-border"></div>
</div>

Upvotes: 1

VXp
VXp

Reputation: 12118

Just add top: 75px to the keyframe since the change in height is 50px. You want to reduce the height by 25px or half from both sides, top and bottom, to come to the desired 10px. So 50px / 2 + top: 50px = top: 75px:

.toggle {
  position: absolute;
  width: 400px;
  height: 200px;
  background: #ccc;
}

.left-border {
  position: absolute;
  top: 50px; /* starting position from the top */
  left: 10px;
  width: 20px;
  height: 60px;
  border-radius: 200px;
  background-color: #f00;
  animation: height 2s;
}

@-webkit-keyframes height {
  to {height: 10px; top: 75px} /* + ending position from the top */
}
<div class="toggle">
  <div class="left-border"></div>
</div>

Upvotes: 1

Emily
Emily

Reputation: 201

You can use transform

from {
}
to {
  transform: scaleY(0.1666);
}

0.1666 comes from 10px / 60px

Upvotes: 2

Tallboy
Tallboy

Reputation: 13467

Here you go. I use animation top instead of height. The red toggle also needs a 'container' now so I just used the one you had there. When changing the dimensions of the red toggle, change the outer wrapper, not the toggle element (it will fit to whatever the container is, both width and height wise)

https://jsfiddle.net/j2refncs/7/

.toggle {
  width: 20px;
  height: 40px;
  background: #ccc;
  position: relative;

  .left-border {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 200px;
    background-color: #ff0000;
    animation: height 2s;
  }
}

@-webkit-keyframes height {
  from {
    top: 0;
  }
  to {
    top: 30px;
  }
}

Upvotes: 1

Related Questions