Анімація CSS3: Bouncing Along (easeOutBounce)

Blog Image

Час JQuery (і інших бібліотек) щодо застосування ефектів по трохи відходить на задній план тому чистий css3 легко справляється з тим, що ще вчора вимагав підключення сторонніх баготокілобайтних бібліотек і плагінів.

CSS3 дозволяє вже зараз зробити ефект Безьє і не тільки.

Лише простий приклад анімації за типом easeOutBounce:

CSS код:

.box {
    background-color:#BBB;
    width:80px;
    height:80px;
    border:5px solid #555;
    border-radius:15px;
}

.bounce {
    position:absolute;
    top:500px;
    left:50%;
    margin-left:-40px;
 
    -moz-animation-name:bounce;
    -moz-animation-duration:1s;
    -moz-animation-fill-mode:backwards;
    -moz-animation-delay:0.5s;
 
    -webkit-animation-name:bounce;
    -webkit-animation-duration:1s;
    -webkit-animation-fill-mode:backwards;
    -webkit-animation-delay:0.5s;
 
    animation-name:bounce;
    animation-duration:1s;
    animation-fill-mode:backwards;
    animation-delay:0.5s;
}
 
@-webkit-keyframes bounce {
    0%      { top:000px; -webkit-animation-timing-function:ease-in;  }
    37%     { top:500px; -webkit-animation-timing-function:ease-out; }
    55%     { top:375px; -webkit-animation-timing-function:ease-in;  }
    73%     { top:500px; -webkit-animation-timing-function:ease-out; }
    82%     { top:465px; -webkit-animation-timing-function:ease-in;  }
    91%     { top:500px; -webkit-animation-timing-function:ease-out; }
    96%     { top:490px; -webkit-animation-timing-function:ease-in;  }
    100%    { top:500px; }
}

@-moz-keyframes bounce {
    0%      { top:000px; -moz-animation-timing-function:ease-in;  }
    37%     { top:500px; -moz-animation-timing-function:ease-out; }
    55%     { top:375px; -moz-animation-timing-function:ease-in;  }
    73%     { top:500px; -moz-animation-timing-function:ease-out; }
    82%     { top:465px; -moz-animation-timing-function:ease-in;  }
    91%     { top:500px; -moz-animation-timing-function:ease-out; }
    96%     { top:490px; -moz-animation-timing-function:ease-in;  }
    100%    { top:500px; }
}
    
@keyframes bounce {
    0%      { top:000px; -moz-animation-timing-function:ease-in;  }
    37%     { top:500px; -moz-animation-timing-function:ease-out; }
    55%     { top:375px; -moz-animation-timing-function:ease-in;  }
    73%     { top:500px; -moz-animation-timing-function:ease-out; }
    82%     { top:465px; -moz-animation-timing-function:ease-in;  }
    91%     { top:500px; -moz-animation-timing-function:ease-out; }
    96%     { top:490px; -moz-animation-timing-function:ease-in;  }
    100%    { top:500px; }
}

Вставляємо HTML в потрібну частину сторінки: