CSS анимация ключевых кадров при изменении размера окна - PullRequest
Новая
       8

CSS анимация ключевых кадров при изменении размера окна

0 голосов
/ 18 ноября 2018

Я пытаюсь создать анимацию CSS, и я собрал воедино что-то, что работает на полном экране, но не так, как предполагалось при изменении размера окна.

Я использую анимации @keyframe для перемещения рамки и границы на несколько разных скоростях, но в конечном итоге они собираются вместе в конце анимации.

Вот кодекс с разметкой: https://codepen.io/RichieBrennan/pen/wQrGMJ?editors=1100

<header>
   <div class="border"></div>
   <div class="box">
      <h1>This is some text</h1>
   </div>
</header>

Как я понимаю,% находится от центра элемента? Я был бы признателен, если бы кто-то подтолкнул меня в правильном направлении.

Спасибо.

Ответы [ 2 ]

0 голосов
/ 19 ноября 2018

Это связано с тем, что элемент .border расположен на элементе header, который охватывает полный body, а не элемент .box, поэтому позиционирование в% не соответствует ширине .box.

Вам понадобится элемент .border внутри элемента .box, так как CSS требуется ширина .box. 

<header>
    <div class="box">
        <div class="border"></div>
        <h1>This is some text</h1>
    </div>
</header>

Теперь поместите элемент .border на 10px (такой же, как ширина) влево (-10px): 

.border{
  position: absolute;
  width: 10px;
  height: 200px;
  background-color: yellow;
  transform: translate(-0%, -50%);
  left: -10px;
  top: 50%;
  animation: move-border 1.1s;
}

Теперь важно изменить @keyframes move-border влево на отрицательное число% (отрегулируйте это по своему усмотрению). 

   @keyframes move-border {
      0%{
      left: -29%;
      opacity: 0; 
      }
      100%{
      opacity: 1;
      }
   }

В качестве альтернативы вы можете использовать псевдо :before вместо чистого HTML-кода:

HTML 

<header>
  <div class="box">
    <h1>This is some text</h1>
  </div>
</header>

CSS 

.box:before
{
  content: '';
  display: block;
  position: absolute;
  width: 10px;
  height: 200px;
  background-color: yellow;
  transform: translate(-0%, -50%);
  left: -10px;
  top: 50%;
  animation: move-border 1.1s;
}

Выезд: https://codepen.io/StudioKonKon/pen/xQXgVV

0 голосов
/ 19 ноября 2018

Хорошие вопросы.

Как правило, % - это единица измерения непосредственных родительских измерений, которая берется из ширины / высоты в зависимости от того, как вы ее используете.Например, скажем, у вас есть 1000px x 500px контейнер.Если у вашего ребенка left: 50% или right: 50%, вы будете позиционировать ребенка с измерением 500px (половина от 1000), привязанным слева или справа.Те же правила применяются к top: 50% или bottom: 50%, за исключением того, что теперь вы будете иметь дело с 250px (половина из 500).Честно говоря, я никогда ничего не запоминал и ничего не делал (отсюда и плохое объяснение), я просто полагался на инструменты для взлома браузеров, и эти знания следуют дальше.

Что вы можете сделать, чтобы решить свое позиционированиепроблема заключается в размещении position: relative на родительском элементе - вашем заголовке.Вы сделали это, но я собираюсь переобъяснить, просто чтобы быть тщательным.

position: absolute обычно позволяет позиционировать элемент (сверху, слева, справа или снизу) относительно окна браузера.;top: 0px; left: 0px; будет верхний левый угол.Размещение position: relative или absolute на родительском элементе позволяет всем дочерним элементам position: absolute быть относительными по отношению к их родителю.

В следующем примере .some-child будет находиться на расстоянии 20px от всего, потому чтовсе измерения относятся к родителю. 

.some-parent {
     margin: 20px;
     position: relative;
}

.some-child {
     position: absolute;
     top: 0;
     left: 0;
}

Используя эти знания, ваш заголовок должен быть относительным, а границы и рамки могут быть абсолютными.Однако вы должны убедиться, что ваш header ограничен правильными размерами, и вы должны использовать абсолютные пиксели для определения смещений.Это объяснение немного вышло из-под контроля, поэтому я просто покажу вам, что я имею в виду. 

* {
  /* helpful for debugging, but use your developer tools */
  outline: 1px solid red;
}

header{
  height: 200px;
  width: 410px;
  position: relative;
  background: lightblue;
}

.border{
  position: absolute;
  width: 10px;
  background-color: yellow;
  /* see comment below
  transform: translate(-0%, -50%);*/
  left: 0;
  top: 0;
  height: 100%; /* height matches parent */
  animation: move-border 1.1s;
}

.box{
  position: absolute;
  left: 10px;
  top: 0;
  height: 100%;
  right: 0;
  /* don't need this! You should try to make
     your animations animate to transform: none,
     which are essentially transform: translate(0, 0).
     Makes it a lot easier to layout things
     and the move-box animation automatically transforms
     back to the original state (if no 100% is defined)
  transform: translate(-50%, -50%);*/
  background-color: white;
  animation: move-box 0.8s;
}

.box h1{
  /* doesn't need to be absolute! but you can play with these numbers,
     they will be relative to .box
  position: absolute;
  left: 25px;
  top: 50px;
  */
  animation: fadein 2s ease-in;
}

@keyframes move-box {
  0% {
   
  left: 35%;
  opacity: 0; 
  }
  100%{
  }
}

@keyframes move-border {
  0%{
  left: 22%;
  opacity: 0; 
  }
  100%{
  opacity: 1;
  }
  
}

@keyframes fadein {
  0% {opacity: 0;}
  100%{opacity: 1;}
}
<header>
  <div class="box">
    <h1>This is some text</h1>
  </div>
  <div class="border"></div>
</header>

Чтобы центрировать заголовок, как раньше, просто оберните его в другом контейнере и выполните некоторую логику центрирования там.

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

...