Could someone kindly take a look at the code snippet below and help me troubleshoot why the animation for the image and info divs is not functioning properly? This block of code is from the HTML file for the about page. (I enclosed the content within a div and positioned it relatively)
{%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 continuously learning new things.</p>
</div>
</div>