Każdy element ze środka strony ma inną animację. Jednak po wprowadzeniu dla każdego elementu float:left wszystkie elementy przejęły animację pierwszego elementu (animacje są w jquery natomiast opadanie w dół jest css- @keyframes). Jak wyłączyć dla 2 i 3 elementu animację pierwszego i sprawić by wykonywały się akcje, które są napisane w jquery ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="face"> <img src="face.png" style="widht:5vh; height:5vh; "></div>
<div class="twitter"> <img src="twitter.png" style="widht:5vh; height:5vh; "></div>
<div class="mail"> <img src="mail.png" style="widht:5vh; height:5vh; "></div>
<div class="dane"> <div class="name">DARIUSZ </div><div class="surname"> HOZER</div></div>
</div>
<div class="main">
<div class="window_learn" >
<div class="html5">HTML5</div>
<div class="jquery">JQUERY</div>
<div class="css3">CSS3</div>
<div class="php5">PHP5</div>
<div class="sql">MySQL</div>
</div>
<div class="web_designer">WEB DESIGNER</div>
<div class="passion">PASJA TWORZENIA STRON</div>
</div>
</body>
</html>
body{
width:100%;
height:auto;
margin:0;
}
.header{
position:fixed;
width:100%;
height:10vh;
background-color:black;
}
.face,.twitter,.mail{
display:inline;
float:left;
margin-left:1vh;
margin-top:2vh;
width:5vh;
height:5vh;
}
.face:hover,.twitter:hover,.mail:hover{
display:inline;
float:left;
margin-left:1vh;
margin-top:2vh;
border:0.2vh solid aqua;
width:5vh;
height:5vh;
}
.dane{
width:15%;
height:10vh;
float:right;
text-align:center;
}
.name{
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-size:2.5vh;
color:white;
line-height:10vh;
float:left;
padding-left:3.5vh;
width:13vh;
height:10vh;
}
.surname{
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-size:2.5vh;
color:white;
line-height:10vh;
float:left;
}
.window_learn{
display: none;
width:38%;
height:5vh;
float:left;
margin-left: 30%;
margin-top:36vh;
animation-name: w_dol;
animation-duration:3s;
}
@keyframes w_dol
{
0% { margin-top:0vh; }
100% { margin-top:36vh; }
}
.html5,.jquery,.css3,.php5,.sql{
font-size:5vh;
float:left;
padding-left: 3.4vh;
font-family: 'Abel';
font-style: normal;
font-weight: 400;
}
.web_designer{
width:50%;
height: :10vh;
display: none;
float:left;
margin-top: 3vh;
margin-left: 25%;
text-align: center;
line-height: 4vh;
font-size: 11vh;
font-family: 'Archivo Black';
font-style: normal;
font-weight: 400;
color:dodgerblue;
}
.passion{
width:21%;
height: 4vh;
clear: both;
float:left;
margin-top: 3vh;
margin-left: 109vh;
text-align: center;
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-size:3vh;
}
@media screen and (max-width: 599px) {
.dane{
float:right;
width:60%;
}
.name{
font-size:2vh;
position:relative;
line-height:10vh;
}
.surname{
font-size:2vh;
position:relative;
line-height:10vh;
}
.window_learn{
visibility: hidden;
}
.web_designer{
width:10%;
height: :10vh;
float:left;
text-align: center;
line-height: 4vh;
font-size: 5vh;
font-family: 'Archivo Black';
font-style: normal;
font-weight: 400;
}
.passion{
visibility: hidden;
}
}
$(document).ready(function(){
$(".face").each(function(){
$(".face").fadeIn(1800);
$(".twitter").fadeIn(1800);
$(".mail").fadeIn(1800);
});
});
$(document).ready(function(){
$(".dane").each(function(){
$(".dane").fadeIn(1800);
});
});
$(document).ready(function(){
$(".web_designer").each(function(){
$(".web_designer").fadeIn(3000);
});
});
$(document).ready(function(){
$(".passion").each(function(){
$(".passion").show(1000);
});
});
$(document).ready(function(){
$(".window_learn").each(function(){
$(".window_learn").fadeIn(1000);
});
});
