CODEWITHSUNDEEP
jquerycsshtmlfadeinfadeout
user304602
user304602

Reputation: 991

fade in and out continuously a text in div using jquery or css (alternate/transition between multiple words or phrases)

I want to fade in and out continuously a text in the div's content and also I want to alternate between two phrases (or if it is not possible alternate between two phrases, at least fade in and out the same phrase continuously). Below my code not working (Dynamically):

'<div><div class="image-blockUI" /><div class="text-blockUI-container"><div class="text-blockUI">Loading...</div><div class="text-blockUI-2">Please, wait.</div></div></div>'

css:

.image-blockUI 
{
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 30px;
    width: 24px;
    background-image: url('../images/Edit.gif'); /* relative to the location where css file is */
}

.image-blockUI-container
{
    display: inline;
    width: 100px;
    height: 100px;
}

@-webkit-keyframes fade-in{
    from{
        opacity:1;
        top:0px;
    }
    to{
        opacity:0;
        top:-5px;
    }
}

.text-blockUI
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin-top: 5px;
    text-align: center;

    display: inline;
    position: relative;
    top: 0px;
    -webkit-animation: fade-in 1s infinite;
}

.text-blockUI-2
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin-top: 5px;
    text-align: center;

    opacity: 0;
    display: inline;
    position: relative;
    margin-left: -56px;
    -webkit-animation: fade-in 1s infinite;
    -webkit-animation-delay: 0.5s;
}

I have tried to do the same explained here but without success (the accepted solution):

How to Fade In/Out multiple texts using CSS/jQuery like on Droplr?

What to fade in and out continuously and alternate those two phrases each time?

Upvotes: 1

Views: 3221

Answers (1)

Greg Perham
Greg Perham

Reputation: 1857

On each element, set a duration that is long enough for the animation of both elements to complete (4 seconds in this case). On the second element, set a delay to stagger the timing evenly. Create keyframes that allow "pauses" while the second animation runs:

  • 1 second to fade in (0% to 25%)
  • 2 seconds to fade out (25% to 75%)
  • 1 second to hang around invisible while the other element is visible (75% to 100%)

Here is a CodePen with embellishments like a loading spinner.

And this is the stripped-down code with just the essentials:

<div class="text-blockUI-container">
    <span class="text-blockUI">Loading&hellip;</span>
    <span class="text-blockUI-2">Please wait.</span>
</div>

<style>
.text-blockUI-container {
    position: relative;
}

.text-blockUI {
    position: relative;
    -webkit-animation: fadeInOut 4s infinite;
    animation: fadeInOut 4s infinite;
}

.text-blockUI-2 {
    opacity: 0;
    position: absolute;
    left: 0;
    -webkit-animation: fadeInOut 4s 2s infinite;
    animation: fadeInOut 4s 2s infinite;
}

@-webkit-keyframes fadeInOut {
    0% {
        opacity: 0;
        top: -.5em;
    }
    25% {
        opacity: 1;
        top: 0;
    }
    75% {
        opacity: 0;
        top: .5em;
    }
    100% {
        opacity: 0;
        top: .5em;
    }
}
@keyframes fadeInOut {
    0% {
        opacity: 0;
        top: -.5em;
    }
    25% {
        opacity: 1;
        top: 0;
    }
    75% {
        opacity: 0;
        top: .5em;
    }
    100% {
        opacity: 0;
        top: .5em;
    }
}
</style>

Upvotes: 1

Related Questions