Skip to content

CSS Animation-Jumping

HTML CODE:

<!DOCTYPE html>
<html>
<head>
    <title>page</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="1.page.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
</head>
<body>

<h1>
    <span>J</span>
    <span>U</span>
    <span>M</span>
    <span>P</span>
    <span>I</span>
    <span>N</span>
    <span>G</span>
</h1>

</body>
</html>

CSS CODE:

body{
    padding: 0;
    margin: 0;
    background: #ff5757;
}
h1{
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
h1 span{
    color: #262626;
    background-color: #fff;
    padding: 10px 20px;
    font-family:arial;
    display: table-cell;
    box-shadow:inset 0 0 5px rgba(0,0,0,.3), 0 5px 0 #ccc;
    animation: ani .5s infinite;
}
@keyframes ani{
    0%{
        transform: translateY(0px);
        box-shadow:inset 0 0 5px rgba(0,0,0,.3), 0 5px 0 #ccc,0 15px 5px rgba(0,0,0,0);
    }
    50%{
        transform: translateY(-20px);
        box-shadow:inset 0 0 5px rgba(0,0,0,.3), 0 5px 0 #ccc,0 15px 5px rgba(0,0,0,.6);
    }
    100%{
        transform: translateY(0px);
        box-shadow:inset 0 0 5px rgba(0,0,0,.3), 0 5px 0 #ccc,0 15px 5px rgba(0,0,0,0);
    }
}
h1 span:nth-child(1){
    animation-delay: .2s;
}
h1 span:nth-child(2){
    animation-delay: .4s;
}
h1 span:nth-child(3){
    animation-delay: .6s;
}
h1 span:nth-child(4){
    animation-delay: .8s;
}
h1 span:nth-child(5){
    animation-delay: 1s;
}
h1 span:nth-child(6){
    animation-delay: 1.2s;
}
h1 span:nth-child(7){
    animation-delay: 1.4s;
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: