<!DOCTYPE html>
<html>
<head>
<style>
.slideUp {
animation-name: slideUp;
animation-name: slideUp;
animation-duration: 1s;
animation-duration: 1s;
visibility: visible;
}
@keyframes slideUp {
0% {
opacity: 0;
transform: translateY(70%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
body {height:1500px;}
.col-1 {float:left}
.col-2 {float:left;padding-left:25px;}
img {width:180px;height:100px;visibility:hidden;}
hr {margin-top:400px;}
</style>
</head>
<body>
<h1>The onscroll Event</h1>
<p>Scroll down this page.</p>
<p>When you have scrolled 350px from the top, an image will slide in.</p>
<hr>
<div class="col-1">
<img id="myImg" src="img_pulpit.jpg" width="304" height="228">
</div>