CSS Animated background using keyframe v1.0.0

  • Animated Background v1.0.2

    Don't Forget!

                                        <link rel="stylesheet" href="css/main.css"/>
                                

    The Html

    <div class="container">
        <div class="image-wrap">
            <div class="bg-container">
                <div class="background"></div>
                </div>
                    <div class="bubble"></div>
                <div class="bubble2"></div>
            <div class="bubble3"></div>
        </div>
                                

    The CSS

    Well ... the positions of the bubbles are totally up to you , can be placed anywhere. That is also valid for the rotation speed and the degrees of the rotation.

    .image-wrap {
        position: relative;
        overflow: hidden;
        width:100%;
        height:100%;
    }
    
    .image-wrap .background {
        background: url("../images/bg.png") no-repeat center center;
        background-size: cover;
        width:100%;
        height:1280px;
    }
    
    
    .container
    {
        margin-left: 150px;
        margin-right: 150px;
    }
    
    .bubble{
        top: 380px;
        left: 360px;
    }
    
    .bubble2{
        top:490px;
        left:550px;
    }
    
    .bubble3{
        top:600px;
        left:650px;
    }
    
    
    body{
        background: #fff;
        transition: all 1s;
    }
    
    .image-wrap
    .bubble,
    .bubble2,
    .bubble3{
        background: url("../images/element1.png") no-repeat center center;
        background-size: contain;
        position: absolute;
    
        width: 110px;
        height: 120px;
        z-index: 3;
    }
    
    .image-wrap .bubble {
        animation: spin 90s infinite linear;
        transform-origin: 127px 89px;
    }
    
    .bubble2{
        animation: spinLeft 100s infinite linear;
        transform-origin: 127px 89px;
    }
    @keyframes spinLeft {
        0% {
            transform: rotateZ(0deg)
        }
        100% {
            transform: rotateZ(360deg)
        }
    }
    
    .bubble3{
        animation: spinRight 100s infinite linear;
        transform-origin: 127px 89px;
    }
    
    @keyframes spinRight {
        0% {
            transform: rotateZ(0deg)
        }
        100% {
            transform: rotateZ(360deg)
        }
    }
    
    .background{
        animation : move 500s infinite linear;
    }
    
    
    .bg-container
    {
        width:100%;
        margin:0 auto;
    }
    
    @keyframes move {
        20% { width: 100%; height: 100%; }
        50% { width: 100%; height: 100%; }
    }
    
    
    @keyframes spin {
        0% {
            transform: rotateZ(0deg)
        }
        100% {
            transform: rotateZ(360deg)
        }
    }
                                    

  • Category

Up Next

Js Metro Tabs

Alexabdros Okkalides

Magic The Gathering Slider

Alexandros Okkalides

Js-Toolbar

Alexandros Okkalides

Ajax Image Uploader

Alexandros Okkalides