Codepen
Jquery Basic Animation
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>page</title>
<link rel="stylesheet" type="text/css" href="main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="box"></div>
<div class="text">CODEBLOGGER</div>
-
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz');
.box{
position: absolute;
background: #DA5437;
width: 100px;
height: 100px;
}
.text{
position: absolute;
z-index: 99;
font-weight: bold;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 0px;
color: #eee;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
JS CODE
$(document).ready(function(){
$(".box").click(function(){
let box = $(this);
let txt = $(".text")
box.animate({
width: "500px",
},"slow")
box.animate({
left: "407px",
width: "100px"
},"slow")
box.animate({
height: "500px"
},"slow")
box.animate({
top: "407px",
height: "100px",
},"slow")
box.animate({
top: "-50%",
left: "-50%",
width: "200%",
height: "200%",
borderRadius: "50%"
},"slow")
setTimeout(function(){
txt.animate({
fontSize: "100px"
})
},3000)
})
})
TrueCodes 
Leave a comment