animation - background

Revision:

Content

Autumn is coming! moving background pictures around diagonal sliding bars as background animated backgrounds animated background colors

Autumn is coming!

top
code:

Autumn is coming!

code: 
                    <div>
                        <section>
                            <h3>Autumn is coming!</h3>
                            <div class="leaf">
                                <div><img src="../images/Fall-Autumn-Leaves-Transparent-PNG.png" height="75px" width="75px"></img></div>
                                <div><img src="../images/Autumn-Fall-Leaves-Pictures-Collage-PNG.png" height="75px" width="75px"></img></div>
                                <div><img src="../images/Autumn-Fall-Leaves-Clip-Art-PNG.png" height="75px" width="75px" ></img></div>
                                <div><img src="../images/Green-Leaves-PNG-File.png" height="75px" width="75px"></img></div>
                                <div><img src="../images/Transparent-Autumn-Leaves-Falling-PNG.png" height="75px" width="75px"></img></div>
                                <div><img src="../images/Realistic-Autumn-Fall-Leaves-PNG.png" height="75px" width="75px"></div>
                                <div><img src="../images/Autumn-Leaves-PNG-HD.png" height="75px" width="75px"></div>
                            </div>
                            <div class="leaf leaf1">
                                <div><img src="../images/Fall-Autumn-Leaves-Transparent-PNG.png" height="75px" width="75px"></img></div>
                                <div><img src="../images/Autumn-Fall-Leaves-Pictures-Collage-PNG.png" height="75px" width="75px"></img></div>
                                <div><img src="../images/Autumn-Fall-Leaves-Clip-Art-PNG.png" height="75px" width="75px" ></img></div>
                                <div><img src="../images/Green-Leaves-PNG-File.png" height="75px" width="75px"></img></div>
                                <div><img src="../images/Transparent-Autumn-Leaves-Falling-PNG.png" height="75px" width="75px"></img></div>
                                <div><img src="../images/Realistic-Autumn-Fall-Leaves-PNG.png" height="75px" width="75px"></div>
                                <div><img src="../images/Autumn-Leaves-PNG-HD.png" height="75px" width="75px"></div>
                            </div>
                            <div class="leaf leaf2">
                                <div><img src="../images/Fall-Autumn-Leaves-Transparent-PNG.png" height="75px" width="75px"></img></div>
                                <div><img src="../images/Autumn-Fall-Leaves-Pictures-Collage-PNG.png" height="75px" width="75px"></img></div>
                                <div><img src="../images/Autumn-Fall-Leaves-Clip-Art-PNG.png" height="75px" width="75px" ></img></div>
                                <div><img src="../images/Green-Leaves-PNG-File.png" height="75px" width="75px"></img></div>
                                <div><img src="../images/Transparent-Autumn-Leaves-Falling-PNG.png" height="75px" width="75px"></img></div>
                                <div><img src="../images/Realistic-Autumn-Fall-Leaves-PNG.png" height="75px" width="75px"></div>
                                <div><img src="../images/Autumn-Leaves-PNG-HD.png" height="75px" width="75px"></div>
                            </div>
                        </section>
                    </div>
                    <style>
                        section{height:100%; width:100%; position:absolute; }
                        .leaf{position:absolute; width:100%; height:100%; top:0; left:0;}
                        .leaf div{position:absolute; display:block;}
                        .leaf div:nth-child(1){left:20%; animation:fall 15s linear infinite; animation-delay:-2s;}
                        .leaf div:nth-child(2){left:70%; animation:fall 15s linear infinite; animation-delay:-4s;}
                        .leaf div:nth-child(3){left:10%; animation:fall 20s linear infinite; animation-delay:-7s;}
                        .leaf div:nth-child(4){left:50%; animation:fall 18s linear infinite; animation-delay:-5s;}
                        .leaf div:nth-child(5){left:85%; animation:fall 14s linear infinite; animation-delay:-5s;}
                        .leaf div:nth-child(6){left:15%; animation:fall 16s linear infinite; animation-delay:-10s;}
                        .leaf div:nth-child(7){left:90%; animation:fall 15s linear infinite; animation-delay:-4s;}
            
                        @keyframes fall{
                            0%{opacity:1;top:-10%;transform:translateX(20px) rotate(0deg);}
                            20%{opacity:0.8;transform:translateX(-20px) rotate(45deg);}
                            40%{transform:translateX(-20px) rotate(90deg);}
                            60%{transform:translateX(-20px) rotate(135deg);}
                            80%{transform:translateX(-20px) rotate(180deg);}
                            100%{top:110%;transform:translateX(-20px) rotate(225deg);}
                            }
                        .leaf1{transform: rotateX(180deg);}
                        .leaf2{transform: rotateY(180deg);}
                        h3{position:absolute; top:40%; width:100%; font-family: 'Courgette', cursive; font-size:4em; 
                        text-align:center; transform:translate;color:black; transform:translateY (-50%); }
                    </style>

