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

Я слежу за одним блогом, чтобы понять анимацию 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>

css css-animations translate-animation

06.03.2019 18:21

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

287

Ответы 3

Ваша анимация начинается немедленно, но вы начинаете с позиции -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>

Тем не менее есть некоторая задержка между концом и началом

— 06.03.2019 20:12

06.03.2019 19:39

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

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

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

Я удалил overflow: hidden и сделал элемент полупрозрачным, чтобы было хорошо видно, что происходит.

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

06.03.2019 21:56

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

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

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

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

Why do we need to use calc() here?

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

Why calc(100% - 18px)?

18 пикселей — это размер шрифта по умолчанию для каждого текста, который вы добавляете в элемент, и мы установили css области выделения на заполнение: 0; и маржа: 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>

07.03.2019 04:30

Другие вопросы по теме

Как создать другую задержку перехода/анимации?

Как я могу анимировать клип-путь гистограммы?

Анимация CSS не в 60FPS

Анимация при загрузке страницы выполняется во второй раз при отпускании мыши

Предварительная загрузка анимации — отображение по клику

Как запустить событие «animationend», если я не могу установить анимацию CSS?

Нужно нарисовать два круга с одинаковым началом (одной центральной точкой), используя стили CSS

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

Как сделать переворот кольца/обруча при прохождении через него мяча?

Не можете сделать задержку рендеринга в css-grid-анимации?

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

Ответы 3

Другие вопросы по теме

Похожие вопросы