Html and Css || rotate , pulse, slideIn , fadeIn || Animation Project Code Free

                                                   HTML & CSS Animation project 

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

Popular posts from this blog

Html And Css Magic Navigation Menu Project || How To use Html & Css