moving background pictures around

top
moving background pictures
Codes: 
                <div class="main_A"></div>
                <div class="d1"></div>
                <div class="d2"></div>
                <div class="d3"></div>
                <div class="d4"></div>
                <style>
                    .main_A {height: 100vh; width: 100vw; position: relative;}
                    .d1 {position: absolute; margin-top: 40vw; background-image: url("../images/2.jpg"); background-size: 50vw 25vw; height: 30vh;  width: 15vw;background-position: 0 50%; 
                    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.8); top: 50%; transform: translateY(-50%); z-index: 2;  animation: dd1 10s 4, dd12 10s 4;  animation-delay: 4s, 4s;}
                    .d2 {position: absolute; margin-top: 40vw; background-image: url("../images/3.jpg"); background-size: 26vw 44vw; height: 85vh; width: 20vw; background-position: -10vw 50%; 
                    left: 10vw; top: 50%; transform: translateY(-50%); z-index: 1; animation: dd2 10s 5; animation-delay: 4s;}
                    .d3 {position: absolute; margin-top: 40vw; background-image: url("../images/4.jpg"); background-size: 100vw 52vw; overflow: hidden; height: 90vh; width: 35vw;
                        left: 25vw; box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.8); background-position: -35vw 50%; top: 50%; transform: translateY(-50%);
                        z-index: 3; animation: dd3 5s 7; animation-delay: 4s;}
                    .d4 {position: absolute; margin-top: 40vw; overflow: hidden; background-image: url("../images/5.jpg"); background-size: 85vw 35vw; height: 68vh; width: 50vw;
                        left: 40vw; background-position: -70vw 50%; top: 50%; transform: translateY(-50%); z-index: 1; animation: dd4 5s 8;animation-delay: 4s;}
    
                    @keyframes dd1 {
                        0% {   }
                        50% { width: 100vw;}
                    }
                        @keyframes dd12 {
                        0% { }
                        50% {background-position: Calc(0vw - 40px) 50%;}
                    }
                    @keyframes dd2 {
                        0% { }
                        50% {background-position: Calc(-10vw - 70px) 70%;}
                    }
                    @keyframes dd3 {
                        0% {}
                        50% {background-position: Calc(-35vw + 100px) 70%;}
                    }
                    @keyframes dd4 {
                        0% { }
                        50% {background-position: Calc(-70vw - 150px) 70%;}
                    }
                </style>

diagonal sliding bars as background

top
diagonal sliding bars as background

diagonal sliding of bars

Codes: 
                <div>
                    <section class="main_B">
                        <div class="bg"></div>
                        <div class="bg bg2"></div>
                        <div class="bg bg3"></div>
                        <div class="content_B"><h1>diagonal sliding of bars</h1></div>
                    </section>
                </div>
                <style>
                    .main_B{height: 20vw; width: 40vw;}
                    .bg{animation:slide 13s ease-in-out infinite alternate;  
                        background-image: linear-gradient(-60deg, seagreen 50%, skyblue 50%); bottom:0; 
                        left:-5%; opacity:.5; position: absolute; right:-5%; top:5vw; z-index:-1; } 
                    .bg2 {animation-direction:alternate-reverse; animation-duration:14s;}
                    .bg3 {animation-duration:15s;}
                    .content_B {background-color:seagreen;border-radius: 25vw; box-shadow:0 0 1vw rgba(0,0,0,.25); 
                        box-sizing:border-box;left:50%; padding:1vmin; position:absolute; text-align:center;
                        top: 30%; transform:translate(-50%, -50%);}
                    @keyframes slide {
                        0% {transform:translateX(-25%);}
                        100% {transform:translateX(25%);}
                    }    
                </style>

animated backgrounds

