CSS animation-delay не делает задержки перед запуском анимации - PullRequest
Новая
       172

CSS animation-delay не делает задержки перед запуском анимации

0 голосов
/ 07 августа 2020

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

.type-animation {
  box-shadow: .6em 0 0 #00CCC7;
  overflow: hidden;
  white-space: nowrap;
}

h1.type-animation {
  width: 10ch;
  animation-delay: 2s;
  animation: cursor .5s step-end infinite alternate,
             type 1.5s steps(10, end)
}


@keyframes type {
  0% {
    width: 0;
  }
}

@keyframes cursor {
  50% {
    box-shadow: .6em 0 0 transparent;
  }
}
<body>
  <h1 class="type-animation">A Website.</h1>
</body>

Ответы [ 2 ]

0 голосов
/ 07 августа 2020

Если вы хотите создать эффект набора текста, указанный вами метод фрагмента кода выше не идеален и неэффективен.

Вот фрагмент кода эффекта набора с задержкой анимации 2 секунды. Я вставил простую функцию setTimeout в javascript, с помощью которой запускается при загрузке DOM, поэтому текст не будет виден заранее, а только через 2 секунды, когда запланировано начало анимации. 

window.addEventListener('load',(event)=>{
    
  const timer = document.querySelector('.type');
    setTimeout(function(){
      timer.style.opacity = 1;
  },2000);
  

})
/* GLOBAL STYLES */
body {
  background: #333;
  padding-top: 5em;
  display: flex;
  justify-content: center;
}

/* DEMO-SPECIFIC STYLES */
.type{
  color: #fff;
  font-family: monospace;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
 animation-delay: 2s;
 opacity:0;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}
<div class="typewriter">
  <h1 class="type">A website.</h1>
</div>
0 голосов
/ 07 августа 2020

Вы заменяете свой animation-delay: 2s; сокращенным правилом animation внизу.

Переместите animation-delay после правила animation следующим образом: 

h1.type-animation {
  width: 10ch;
  animation: cursor .5s step-end infinite alternate,
             type 1.5s steps(10, end);
  animation-delay: 2s;
}

и задержка будет работать, как вы можете видеть в этом фрагменте: 

.type-animation {
  box-shadow: .6em 0 0 #00CCC7;
  overflow: hidden; 
  white-space: nowrap;
}

h1.type-animation {
  width: 10ch;
  animation: cursor .5s step-end infinite alternate,
             type 1.5s steps(10, end);
  animation-delay: 2s;
}


@keyframes type {
  0% {
    width: 0;
  }
}

@keyframes cursor {
  50% {
    box-shadow: .6em 0 0 transparent;
  }
}
<body>
  <h1 class="type-animation">A Website.</h1>
</body>

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

Это строки, которые вам нужно добавить в сам элемент: 

h1.type-animation {
  /* 1. Start with the element hidden */
  visibility: hidden;  
   /* 2. This keeps it visible after the animation ends (when visibility is on in the last keyframe) */
  animation-fill-mode: forwards;
}

... и в ключевые кадры : 

@keyframes type {
  0% { 
    /* 3. Turn visibility on when animation starts */
    visibility: visible;
  }
  100% {
    /* 4. This along animation-fill-mode will keep visibility after animation ENDS */
    visibility: visible;    
  }
}

Посмотрите, как работает: 

.type-animation {
  box-shadow: .6em 0 0 #00CCC7;
  overflow: hidden; 
  white-space: nowrap;
}

h1.type-animation {
  visibility: hidden;
  width: 10ch;
  animation: cursor .5s step-end infinite alternate,
             type 3s steps(10, end);
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

@keyframes type {
  0% {
    width: 0;
    visibility: visible;
  }
  100%{
    visibility: visible;
  }
}

@keyframes cursor {
  50% {
    box-shadow: .6em 0 0 transparent;
  }
}
<body>
  <h1 class="type-animation"><span>A Website.</span></h1>
</body>
...