<!DOCTYPE html>
<html>
    <head>
        <title>Arka Plan - Animasyon</title>
        <meta name ="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">

    </head>


 <body>
        <div class="welcome">
            <h1>Animasyon css</h1>
        </div>
        <div class="square">
            <ul>
                <li> </li>
                <li> </li>
                <li> </li>
                <li> </li>
                <li> </li>
                <li> </li>
            
            </ul>
        </div>

        <div class="circle">
            <ul>
                <li> </li>
                <li> </li>
                <li> </li>
                <li> </li>
                <li> </li>
                <li> </li>
            
            </ul>
        </div>

 </body>
                </html>
*
{
    margin: 0px;
    padding: 0px;
}

.welcome {
    background-image: linear-gradient(#ff5722,#ffc107);
    position: relative;
    height: 100vh;
    overflow: hidden;
    font-family: sans-serif;
}

h1 {
    color:#fff;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
 
    font-size:24px;
    z-index:1;
}

ul li {
    position: absolute;
    border: 1px solid #fff;
    width:30px;
    height: 30px;
    list-style: none;
    opacity: 0;
    background-color: #fff;
} 

.square li {
    top:53vh;
    left:45vw;
    animation: square 10s linear infinite;
    -webkit-animation: square 10s linear infinite;
}
.square li:nth-child(2) {
    top:80vh;
    left:10vw;
    animation-delay:2s;
  
}
.square li:nth-child(3) {
    top:80vh;
    left:85vw;
    animation-delay:4s;
}
.square li:nth-child(4) {
    top:10vh;
    left:70vw;
    animation-delay:6s;
}
.square li:nth-child(5) {
    top:10vh;
    left:10vw;
    animation-delay:8s;
}

@keyframes square {
    0% {
        transform: scale(0) rotateY(0deg);
   
        opacity: 1;
}
100% {
    transform: scale(5) rotateY(1000deg);
 
    opacity: 0;
}
}


.circle li {
    bottom: 0;
    left:15vw;
    animation: circle 10s linear infinite;
    -webkit-animation: circle 10s linear infinite;
}
.circle li:nth-child(2){
    left:35vw;
    animation-delay:2s;
}
.circle li:nth-child(3){
    left:55vw;
    animation-delay:4s;
}
.circle li:nth-child(4){
    left:75vw;
    animation-delay:6s;
}
.circle li:nth-child(5){
    left:90vw;
    animation-delay:8s;
}

@keyframes circle {
    0%{
        transform: scale(0) rotate(0deg);

        opacity:1;
        bottom:0;
        border-radius: 0;
     
}
100%{
    transform: scale(5) rotate(1000deg);
 
    opacity:0;
    bottom:90vh;
    border-radius: 50%;
 
}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.