CSSでBounceのようなアニメーションを作成するにはどうすればよいですか？

Question

だから私はバウンスする私のセットのコンテナをご希望のページが読み込まれ、にするとき。たとえば、CSSは...

.bouncein { 
    animation-name: bounceIn; 
    animation-duration: 1s; 
    animation-delay: 0.5s;` 
} 

する必要がありますが、私は、キーフレームを知っておく必要があります。だから、

クラスbounceinでページロード、私のdivのは、中に返送されます

Answer 1

チェックより多くのCSSアニメーションのためにも、この

チェックこのhttps://daneden.github.io/animate.css/

Uは次のように "アニメ・遅延" http://www.w3schools.com/cssref/css3_pr_animation-delay.asp

を使用することができます。
アニメーション：bounceIn 2sを無限2S。

@keyframes bounceIn { 
 
\t 0%, 20%, 50%, 80%, 100% { 
 
    transform: translateY(0); 
 
    opacity: 1; 
 
    } 
 
\t 40% { 
 
    transform: translateY(-30px); 
 
    } 
 
\t 60% { 
 
    transform: translateY(-15px); 
 
    } 
 
} 
 

 

 
body { 
 
    background: black; 
 
} 
 

 
.arrow { 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 50%; 
 
    margin-left:-20px; 
 
    width: 40px; 
 
    height: 40px; 
 
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=); 
 
    background-size: contain; 
 
    opacity: 0; 
 
} 
 

 
.bounce { 
 
    animation: bounceIn 2s infinite 2s; 
 
}

<div class="arrow bounce"></div>

Answer 2

そのようにあなたはそれを行うことができます。Arkejで示した答えは作品

.bouncein { 
 
    animation-name: bounceIn; 
 
    animation-duration: 1s; 
 
    animation-delay: 0.5s; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
} 
 

 
@keyframes bounceIn { 
 
0% { 
 
\t transform:translateY(-100%); 
 
\t opacity: 0; 
 
} 
 
15% { 
 
    transform:translateY(0); 
 
    padding-bottom: 5px; 
 
} 
 
30% { 
 
    transform:translateY(-50%); 
 
} 
 
40% { 
 
    \t transform:translateY(0%); 
 
    padding-bottom: 6px; 
 
} 
 
50% { 
 
    transform:translateY(-30%); 
 
} 
 
} 
 
70% { 
 
    transform:translateY(0%); 
 
    padding-bottom: 7px; 
 
} 
 
80% { 
 
    transform:translateY(-15%); 
 
} 
 
90% { 
 
    transform:translateY(0%); 
 
    padding-bottom: 8px; 
 
} 
 
95% { 
 
    transform:translateY(-7%); 
 
} 
 
97% { 
 
    transform:translateY(0%); 
 
    padding-bottom: 9px; 
 
} 
 
99% { 
 
    transform:translateY(-3%); 
 
} 
 
100% { 
 
    transform:translateY(0); 
 
    padding-bottom: 9px; 
 
    opacity: 1; 
 
} 
 
}

<div class="bouncein"></div>

Answer 3

、 Animate.CSSを使用するほうが簡単だと思います。遅延のための