See the Pen
Untitled by チータツ (@cheese_fuji)
on CodePen.
CSSの解説
コードを見る
HTML
<p class="updown">
<span>F</span>
<span>r</span>
<span>o</span>
<span>m</span>
<span> </span>
<span>U</span>
<span>n</span>
<span>d</span>
<span>e</span>
<span>r</span>
<span> </span>
<span>W</span>
<span>o</span>
<span>r</span>
<span>l</span>
<span>d</span>
</p>
CSS
@keyframes updown-anim{
0%{
transform: translateY(110%);
}
10%{
transform: translateY(0);
}
50%{
transform: translateY(0);
}
60%{
transform: translateY(110%);
}
100%{
transform: translateY(110%);
}
}
/*** アニメーションする要素の親 ***/
.updown{
display: flex;
overflow: hidden;
}
/*** アニメーションを適用する文字全体 ***/
.updown span {
transform: translateY(110%);
display: block;
animation: 3.5s updown-anim linear infinite;
}
/*** 各span(文字)に遅延時間を設定 ***/
.updown span:nth-child(1) {
animation-delay: 0s;
}
.updown span:nth-child(2) {
animation-delay: 0.05s;
}
.updown span:nth-child(3) {
animation-delay: 0.1s;
}
.updown span:nth-child(4) {
animation-delay: 0.15s;
}
.updown span:nth-child(5) {
animation-delay: 0.2s;
}
.updown span:nth-child(6) {
animation-delay: 0.25s;
}
.updown span:nth-child(7) {
animation-delay: 0.3s;
}
.updown span:nth-child(8) {
animation-delay: 0.35s;
}
.updown span:nth-child(9) {
animation-delay: 0.4s;
}
.updown span:nth-child(10) {
animation-delay: 0.45s;
}
.updown span:nth-child(11) {
animation-delay: 0,5s;
}
.updown span:nth-child(12) {
animation-delay: 0.55s;
}
.updown span:nth-child(13) {
animation-delay: 0.6s;
}
.updown span:nth-child(14) {
animation-delay: 0.65s;
}
.updown span:nth-child(15) {
animation-delay: 0.7s;
}
.updown span:nth-child(16) {
animation-delay: 0.75s;
}
- アニメーションさせたい文字を1つずつspanで囲う
- 親要素pにアニメーション用のクラスを付与する
- spanをdisplay: blockにしてブロック要素に変更
- spanが全て縦並びになってしまうので、親要素pをdisplay: flexにして横並びに変更
- spanをtransform: translateY(110%)で範囲より下に配置して、pにoverflow: hiddenを付与して範囲外の要素を非表示に
- @keyframesでアニメーションを作成
- 0%で初期位置translateY(110%)
- 10%で上に登場translateY(0)
- 全ての文字が上に揃うのを待つため、50％まで上で待機translateY(0)
- 60%で再度下に隠れるtranslateY(110%)
- 100%までそのまま範囲外（地面下）で待機translateY(110%)
- span全てにアニメーションを適用するanimation: 3.5s updown-anim linear infinite;
- 疑似要素:nth-child()を利用して、各spanにanimation-delayを等間隔でずらして指定する
応用CSS
表示範囲に入った時に現れるスクロールアニメーション
スクロールで登場するアニメーションです。jQueryを使ってスクロール位置を感知して、.activeのクラスを付与してアニメーションを行います。
アニメーションがループしないようにanimationプロパティからinfinite(ループ)を削除して、終了時(100%)の状態を維持するforwardsを指定。また、退場する必要はないので@keyframesも0・100%以外は削除して、animation-duration(アニメーションの周期)を短くしています。
See the Pen
Untitled by チータツ (@cheese_fuji)
on CodePen.
Rerunで再読み込みができます↑
おすすめの使い方
- サイトロゴなど特別に強調したいフレーズ
- @keyframesの挙動を出現だけにして、スクロールアニメーションに使う
