CSS анимация не работает на элементе div внутри flexbox

Question

Может кто-нибудь, пожалуйста, просмотрите следующий блок кода и скажите мне, почему анимация на изображении div и информационном div не работает. это файл html для страницы about. (я вложил содержимое блока в div и присвоил ему относительную позицию)

{%extends 'layout.html' %}
{%block content %}

.about {
  align-items: center;
  top: 5em;
  display: flex;
  flex-direction: row;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

#image {
  animation-name: image2;
  animation-duration: 3s;
  animation-delay: 3s;
  animation-fill-mode: forwards;
}

.image-file {
  border: none;
  border-radius: 100px;
  width: 200px;
  height: 200px;
  margin-right: 100px;
}

#info {
  text-align: center;
  max-width: 100%;
  -webkit-animation-name: info2;
  -webkit-animation-duration: 3s;
  -webkit-animation-fill-mode: forwards;
  animation-name: info2;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes image2 {
  0% {
    left: -100px;
  }
  100% {
    left: 0;
  }
}

@-webkit-keyframes info2 {
  0% {
    right: -100px;
  }
  100% {
    right: 0;
  }
}

@keyframes info2 {
  0% {
    right: -100px;
  }
  100% {
    right: 0;
  }
}

<div class='head1'>
  <h class='head'>Welcome to the Home page</h>
</div>
<div class='about'>
  <div id='image'>
    <image class='image-file' src='https://via.placeholder.com/150' alt='nelson'>
  </div>
  <div id='info'>
    <h class='head'>About me</h>
    <p class='text'>I am a web developer specialized in vanilla css,<br> html and flask. <br>But i am developing further.</p>
  </div>
</div>

Answer 1

Попробуйте добавить:

#image {   position:absolute; }

Answer 2

Если вы используете Firefox, откройте инструменты dev, найдите изображение div и посмотрите информацию о стилях.

Вы увидите что-то вроде этого

Обратите внимание, что слева выделено серым цветом. Теперь наведите курсор на круг «я». Вы увидите сообщение о том, что «left не имеет эффекта, потому что элемент не позиционирован».

Итак, это ваша проблема

.about {
  align-items: center;
  top: 5em;
  display: flex;
  flex-direction: row;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

#image {
  animation-name: image2;
  animation-duration: 3s;
  animation-delay: 3s;
  animation-fill-mode: forwards;
  position: relative;  /* added */
}

.image-file {
  border: none;
  border-radius: 100px;
  width: 200px;
  height: 200px;
  margin-right: 100px;
}

#info {
  text-align: center;
  max-width: 100%;
  -webkit-animation-name: info2;
  -webkit-animation-duration: 3s;
  -webkit-animation-fill-mode: forwards;
  animation-name: info2;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  position: relative;  /* added */
}

@keyframes image2 {
  0% {
    left: -100px;
  }
  100% {
    left: 0;
  }
}

@-webkit-keyframes info2 {
  0% {
    right: -100px;
  }
  100% {
    right: 0;
  }
}

@keyframes info2 {
  0% {
    right: -100px;
  }
  100% {
    right: 0;
  }
}

<div class='head1'>
  <h class='head'>Welcome to the Home page</h>
</div>
<div class='about'>
  <div id='image'>
    <image class='image-file' src='https://via.placeholder.com/150' alt='nelson'>
  </div>
  <div id='info'>
    <h class='head'>About me</h>
    <p class='text'>I am a web developer specialized in vanilla css,<br> html and flask. <br>But i am developing further.</p>
  </div>
</div>