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.
I would like an code that the animation just appear when shows by the page.
HTML:
<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> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </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>