Переход HTML-элемента из центра в CSS3 - PullRequest
Новая
       8

Переход HTML-элемента из центра в CSS3

0 голосов
/ 14 сентября 2018

Я пытаюсь анимировать свойство высоты элемента с помощью CSS, но я хочу, чтобы оно было от центра. Ниже мой код, но он меняет высоту снизу. 

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

Вот JSFIDDLE

Ответы [ 4 ]

0 голосов
/ 14 сентября 2018

Просто добавьте top: 75px к ключевому кадру , так как изменение height равно 50px.Вы хотите уменьшить height на 25px или половину с обеих сторон, верх и низ , чтобы достичь желаемого значения 10px.Итак 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>
0 голосов
/ 14 сентября 2018

Вы можете использовать transform

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

0.1666 происходит от 10px / 60px

0 голосов
/ 14 сентября 2018

Вы можете анимировать top с помощью height, чтобы изменение высоты отображалось из центра: 

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

Вы также можете использовать transform: scaleY() в анимации. По умолчанию источник преобразования является центром. 

.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>
0 голосов
/ 14 сентября 2018

Вот, пожалуйста. Я использую анимацию top вместо height. Красный переключатель также нуждается в «контейнере», поэтому я просто использовал тот, который был у вас там. При изменении размеров красного переключателя измените внешнюю обертку, а не элемент переключателя (он будет соответствовать размеру контейнера по ширине и высоте)

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