Html and Css || rotate , pulse, slideIn , fadeIn || Animation Project Code Free
HTML
<br><br>
<div class="div"></div>
<br><br>
<div class="div2"></div>
<br><br>
<div class="div3"></div>
<br><br>
<div class="div4"></div>
<br><br>
<div class="div5"></div>
CSS Code
body{
background: black
}
<style>
.div{
margin-left: 350px;
margin-top:150px;
width: 250px;
height: 300px;
position: relative;
background-color: #00F1FF;
overflow: hidden;
display: grid;
border-radius: 15px;
place-items: center;
box-shadow: rgb(18, 28, 39) 0px 20px 30px -10px;
animation: rotate 1s infinite;
}
@keyframes rotate {
0%{ transform: rotate(0de);}
100%{ transform: rotate(360deg);}
}
.div2{
margin-left: 350px;
width: 250px;
height: 300px;
position: relative;
background-color: #00F1FF;
overflow: hidden;
display: grid;
border-radius: 15px;
place-items: center;
box-shadow: rgb(18, 28, 39) 0px 20px 30px -10px;
animation: pulse 1s infinite;
}
@keyframes pulse {
0%,100%{transform: scale(1);}
50%{ transform: scale(1.2); }
}
.div3{
margin-left: 350px;
width: 250px;
height: 300px;
position: relative;
background-color: #00F1FF;
overflow: hidden;
display: grid;
border-radius: 15px;
place-items: center;
box-shadow: rgb(18, 28, 39) 0px 20px 30px -10px;
animation: slideIn 1s infinite;
}
@keyframes slideIn {
0%{transform: translateX(-50%); }
50%{transform: translateX(0);}
100%{transform: translateX(50%);}
}
.div4{
margin-left: 350px;
width: 250px;
height: 300px;
position: relative;
background-color: #00F1FF;
overflow: hidden;
display: grid;
border-radius: 15px;
place-items: center;
box-shadow: rgb(18, 28, 39) 0px 20px 30px -10px;
animation: fadeIn 1s infinite;
}
@keyframes fadeIn {
0%{ opacity: 0; }
50%{ opacity: 5;}
100%{ opacity: 0; }
}
.div5{
margin-left: 350px;
width: 250px;
height: 300px;
position: relative;
background-color: #00F1FF;
overflow: hidden;
display: grid;
border-radius: 15px;
place-items: center;
box-shadow: rgb(18, 28, 39) 0px 20px 30px -10px;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%{transform: translateY(0);}
40%{transform: translateY(-20px);}
60%{transform: translateY(-10px);}
}
</style>
Comments
Post a Comment