html - Make an image ignore Animation in css -


i made web page has slideshow of 6 images background. problem have png logo animates background in opacity animation applied on logo, want logo stay stable 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 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 }   }

i got answer changing index of slideshow images -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; }

Comments

Post a Comment

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

i using signpost oauth access data magento server. have read various tutorials on same , reach point open browser user can enter credentials. however, per requirement have automate part. hence, user should not browser page. have set-up done on server side ( magento ), hit url , returned call page. same through program in android. i have tried below, consumer = new commonshttpoauthconsumer(key, secret); provider = new commonshttpoauthprovider(oauth_init_url,access_token_url, authorize_url); try { provider.retrieverequesttoken(consumer, oauth.out_of_band); log.d("tokens" , consumer.gettoken() + " -- " + consumer.gettokensecret()); } and request tokens. dont know how bypass next step. tried directly accessing accesstoken (stupid of me) provider.retrieveaccesstoken(consumer, "mycallback://callback"); no luck, ends in oauth.signpost.exception.oauthnotauthorizedexception: authorization failed (server replied 401). ...
Read more

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

getting error org.mockito.exceptions.misusing.invaliduseofmatchersexception: invalid use of argument matchers! 1 matchers expected, 2 recorded. exception may occur if matchers combined raw values: //incorrect: somemethod(anyobject(), "raw string"); when using matchers, arguments have provided matchers. example: //correct: somemethod(anyobject(), eq("string matcher")); at when( getprogramservice .callservice(any(getprogramtype.class))) .thenreturn(jaxbresponse); please explain error , possible resolution the code posted looks fine; don't see problem it. code before or above causing exception. key here: invalid use of argument matchers! 1 matchers expected, 2 recorded. any , used above, doesn't return "special kind of null" or "special kind of getprogramtype"; don't exist. instead, returns null , side effect puts matcher on stack. whe...
Read more

google shop client API returns 400 bad request error while adding an item -

i'm working on solution add items in google shopping market java application. following tutorial real mess because of missing classes of laste release, after setting 1.5-beta maven managed make base example typecheck correctly classes. still can make simple task of adding 1 item. instead of posting whole code i'm posting part creates product feed. private product createproduct(string id) { product product = new product(); product.title = "red wool sweater"; product.content = new content( "text", "comfortable , soft, sweater keep warm on " + "cold winter nights. red , blue stripes."); product.appcontrol = new appcontrol(); product.appcontrol.addrequireddestination("productads"); product.externalid = id; product.lang = "it"; product.country = "it"; product.condition = "nuovo"; product.price = new price("eu...
Read more