Recently, I encountered a strange issue with my project. An animation effect that was working perfectly fine suddenly stopped working when I opened the project. To troubleshoot, I downloaded the same project from my GitHub repository and found that the animation worked without any problems.
I decided to copy the code from GitHub and paste it into the project that had the issue, but unfortunately, the animation still did not work. I even tried restarting the computer, but the problem persisted in both Google Chrome and Safari browsers.
The code snippet causing the animation issue is as follows:
.cv img {
position: relative;
top: -12rem;
left: 30rem;
width: 15rem;
cursor: pointer;
animation: click 1s infinite;
}
@keyframes click {
0% {
transform: scale(0.8);
}
100% {
transform: scale(1);
}
}
Interestingly, the code from GitHub which works looks identical to the problematic one. This has left me puzzled as to why there is a difference in behavior between the two versions.
Here is the HTML code snippet related to the animation:
<div class="hero-image">
<div class="human"><img alt="human" src="/img/photo.png" /></div>
<div class="skills intro">
<img alt="skills" src="/img/js.png" />
<img alt="skills" src="/img/react.png" />
<img alt="skills" src="/img/c2.png" />
<img alt="skills" src="/img/html2.png" />
<img alt="skills" src="/img/css2.png" />
<img alt="skills" src="/img/python.png" />
</div>
<a
href="/resume.pdf"
class="cv"
target="_blank"
rel="noopener noreferrer"
><img alt="c" src="/img/cv2.png"
/></a>
</div>