Dima Vleskov Dima Vleskov - 1 year ago 73
jQuery Question

how to make elements appear one by one using css animation

how to make elements appear one by one using css animation(jqeury), i try to make it seems like a wave but i can only show all elements at once, so i would appreciate a lot if you help me

$(window).scroll(function() {
$(".wave").each(function() {
var position = $(this).offset().top;
var winTop = $(window).scrollTop();
if (position < winTop + 650) {

.wave {
visibility: hidden;
.slide-wave {
animation: slide-one .4s;
visibility: visible;
@keyframes slide-one {
0% {
opacity: 0;
transform: translateY(80%);
100% {
opacity: 1;
transform: translateY(0%);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>

Answer Source

I've just written some similar code to flash or pop individual characters in a string. I'm not offering anything specific to your code but more the principle or method I used to apply animations to a group of elements.

This is along similar lines - it might be of use, first I gave each element of my string an individual, sequential ID - sort of like an array:

<p id="char-0">S</p>
<p id="char-1">t</p>
<p id="char-2">r</p>
<p id="char-3">i</p>
<p id="char-4">n</p>
<p id="char-5">g</p>

I actually wrote a function that takes a string as an argument and generates these <p> tags with the sequential ID's. the next thing I did was write a recursive function that iterates through all elements, something like this:

function popElements(
    strElID,     // Element ID prefix string
    intStart,    // Start element
    intEnd,      // End element
    objTo,       // Animate from current state to this...
    objFrom,     // ...animate from objTo to this.
    intDuration, // duration for the animations.
    strEasing,   // For animate
    intTimeout   // Interval between recursive calls
) {

    var e = intStart;   // intFrom needs to be increased/decreased for next
                        // call, record it here.
    var f;

    $(document).ready(function() {
        // Use the .length property to check for the existence of
        // this element, if we call:
        //    popElements(
        //        "char-",
        //        0,
        //        10,
        //        { "opacity": "0.00" },
        //        { "opacity": "0.99" },
        //        500,
        //        "linear",
        //        100
        //    )
        // We will apply the animations to all char-*n* and return when
        // char-*n* isn't found
        if ($("#" + strElID + e.toString()).length == 0)

        // We need to remember the value of e because it points to the
        // current element being animated, but we need to increase/decrease
        // it also for the next call to popElements().
        f = e;
        if (f < intEnd)
            // Forwards
        else if (f > intEnd)
            // Backwards

        // Do the first animation.
        $("#" + strElID + e.toString()).animate(
            // Last animation
                function() {
                $("#" + strElID + e.toString()).animate(

        // The last element has been animated..
        if (e == intEnd)

        // Next element, we're passine the value of f here which should
        // point to the next element to be animated
        setTimeout(function() {
        }, intTimeout);

The important thing is to number the id's in such a way so as they're easy to reference in a loop. I can post the actual code I have if you think it will help, but it's quite specific to my project it might not help but it's just an idea of how you could make this work.

It's a nice effect and works quite well.

If you put the above <p></p> tags in a file and call:

        { "opacity": '0.01' },
        { "opacity": '0.99' },

It will apply the animations to each character individually.

Natually, it goes without saying that you don't need to use animate(), you can do whatever you want. Maybe even adapt the function so that it accepts a callback parameter, world's your oyster but I hope it's helpful in sme way.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download