WEBデザインTIPSこのサイトはJavaScriptを使用しています。すべての機能をご利用いただく為、ブラウザのJavaScriptの設定を有効にしてください。些細なアニメーションですが、そういった演出があるのとないのとでは大違いですよね。新鮮さやリッチ感が全然違ってきます。この記事では、CSSだけで上や下、横からスッとフェードインしながらスライドインさせる方法について書いています。キーフレームアニメーションと、transformプロパティのtranslate関数を使った方法をご紹介します。sample01.上からスライドイン、下へスライドアウト上からふわっと現れて、またふわっと消えていくCSSです。CodePen.コードは下記になります。HTMLはpタグ一行のみです。}CSSですが、キーフレームアニメーションは「animationプロパティ」と「@keyframes(キーフレーム)」のふたつの要素で構成されています。CSS4~7行目がanimationプロパティ、9行目以降が@keyframes(キーフレーム)です。CSSを順に見ていきましょう。CSS3行目opacity:0opacityは、要素の透明度を指定するプロパティです。非表示ということです。これを指定する理由は、ページがロードされた時から要素を非表示にするためです。これを指定しておかないと、ページが読み込まれてアニメーションが始まるまで、一時的に要素が表示されてしまいます。sample01{animation-nameプロパティは、アニメーションに名前を付けるプロパティです。@keyframesに半角スペースを空けて同じ名前を記述することで互いが関連付けられます。この場合、sample01と名付けています。@keyframesについては後述します。CSS5行目animation-duration:5s;アニメーションが行われている時間を指定するプロパティです。5秒間に指定しています。infinite;アニメーションの繰り返し回数を指定するプロパティです。「infinite」は、無限に繰り返す、という意味です。3や4など数値で指定することもできます。このプロパティを記述しないと、再生は1回のみとなります。forwards;animation-fill-modeは、アニメーションの終了時の状態を指定できるプロパティです。値の「forwards」は、アニメーションの再生後は、キーフレーム100%の状態を維持せよ、という意味です。sample01の場合、CSS18行目から21行目で指定した状態を維持せよ、ということです。@keyframesについて@keyframesは、下記の形で使い、「時間の経過とそこでの状態を指定」します。{先ほども少し触れましたが、@keyframesの後に半角スペースを空けて、animation-nameプロパティに記述した名前と同じ名前を記述することで互いが関連付けられます。}〇〇〇は、同じ名前であることCSS10行目0%、CSS14行目50%、CSS18行目100%、キーフレームはパーセントで時間の経過とそこでの状態を指定できます。sample01の場合、3つのパーセントの個所をポイントとして下記のCSSを指定しています。opacityプロパティ・・・透明度transformプロパティの関数translate・・・移動距離opacityは、各ポイントで0(非表示)と1(表示)を指定してフェードイン・フェードアウトを実現しています。関数translateで上下の移動を実現しています。効果を2次元、3次元で指定できるプロパティです。sample01のような上下の移動には、関数translateを用います。関数translateは、上下、左右、3Dの移動距離を、X軸とY軸とZ軸で指定します。XYZ方向の移動距離ではCSSを順番に見ていきましょう。translateY(-30px);これは、上から下への移動距離を30pxに指定しています。逆で「上から下」になります。translateY(0);移動距離は0で所定の位置を意味します。translateY(30px);所定の位置(0の位置)より30px、下方向への移動距離を指定しています。以上のCSSで要素を「上からフェードイン、下へフェードアウトを無限に繰り返す」のアニメーションを実現しています。sample02.左からフェードイン、右へフェードアウトsample02は、左から現れて、右に消えていくアニメーションです。}横方向の移動はX軸なので、transformプロパティの関数translateの値をtranslateX()(CSS12行目、16行目、20行目)にします。他のコードはsample01と同じです。translateX(50px);)指定します。sample03.スクロールバーを非表示にするsample02のアニメーションをよく見ると、右へスライドアウトする際に、スクロールバーが表示されてしまいます。(少し戻って上のsample02のフレームの横スクロールバーが出るあたりに、マウスを合わせてみてください。)このスクロールバーを非表示にする方法です。方法は、スライドアウトする要素の親要素にoverflow:hiddenを指定します。スライドアウトしている要素に指定してもスクロールバーは非表示になりません。親要素に指定するのがポイントです。class="fade-in">Sample03-FADE-IN</p></div>htmlはpタグをdivの入れ子にします。}CSSは1~3行目でdivにoverflow:hiddenの指定を追加しています。他は、sample02と同じです。スクロールバーを非表示にする方法スライドイン・アウトする要素の親要素にoverflow:hiddenを指定するスポンサーリンクまとめtransformプロパティは、平面だけでなく3D空間での動きも指定できるので、使いこなせるようになるとデザインの幅が格段に広がります。transformプロパティの関数scaleを使って、3Dではありませんが2Dで、CSSで描いた円をアニメーションで拡大表示させる方法についても書いていますので、よろしければご覧ください。サイト内関連リンクCSSで円を描いて中央に文字を配置する方法と円の中心を起点にアニメーションで拡大させる方法-NatsukiMemoCSSの@keyframesとanimationでフェードインさせる方法!CSSキーフレームアニメーション入門(基礎編)-NatsukiMemoこの記事がお役にたてると幸いです。Postsブログ名変更しました。