Есть ли способ сместить или отложить анимацию li?

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

Вот код:

.nav-item a {
  display: block;
  text-decoration: none;
  color: black;
  padding: 10;
  margin: 2px 0;
  width: 200px;
  display: flex;
  align-items: center;
  margin-left: -173px;
  transition: 0.2s ease;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
}


li i {
  color: black;
  font-size: 27px;
  padding: 0;
  filter: grayscale(100%) opacity(0.3);
  width: 100%;
  text-align: right;
  transition: 0.2s ease;
  text-shadow: 1px 1px 3px #000000;
  animation: FadeIn 1s linear;
  animation-fill-mode: both;
}
@keyframes FadeIn {
  0% {
    opacity: 0;
    transform: scale(0.1);
  }

  85% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.navbar-nav li {
  animation: my-animation 300ms ease-out;
}

.navbar-nav li:nth-child(1) {
  animation-delay: 100ms;
}

.navbar-nav li:nth-child(2) {
  animation-delay: 200ms;
}

.navbar-nav li:nth-child(3) {
  animation-delay: 300ms;
}

 <link href = "https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap" rel = "stylesheet"></link>
  <script src = "https://kit.fontawesome.com/5a479f40ed.js"></script>
<ul class = "navbar-nav">
  
    <li class = "nav-item"><a href = "Index.php" id = "<?php if ($page=='home'){echo 'active';}?>">About<i class = "far fa-user" id = "<?php if ($page=='home'){echo 'active';}?>"></i></a></li>
    <li class = "nav-item"><a href = "Resume.php" id = "<?php if ($page=='Resume'){echo 'active';}?>">Resume<i class = "far fa-file" id = "<?php if ($page=='Resume'){echo 'active';}?>"></i></a></li>
    <li class = "nav-item"><a href = "Portfolio.php"id = "<?php if ($page=='Portfolio'){echo 'active';}?>">Portfolio<i class = "fas fa-guitar" id = "<?php if ($page=='Portfolio'){echo 'active';}?>"></i></a></li>
    <li class = "nav-item"><a href = "Contact.php" id = "<?php if ($page=='Contact'){echo 'active';}?>">Contact<i class = "far fa-address-card" id = "<?php if ($page=='Contact'){echo 'active';}?>"></i></a></li>

Что вы подразумеваете под «смещением анимации ли»?

— 22.12.2020 18:38

Что-то вроде задержки анимации 1-го значка на последний.

— 22.12.2020 18:39

javascript html css

22.12.2020 18:35

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

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

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

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я реорганизовал ваш код, и в нем не хватало нескольких вещей.

.navbar-nav li анимация говорит my-animation, но я изменил это на ваше название анимации FadeIn.
Я добавил i к .navbar-nav li:nth-child(1) i, чтобы анимация выполнялась для этого элемента, а не для его родителя.

Там может быть несколько других вещей, но вы были почти там.

.nav-item a {
  display: block;
  text-decoration: none;
  color: black;
  padding: 10;
  margin: 2px 0;
  width: 200px;
  display: flex;
  align-items: center;
  margin-left: -173px;
  transition: 0.2s ease;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
}


li i {
  color: black;
  font-size: 27px;
  padding: 0;
  filter: grayscale(100%) opacity(0.3);
  width: 100%;
  text-align: right;
  transition: 0.2s ease;
  text-shadow: 1px 1px 3px #000000;
}

.navbar-nav li i {
  opacity: 0;
  animation: FadeIn 0.3s ease-out 0s forwards 1;
}

.navbar-nav li:nth-child(1) i {
  animation-delay: 100ms;
}

.navbar-nav li:nth-child(2) i {
  animation-delay: 200ms;
}

.navbar-nav li:nth-child(3) i {
  animation-delay: 300ms;
}
.navbar-nav li:nth-child(4) i {
  animation-delay: 400ms;
}

@keyframes FadeIn {
  0% {
    opacity: 0;
    transform: scale(0.1);
  }

  85% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

<link href = "https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap" rel = "stylesheet"></link>
  <script src = "https://kit.fontawesome.com/5a479f40ed.js"></script>
<ul class = "navbar-nav">
  
    <li class = "nav-item"><a href = "Index.php" id = "<?php if ($page=='home'){echo 'active';}?>">About<i class = "far fa-user" id = "<?php if ($page=='home'){echo 'active';}?>"></i></a></li>
    <li class = "nav-item"><a href = "Resume.php" id = "<?php if ($page=='Resume'){echo 'active';}?>">Resume<i class = "far fa-file" id = "<?php if ($page=='Resume'){echo 'active';}?>"></i></a></li>
    <li class = "nav-item"><a href = "Portfolio.php"id = "<?php if ($page=='Portfolio'){echo 'active';}?>">Portfolio<i class = "fas fa-guitar" id = "<?php if ($page=='Portfolio'){echo 'active';}?>"></i></a></li>
    <li class = "nav-item"><a href = "Contact.php" id = "<?php if ($page=='Contact'){echo 'active';}?>">Contact<i class = "far fa-address-card" id = "<?php if ($page=='Contact'){echo 'active';}?>"></i></a></li>

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

— 22.12.2020 18:48

Никаких забот. Вы вызывали анимацию на .navbar-nav li i, но затем пытались настроить на .navbar-nav li, так что не удалось закрыть.

— 22.12.2020 18:50

22.12.2020 18:46