Home » CSS animation effects with HTML and CSS

CSS animation effects with HTML and CSS

by techmidpoint
CSS animation effects with HTML and CSS

CSS animation effects with HTML and CSS

Hello, guys welcome back another tutorial of techmidpoint. If you are searching for CSS animation for your project, now you can find varieties of CSS animation in techmidpoint tutorial. So in this tutorial, I have brought other useful CSS animation effects with HTML and CSS.

HTML


<!DOCTYPE html>
<html>
    <head>
        <title>CSS animation</title>
        <link rel ="stylesheet" href="style.css">
    </head>
    <body>
        <div class="loader"></div>
    </body>

CSS

body{
    justify-content: center;
    align-items: center;
    display: flex;
    height: 100vh;
    background: rgb(13, 13, 37);

}

.loader{
    width: 240px;
    height: 50px;
    margin: 70px auto 0;
    border-radius: 8px;
    box-shadow: 0 0 0 7px #42a5f5, inset 0 0 0 1px #42a5f5;
    overflow: hidden;
    position: relative; 
    animation: rotate 6s linear infinite;
}
.loader:before{
    content: "";
    background: rgb(131,58,180);
    background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(29,253,62,1) 50%, rgba(252,176,69,1) 100%);
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    animation: load 6s linear infinite;
}
@keyframes rotate {
    0%, 42% { transform: rotate(0deg); }
    48%, 92% { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}
@keyframes load {
    0% { width: 0; }
    40%, 50% { width: 100%; }
    90%, 100% { width: 0; }     
}

You may also like

Leave a Comment