html - Fade in and pulse text, pause, then fade out with CSS3 Keyframes on loop? -


im having hard time getting head around how achieve following css keyframes.

i have slideshow containing 4 slides on time keyframes , set loop infinitely.

when each slide appears in 'frame' want text fade in , pulse once delay , fade out. demo except don't want use jquery. demo

if i'd appreciated.

i came across example , it's kind of want achieve need 4

  • , pulse. can't head around how need edit keyframes.

    my css slideshow this

    @-webkit-keyframes slider {   0%, 20%, 100%{ left: 0 }   25%, 45%{ left: -100% }   50%, 70%{ left: -200% }   75%, 95%{ left: -300% } } @-moz-keyframes slider {   0%, 20%, 100%{ left: 0 }   25%, 45%{ left: -100% }   50%, 70%{ left: -200% }   75%, 95%{ left: -300% } } @keyframes slider {   0%, 20%, 100%{ left: 0 }   25%, 45%{ left: -100% }   50%, 70%{ left: -200% }   75%, 95%{ left: -300% } }  #carousel .video-list, #descriptioncarousel .description-list {   position: relative;   width: 400%;   height: 100%;   left: 0;    top: 0;   bottom: 0;   animation: slider 45s cubic-bezier(.93,.11,.32,.94) infinite;   -webkit-animation: slider 45s cubic-bezier(.93,.11,.32,.94) infinite;   -moz-animation: slider 45s cubic-bezier(.93,.11,.32,.94) infinite;   -o-animation: slider 45s cubic-bezier(.93,.11,.32,.94) infinite;   -ms-animation: slider 45s cubic-bezier(.93,.11,.32,.94) infinite;   -webkit-animation-play-state: paused;   -moz-animation-play-state: paused;   animation-play-state: paused; } 

    • <div id="animation">     <ul>         <li class="one">this is</li>         <li class="two">css3 looped</li>         <li class="tree">animation</li>         <li class="four">animation</li>     </ul> </div>

    css

    #animation{     width: 200px;     height: 60px; } .one, .two, .tree, .four{     position: absolute;     width: 200px;     height: 60px; } .one{     background-color: red;     opacity: 0;     -webkit-animation: 1 12s ease-in alternate infinite; } .two{     background-color: green;     opacity: 0;     -webkit-animation: 2 12s ease-in alternate infinite; } .tree{     background-color: gray;     opacity: 0;     -webkit-animation: tree 12s ease-in alternate infinite; } .four{     background-color: purple;     opacity: 0;     -webkit-animation: 4 12s ease-in alternate infinite; } @-webkit-keyframes 1 {     0% { opacity: 1; }     33% { opacity: 0; }     66% { opacity: 0; }     99% { opacity: 0; }     100% { opacity: 0; } } @-webkit-keyframes 2 {     0% { opacity: 0; }     33% { opacity: 1; }     66% { opacity: 0; }     99% { opacity: 0; }     100% { opacity: 0; } } @-webkit-keyframes tree {     0% { opacity: 0; }     33% { opacity: 0; }     66% { opacity: 1; }     99% { opacity: 0; }     100% { opacity: 0; } } @-webkit-keyframes 4 {     0% { opacity: 0; }     33% { opacity: 0; }     66% { opacity: 0; }     100% { opacity: 1; } }

    new css 

    #animation{     width: 200px;     height: 60px; } .one, .two, .tree, .four{     position: absolute;     width: 200px;     height: 60px;     display: block; } .one{     background-color: red;     opacity: 0;     -webkit-animation: 1 30s infinite linear;     /*-webkit-transition: .2s ease-in-out;*/     -webkit-transform: scale(0.9,0.9);     -webkit-transition-timing-function: linear;     -webkit-transition-duration: .05s; } .two{     background-color: green;     opacity: 0;     -webkit-animation: 2 30s infinite linear;     -webkit-transform: scale(0.5,0.5);     -webkit-transition-timing-function: linear;     -webkit-transition-duration: .05s; } .tree{     background-color: gray;     opacity: 0;     -webkit-animation: tree 30s infinite linear;     -webkit-transform: scale(0.5,0.5);     -webkit-transition-timing-function: linear;     -webkit-transition-duration: .05s; } .four{     background-color: purple;     opacity: 0;     -webkit-animation: 4 30s infinite linear;     -webkit-transform: scale(0.5,0.5);     -webkit-transition-timing-function: linear;     -webkit-transition-duration: .05s; } @-webkit-keyframes 1 {     0% { opacity: 1;      }     5%{         -webkit-transform: scale(1.1,1.1);      }     10%{         -webkit-transform: scale(1.1,1.1);          opacity: 1;      }     15%{         -webkit-transform: scale(1.1,1.1);         opacity: 1;      }     20% {          -webkit-transform: scale(0.5,0.5);         opacity: 0;      }       25% { opacity: 0; }     30% { opacity: 0; }     35% { opacity: 0; }     40% { opacity: 0; }     45% { opacity: 0; }     50% { opacity: 0; }     55% { opacity: 0; }     60% { opacity: 0; }     65% { opacity: 0; }     70% { opacity: 0; }     75% { opacity: 0; }     80% { opacity: 0; }     85% { opacity: 0; }     90% { opacity: 0; }     95% { opacity: 0; }     100% { opacity: 0; } } @-webkit-keyframes 2 {     0% { opacity: 0; }     5% { opacity: 0; }     10% { opacity: 0; }     15% { opacity: 0; }     20% { opacity: 0; }      25% { opacity: 1; }     30% {           -webkit-transform: scale(1.2,1.2);         opacity: 1; }     35% {           -webkit-transform: scale(1.2,1.2);         opacity: 1; }     40% {           -webkit-transform: scale(1.2,1.2);         opacity: 1; }     45% {         -webkit-transform: scale(0.5,0.5);          opacity: 0; }       50% { opacity: 0; }     55% { opacity: 0; }     60% { opacity: 0; }     65% { opacity: 0; }     70% { opacity: 0; }     75% { opacity: 0; }     80% { opacity: 0; }     85% { opacity: 0; }     90% { opacity: 0; }     95% { opacity: 0; }     100% { opacity: 0; } } @-webkit-keyframes tree {     0% { opacity: 0; }     5% { opacity: 0; }     10% { opacity: 0; }     15% { opacity: 0; }     20% { opacity: 0; }     25% { opacity: 0; }     30% { opacity: 0; }     35% { opacity: 0; }         40% { opacity: 0; }     45% { opacity: 0; }       50% { opacity: 1; }     55% {           -webkit-transform: scale(1.2,1.2);         opacity: 1; }     60% {           -webkit-transform: scale(1.2,1.2);         opacity: 1; }     65% {           -webkit-transform: scale(1.2,1.2         opacity: 1; }     70% {          -webkit-transform: scale(0.5,0.5);         opacity: 0; }      75% { opacity: 0; }     80% { opacity: 0; }     85% { opacity: 0; }     90% { opacity: 0; }     95% { opacity: 0; }     100% { opacity: 0; } } @-webkit-keyframes 4 {     0% { opacity: 0; }     5% { opacity: 0; }     10% { opacity: 0; }     15% { opacity: 0; }     20% { opacity: 0; }     25% { opacity: 0; }     30% { opacity: 0; }     35% { opacity: 0; }     40% { opacity: 0; }     45% { opacity: 0; }     50% { opacity: 0; }     55% { opacity: 0; }         60% { opacity: 0; }     65% { opacity: 0; }     70% { opacity: 0; }      75% { opacity: 1; }     80% {           -webkit-transform: scale(1.2,1.2);         opacity: 1; }     85% {           -webkit-transform: scale(1.2,1.2);         opacity: 1; }     90% {           -webkit-transform: scale(1.2,1.2);         opacity: 1; }     95% {          -webkit-transform: scale(0.8,0.8);         opacity: 0.5; }     100% {          -webkit-transform: scale(0.5,0.5);         opacity: 0; } }

    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