Не в состоянии сделать CSS3 анимацию непрерывной - PullRequest
Новая
       46

Не в состоянии сделать CSS3 анимацию непрерывной

1 голос
/ 06 марта 2019

Я слежу за одним блогом, чтобы понять анимацию CSS3. Я хотел сделать эффект выделения по вертикали, используя CSS3. Я следовал этому примеру . Но моя проблема в том, почему происходит задержка перезапуска анимации? Когда свиток опускается вниз, он не начинается сразу сверху. Задержка составляет 2,3 секунды. Как запустить анимацию сверху сразу после окончания прокрутки. Я прилагаю файл GIF здесь, чтобы понять гораздо лучше.

Фрагмент кода: 

<!DOCTYPE html>
<title>Example</title>

<!-- Styles --> 
<style>
.example3 {
 height: 200px; 
 overflow: hidden;
 position: relative;
}
.example3 h3 {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateY(-100%);
 -webkit-transform:translateY(-100%);   
 transform:translateY(-100%);
 /* Apply animation to this element */  
 -moz-animation: example3 15s linear infinite;
 -webkit-animation: example3 15s linear infinite;
 animation: example3 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example3 {
 0%   { -moz-transform: translateY(-100%); }
 100% { -moz-transform: translateY(100%); }
}
@-webkit-keyframes example3 {
 0%   { -webkit-transform: translateY(-100%); }
 100% { -webkit-transform: translateY(100%); }
}
@keyframes example3 {
 0%   { 
 -moz-transform: translateY(-100%); /* Firefox bug fix */
 -webkit-transform: translateY(-100%); /* Firefox bug fix */
 transform: translateY(-100%);      
 }
 100% { 
 -moz-transform: translateY(100%); /* Firefox bug fix */
 -webkit-transform: translateY(100%); /* Firefox bug fix */
 transform: translateY(100%); 
 }
}
</style>

<!-- HTML -->
<div class="example3">
<h3>Scrolling down... </h3>
</div>

enter image description here

Ответы [ 3 ]

1 голос
/ 06 марта 2019

Вам нужно перенастроить движения.

Я установил 3 примера с решением, которое у вас есть: первая позиция, вторая и анимация.

А затем еще 3 примера с возможным решением, с начальным состоянием, конечным и анимацией.

Я удалил переполнение: скрыл и закрасил полупрозрачный элемент, чтобы было легко увидеть, что происходит 

.example {
  height: 200px;
  width: 100px;
  position: relative;
  border: solid 1px;
  margin-top: 200px;
  display: inline-block;
}

.example h3 {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 50px;
  text-align: center;
  background-color: rgba(200, 200, 255, 0.7);
}

#ex1 h3 {
    transform: translateY(-100%);
}
#ex2 h3 {
    transform: translateY(100%);
}

#ex3 h3 {
  animation: example 15s linear infinite;
}
@keyframes example {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}
#ex4 h3 {
    top: -32px;
}
#ex5 h3 {
    top: -20px;
    transform: translateY(100%);
}
#ex6 h3 {
  animation: example2 15s linear infinite;
}
@keyframes example2 {
  0% {
    transform: translateY(-32px);
  }
  100% {
    transform: translateY(calc(-20px + 100%));
  }
}
<div class="example" id="ex1">
  <h3>Scrolling</h3>
</div>
<div class="example" id="ex2">
  <h3>Scrolling</h3>
</div>
<div class="example" id="ex3">
  <h3>Scrolling</h3>
</div>
<div class="example" id="ex4">
  <h3>Scrolling</h3>
</div>
<div class="example" id="ex5">
  <h3>Scrolling</h3>
</div>
<div class="example" id="ex6">
  <h3>Scrolling</h3>
</div>
1 голос
/ 06 марта 2019

Ваша анимация начинается сразу же, но вы начинаете с позиции -100%.

Если вы хотите начать сверху, измените каждый ключевой кадр на 0 с -100%.Если Вы хотите сразу же скатиться сверху вниз, попробуйте изменить его в соответствии с высотой текстовой строки (-50px). 

<!DOCTYPE html> <title>Example</title>

<!-- Styles -->
<style>
  .example3 {
    height: 200px;
    overflow: hidden;
    position: relative;
  }
  .example3 h3 {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 50px;
    text-align: center;
    /* Starting position */
    -moz-transform: translateY(-50px);
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
    /* Apply animation to this element */
    -moz-animation: example3 15s linear infinite;
    -webkit-animation: example3 15s linear infinite;
    animation: example3 15s linear infinite;
  }
  /* Move it (define the animation) */
  @-moz-keyframes example3 {
    0% {
      -moz-transform: translateY(-50px);
    }
    100% {
      -moz-transform: translateY(100%);
    }
  }
  @-webkit-keyframes example3 {
    0% {
      -webkit-transform: translateY(-50px);
    }
    100% {
      -webkit-transform: translateY(100%);
    }
  }
  @keyframes example3 {
    0% {
      -moz-transform: translateY(-50px); /* Firefox bug fix */
      -webkit-transform: translateY(-50px); /* Firefox bug fix */
      transform: translateY(-50px);
    }
    100% {
      -moz-transform: translateY(100%); /* Firefox bug fix */
      -webkit-transform: translateY(100%); /* Firefox bug fix */
      transform: translateY(100%);
    }
  }
</style>

<!-- HTML -->
<div class="example3"><h3>Scrolling down...</h3></div>
0 голосов
/ 07 марта 2019

Вы можете достичь этого, используя CSS Position

Установив родительский контейнер на относительный, а дочерний элемент на абсолютный, вы можете получить эффект выделения без задержек.

Ниже приведен пример фрагмента, демонстрирующий, что вы хотите, чтобы произошло в вашей области. Здесь мы использовали положение : относительное; к родительскому классу wrap , чтобы сделать положение абсолютным; элемента выделения h4 признать его в качестве родителя.

Переходя к ключевым кадрам , мы устанавливаем для h4 значение top: 0% , чтобы оно удерживалось над контейнером в начале и top: calc (100% - 18px); на пике.

Почему мы должны использовать calc () здесь?

  • По существу, добавление всего лишь 100% к его пиковой позиции приведет к переполнению выделенной области вне родительского элемента, что приведет к странному поведению.

Почему calc (100% - 18px) ?

  • 18px - это размер шрифта по умолчанию для каждого текста, который вы добавляете в элемент, и мы устанавливаем css для выделения на padding: 0; и margin: 0 для удаления лишних пробелов внутри и снаружи, из-за которых выделение выглядит так, как будто у нас есть задержка запуска, потому что мы видим только пробелы, не занятые текстом внутри выделенного поля; 

.wrap {
  position: relative;
  height: 150px;
  width: 100px;
  background: gray;
}

.wrap h4 {
  text-align: center;
  position: absolute;
  top: 0%;
  left: 0%;
  padding: 0;
  margin: 0;
  background-color: red;
  width: 100%;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  0% {
    top: 0%;
  }
  100% {
    top: calc(100% - 18px);
  }
}

@-moz-keyframes marquee {
  0% {
    top: 0%;
  }
  100% {
    top: calc(100% - 18px);
  }
}

@-webkit-keyframes marquee {
  0% {
    top: 0%;
  }
  100% {
    top: calc(100% - 18px);
  }
}
<div class="wrap">
  <h4>Oopsie</h4>
</div>
...