how to Load an image from side in html using css

Question

I have been working with w3.css and html and have built a web pages using w3.css div, etc. The page loads text images, it use fading, and other features.

However I noticed some sites have images that load from the right side (like a transition) - can this be done with w3.css.

Answer 1

w3.css has already the possibility to animate elements built-in. https://www.w3schools.com/w3css/w3css_animate.asp

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>

<style>
.slower {
  -webkit-animation-duration: 2.5s !important;
  animation-duration: 2.5s!important;
}
</style>

<div class="w3-container">
  <h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>

<!-- Slower Animation by adding additional class with overwrite -->
<div class="w3-container">
  <h1 class="w3-center w3-animate-right slower">Animation is Fun!</h1>
</div>

You could also use a external CSS animation library like animate.css https://daneden.github.io/animate.css/