CSS loading animation using HTML & CSS | 2

  • by

CSS loading animation using HTML & CSS | 2

Step 1) Add HTML:​
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>css loader turtorial</h3>
<div class="flip">

</body>
</html>
Step 2) Add CSS CODE IN style tag​
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background: #edeef1;
margin:0px;
padding: 0px;
}
h3{
text-align: center;
text-transform: uppercase;
font-size: 50px;
margin-left: 100px;
color: #f4db;
}
.flip{
perspective: 120px;
}
.flip{
width: 60px;
height: 60px;
position: relative;
left: 50%;
top:50%;
margin-top: 200px;
background: #007ee3;
animation: flip 1s infinite;
}
@keyframes flip {
0% {

transform: rotate(0);
}

50% {

transform: rotateY(180deg);
}

100% {

transform: rotateY(180deg) rotateX(180deg);
}
}
}
@-webkit-keyframes flip {
0% {
-webkit-transform: rotate(0);

transform: rotate(0);
}

50% {
-webkit-transform: rotateY(180deg);

transform: rotateY(180deg);
}

100% {
-webkit-transform: rotateY(180deg) rotateX(180deg);

transform: rotateY(180deg) rotateX(180deg);
}
}
</style>
</head>

Leave a Reply

Your email address will not be published. Required fields are marked *