Make an image ignore Animation in css

StackOverflow https://stackoverflow.com/questions/22616274

Question

I made a web page that has a slideshow of 6 images for the background. The problem is that I have a certain PNG logo that animates with the background as in the opacity animation is applied on the logo, but I want the logo to stay stable with no Animation.

My HTML Code:

<html>
 <head>

 <title>Creative Designs</title>
 <link rel="shortcut icon" href="Images/Icon.ico"> 
 <link rel="stylesheet" type="text/css" href="Css/Style1.css" />

 </head>
  <body bgcolor="black">
  <div class="logo" align="center" "><img src="Images/Logo.png" alt="Header" /></div>

   <ul class="slideshow">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</body>

and My CSS Code:

ul{ 
margin:0;
padding:0;
  }

   .footer{
   position: absolute;
   bottom: 10;
   left: 20;
   }

   .logo{
       -webkit-animation: none;
       -moz-animation: none;
       -o-animation: none;
       -ms-animation: none;
       animation: none;
   }

   .slideshow li  { 
       width: 100%;
       height: 100%;
       position: absolute;
       top: 0px;
       left: 0px;
       background-size: cover;
       background-position: 50% 50%;
       opacity: 0;
       z-index: 0;
       -webkit-animation: imageAnimation 36s linear infinite 0s;
       -moz-animation: imageAnimation 36s linear infinite 0s;
       -o-animation: imageAnimation 36s linear infinite 0s;
       -ms-animation: imageAnimation 36s linear infinite 0s;
       animation: imageAnimation 36s linear infinite 0s; 
   }

   .slideshow li:nth-child(1) { 
      background-image: url(../Images/Slideshow/1.jpg) 
   }
   .slideshow li:nth-child(2) { 
       background-image: url(../Images/Slideshow/2.jpg);
       -webkit-animation-delay: 6s;
       -moz-animation-delay: 6s;
       -o-animation-delay: 6s;
       -ms-animation-delay: 6s;
       animation-delay: 6s; 
   }
   .slideshow li:nth-child(3)   { 
       background-image: url(../Images/Slideshow/3.jpg);
       -webkit-animation-delay: 12s;
       -moz-animation-delay: 12s;
       -o-animation-delay: 12s;
       -ms-animation-delay: 12s;
       animation-delay: 12s; 
   }
   .slideshow li:nth-child(4)   { 
       background-image: url(../Images/Slideshow/4.jpg);
       -webkit-animation-delay: 18s;
       -moz-animation-delay: 18s;
       -o-animation-delay: 18s;
       -ms-animation-delay: 18s;
       animation-delay: 18s; 
   }
   .slideshow li:nth-child(5)   { 
       background-image: url(../Images/Slideshow/5.jpg);
       -webkit-animation-delay: 24s;
       -moz-animation-delay: 24s;
       -o-animation-delay: 24s;
       -ms-animation-delay: 24s;
       animation-delay: 24s; 
   }
   .slideshow li:nth-child(6)   { 
       background-image: url(../Images/Slideshow/6.jpg);
       -webkit-animation-delay: 30s;
       -moz-animation-delay: 30s;
       -o-animation-delay: 30s;
       -ms-animation-delay: 30s;
       animation-delay: 30s; 
   }

   @-webkit-keyframes imageAnimation { 
       0% { opacity: 0; -webkit-animation-timing-function: ease-in; }
       8% { opacity: 1; -webkit-animation-timing-function: ease-out; }
       17% { opacity: 1 }
       25% { opacity: 0 }
       100% { opacity: 0 }
   }
   @-moz-keyframes imageAnimation { 
       0% { opacity: 0; -moz-animation-timing-function: ease-in; }
       8% { opacity: 1; -moz-animation-timing-function: ease-out; }
       17% { opacity: 1 }
       25% { opacity: 0 }
       100% { opacity: 0 }
   }
   @-o-keyframes imageAnimation { 
       0% { opacity: 0; -o-animation-timing-function: ease-in; }
       8% { opacity: 1; -o-animation-timing-function: ease-out; }
       17% { opacity: 1 }
       25% { opacity: 0 }
       100% { opacity: 0 }
   }
  @-ms-keyframes imageAnimation { 
0% { opacity: 0; -ms-animation-timing-function: ease-in; }
8% { opacity: 1; -ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
  }
Was it helpful?

Solution

I just got the Answer by changing the index of the slideshow images to -1 instead of 0.

 .slideshow li {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
opacity: 0;
z-index: -1;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top