top
headers
photo 1
code: 
                <header class="one"><img src="../images/5.jpg"  alt="photo 1" width="25%";/></header>
                <style>
                header{background-image: url('../images/5.jpg'); width: 30vw; height:25vw; background-repeat:no-repeat; 
                background-size: cover;}
                header{animation: animate_A 5s infinite alternate;}
                .one img{display: flex; justify-items:first baseline; border: 0.5vw solid burlywood;}
                .one img{animation: slide_A 5s infinite alternate ease-in-out 0s;} 
                @keyframes animate_A{
                    from{background-position: 0 0;}
                    to{background-position: 150% 150%;}
                } 
                @keyframes slide_A{
                    0% {transform:translateX(0%);}
                    100% {transform:translateX(175%);}
                }        
                </style>

main
photo 2
code: 
                <main class="two"><img src="../images/1.jpg" alt="photo 2" width="20%"/> </main>
                <style>
                main{background-image: url('../images/1.jpg'); height:20vw;background-repeat:repeat;}
                main{animation: animate_B 5s infinite alternate;}
                .two img{display: flex; justify-items:first baseline; border: 5px solid burlywood;}
                .two img{animation: slide_B 5s infinite alternate ease-in-out 0s;}
                @keyframes animate_B{
                    from{background-position: 0 0;}
                    to{background-position: 100% 50%;}
                }
                @keyframes slide_B{
                    0% {transform:translateX(0%);}
                    100% {transform:translateX(175%);}
                }
                </style>

section
photo 3
code: 
                <div>
                    <section class="three"><img src="../images/4.jpg" alt="photo 3" width="10%"/></section>
                </div>
                <style>
                    .three{background-image: url('../images/4.jpg'); height:20vw; width: 20%; background-repeat:repeat;}
                    .three{animation: animate_C 15s infinite alternate;}
                    .three img{display: flex; justify-items:first baseline; border: 5px solid burlywood;}
                    .three img{animation: slide_C 5s infinite alternate ease-in-out 0s;} 
                    @keyframes animate_C{
                        from{background-position: 0 0;}
                        to{background-position: 100% 50%;}
                    }
                    @keyframes slide_C{
                        0% {transform:translateX(0%);}
                        100% {transform:translateX(175%);}
                    }
                </style>

aside
code: 
                <aside class="four"><img src="../images/3.jpg" alt="photo 4" width="15%"/></aside>
                <style>
                    aside{background-image: url('../images/3.jpg'); height:20vw; background-repeat:repeat;}
                    aside{animation: animate_D 9s infinite alternate;}
                    .four img{display: flex; justify-items:first baseline; border: 5px solid burlywood;}
                    .four img{animation: slide_D 5s infinite alternate ease-in-out 0s;} 
                    @keyframes animate_D{
                        from{background-position: 0 0;}
                        to{background-position: 100% 50%;}
                    }
                    @keyframes slide_D{
                        0% {transform: translateX(0%) translateY(0%);}
                        100% {transform: translateX(280%) translateY(40%);}
                    }
                </style>

footer
photo 5
code: 
                <footer class="five"><img src="../images/2.jpg" alt="photo 5" width="25%"/></footer>
                <style>
                    footer{background-image: url('../images/2.jpg'); height:20vw; background-repeat:repeat;}
                    footer{animation: animate_E 2s infinite alternate;}
                    .five img{display: flex; justify-items:first baseline; border: 5px solid burlywood;}
                    .five img{animation: slide_E 5s infinite alternate ease-in-out 0s;} 
                    @keyframes animate_E{
                        from{background-position: 0 0;}
                        to{background-position: 100% 50%;}
                    }
                    @keyframes slide_E{
                        0% {transform: translateX(0%) translateY(0%);}
                        100% {transform: translateX(280%) translateY(40%);}
                    }
                </style>

animated background colors

top
animated background colors in CSS

animated background colors

