Load the animation just when it apperas on the pag

, ,
#1

When the page loads, the div design makes the animation starts below. If I page down, the div animation already starts.
I would like an code that the animation just appear when shows by the page.

<html>

<head>
<meta name="viewport" content="width=device-width, inicial-scale=1">
<style>

body {
	font-family: Arial;
}

.design_meio_1 {
	border-radius: 15px 50px;
	background-image: linear-gradient(#B31E23,#c0c0c0);
	padding: 22px;
	font-family: Arial;
	text-align: left;
	position: relative;
	opacity: 0;
    top: 80;
    -webkit-transform: translate( 0, 0 );
    -webkit-animation: movimento1 1s 1s linear forwards;
    transform: translate( 0, 0 );
    animation: movimento1 1s 1s linear forwards;
    margin-bottom: 100px
}

@keyframes movimento1 {
	80% {
	    top: 0;
	  }
	100% {
	    top: 0;
	    opacity: 1;
   }          
 }
 
@-webkit-keyframes movimento1 {
	80% {
	    top: 0;
	  }
	100% {
	    top: 0;
	    opacity: 1;
   }          
 }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

	<center>
		<div class="design_meio_1">
			<br>
			<br>
			<span style="font-weight: bold; color: yellow;">Criação e<br>
			Atualização de Web<br>Sites</span><br>
			<br><br>
			<span style="font-weight: bold; color: black;">
			. Textos Elaborados;<br>
			. Design Criativo;<br>
			. Público Alvo;<br>
			. Hospedagem Grátis;<br>
			. Padrão: R$1.500;<br>
			. 5xR$300;<br>
			</span>
			<br>
			<br>
		</div>
	</center>


</body>
</html>
#2

I can’t write the code from memory; it’s been several years since I’ve hand-coded web pages.

However, a JavaScript event listener will likely be necessary to monitor for a scroll event that triggers the CSS animation. When the user scrolls down the page, the script would calculate the current position of the scroll relative to the bottom of the page. Once the user scrolls to a specified distance from the bottom, the script would trigger the CSS transition.

Coding JavaScript has never been my strong suit anyway. You might want to Google “JavaScript event listener”.