Currently, I am working on an image that has a downward motion upon page load. However, the issue arises when viewing it on smaller screens as it doesn't appear. How can this be resolved?
Here is the HTML code:
<img class="logo" src="images/Untitled-2.png" alt="">
Below is the CSS code:
.logo {
position:relative;
top: -160%;
transform: translateY(100%);
width: 50%;
transition: 5s;
-webkit-transition-delay: 4000ms;
-moz-transition-delay: 4000ms;
-o-transition-delay: 4000ms;
transition-delay: 4000ms;
}