code: 
                <h4>animated background colors</h4>
                <style>
                    @keyframes colorMe {
                        0%   { background: #33CCCC; }
                        20%  { background: #33CC36; }
                        40%  { background: #B8CC33; }
                        60%  { background: #FCCA00; }
                        80%  { background: #33CC36; }
                        100% { background: #33CCCC; }
                    }
                    .color_1 {background: #33CCCC; animation: colorMe 9s infinite linear;  text-align: center; padding: 2vw;}
                    h4 {text-align: center; font-family: 'Kavoon', sans-serif; font-size: 2.5vw; color: white;}
                </style>

CSS animated background gradient
code: 
                <div class=color-2>
                    <div class="bg_A"></div>
                </div>
                <style>
                    .bg_A{ width: 100%;height: 50vh; display: flex; align-items: center; justify-content: center; 
                        background-size: 300% 300%;background-image: linear-gradient(-45deg, yellow 0%, yellow 25%, 
                        yellow 51%, #ff357f 100%); -webkit-animation: AnimateBG 20s ease infinite;animation: 
                        AnimateBG 20s ease infinite;} 
                    @-webkit-keyframes AnimateBG {
                        0% {background-position: 0% 50%;}
                        50% {background-position: 100% 50%;}
                        100% {background-position: 0% 50%;}
                    }  
                    @keyframes AnimateBG {
                        0% {background-position: 0% 50%;}
                        50% {background-position: 100% 50%;}
                        100% {background-position: 0% 50%; }
                    }
                </style>

basic landscape background animation

Background Animation

code: 
                <div class="color_4">
                    <div class="center">
                        <h4>Background Animation</h4>
                    </div>
                </div>
                <style>
                    /* @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:200'); */
                    .color_4{width: 45vw; height: 80vh; background-image: url('../images/1.jpg'); background-size: cover; -webkit-animation: slidein 100s; animation: slidein 100s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;  -webkit-animation-direction: alternate; animation-direction: alternate;}
                    @-webkit-keyframes slidein {
                        from {background-position: top; background-size:3000px; }
                        to {background-position: -100px 0px;background-size:2750px;}
                    }
                    @keyframes slidein {
                        from {background-position: top;background-size:3000px; }
                        to {background-position: -100px 0px;background-size:2750px;}
                    }
                    .color_4.center{display: flex; align-items: center; justify-content: center; position: absolute; margin: auto; top: 0; right: 0;  bottom: 0;
                    left: 0; background: rgba(75, 75, 250, 0.3); border-radius: 3px;}
                    .center h4{ text-align:center; color:white; font-family: 'Source Code Pro', monospace;  text-transform:uppercase; }
        
                </style>

blobber background
code: 
                <div class="color_5">
                    <div class="slider-thumb"></div>
                </div>
                <style>
                .color_5 { height: 80vh; background: linear-gradient(90deg,#e52e71,#ff8a00);}
                    .slider-thumb::before {position: relative; content: ""; left: 20%; top: 5vw;  width: 30vw; 
                    height: 30vw; background: #17141d; border-radius: 62% 47% 82% 35% / 45% 45% 80% 66%; 
                    will-change: border-radius, transform, opacity; animation: sliderShape 5s linear infinite; 
                    display: block; z-index: 1; -webkit-animation: sliderShape 5s linear infinite; }
                    @keyframes sliderShape{
                        0%,100%{ border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; transform: 
                            translate3d(0,0,0) rotateZ(0.01deg);}
                        34%{ border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%; transform:  
                            translate3d(0,5px,0) rotateZ(0.01deg); }
                        50%{ transform: translate3d(0,0,0) rotateZ(0.01deg);}
                        67%{border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ; transform: 
                            translate3d(0,-3px,0) rotateZ(0.01deg);}
                    }
                </style>

water wave background animation
code: 
                <div class="color_6">
                    <section>
                        <div class='air air1'></div>
                        <div class='air air2'></div>
                        <div class='air air3'></div>
                        <div class='air air4'></div>
                    </section>
                </div>
                <style>
                    .color_6 section{ position: relative; width: 100%; height: 60vh; background: #3586ff; 
                        overflow: hidden; }
                    .color_6 section .air{position: absolute; bottom: 0; left: 0; width: 100%; 
                        height: 100px; background: url(../images/wave.png); background-size: 1000px 100px;}
                    .color_6 section .air.air1{animation: wave 30s linear infinite; z-index: 1000; 
                        opacity: 1; animation-delay: 0s; bottom: 0; }
                    .color_6 section .air.air2{ animation: wave2 15s linear infinite; z-index: 999;
                         opacity: 0.5; animation-delay: -5s; bottom: 10px;}
                    .color_6 section .air.air3{animation: wave 30s linear infinite; z-index: 998;
                         opacity: 0.2; animation-delay: -2s; bottom: 15px; }
                    .color_6 section .air.air4{ animation: wave2 5s linear infinite; z-index: 997;
                         opacity: 0.7; animation-delay: -5s; bottom: 20px;  }
                    @keyframes wave{
                        0%{background-position-x: 0px;}
                        100%{background-position-x: 1000px; }
                        
                    }
                    @keyframes wave2{
                        0%{background-position-x: 0px;}
                        100%{background-position-x: -1000px;}
                    }
                </style>