CSSのアニメーションを利用した徐々に要素の背景色を徐々に変化していくサンプルコードです。 2色バージョンと5色バージョンで紹介しています。 徐々に背景色を変更するCSSアニメーション（2色）背景色を変更させるCSSアニメーションのサンプルコードの2色バージョンです。 See the Pen CSS gradually change background color animation 2 by yochans (@yochans) on CodePen. <div class="container"></div>animationプロパティには20秒（アニメーション時間）、linear（開始から完了まで一定のアニメーション速度）、infinite（アニメーションを繰り返す）を指定しています。 @keyframesではbackground-colorにて背景色を変更、2色目を50％に指定し

CSSでテキストを左から流れるように表示するアニメーションを作成する方法を紹介しています。 言葉のチョイスの問題ですが、もし「流れるテキスト」という意味合いでこのページにアクセスしてしまった場合は以下の記事が目的のものかもしれません。 流れるようにテキストを表示するSee the Pen CSS | Slice Text by yochans (@yochans) on CodePen. HTMLにはテキストを表示する為のpタグを設置しています。 <p class="flowing">HELLO WORLD</p>今回のCSSアニメーションは横幅を可変させて左側から順に表示するようにしています。 横幅がテキストの幅より短い時にデフォルトでは折り返してしまいますので「white-space: nowrap」を指定して折り返さないようにしています。 合わせてはみ出す部分を「overflow:

弧を描きながら移動するCSSアニメーションを作成する方法を紹介しています。 transformのtranslateだけでXY移動させようとすると斜めの直線移動になってしまいます。 検索からこのページにアクセスした方はおそらくそこで困っているのではないでしょうか。 弧を描いて移動するCSSアニメーションCSSのみで弧を描いて移動するアニメーションの動作サンプルとサンプルコードです。 動作サンプルでは半円に沿って弧を描くCSSアニメーションを各方向別に4種類設置しました。 各方向セットなのとアニメーションの終了後に逆再生を付けていますので、正直ちょっと弧を描いている感が伝わりにくいサンプルになったと反省、ひとつひとつを見ると弧を描いて移動している事がわかります。 See the Pen CSS Slide animation (basic) by yochans (@yochans) on C

円に沿って移動するCSSアニメーション円の縁に沿って周りながら移動するCSSアニメーションサンプルになります。 円も描画していますが、要素の移動に必要なものではありませんので、無くても大丈夫です。 See the Pen CSS | Arc move animation by yochans (@yochans) on CodePen. HTML HTMLにはコンテナとして親要素class名「.container」を作成、その中に円の枠になる「.circle」と回転する要素「.item」を設置しています。 <div class="container"> <div class="circle"></div> <div class="item"></div> </div>円、要素ともにpositionプロパティを使って絶対値で配置しています。 また、ともに起点は円の中心点になっています。 円の

矢印が伸びるCSSアニメーションCSSだけで作成する矢印が画面外、あるいは要素の外側から伸びてくるアニメーションデザインの実装サンプルとサンプルコードになります。 伸びる矢印アニメーション。 これまた需要があるのかわからないモノを作りましたが、いつもの事ですか。 4方向分セットで記述していますので、わかりにくいかもですが下部にて個別にも紹介しています。 See the Pen CSS | Arc move animation by yochans (@yochans) on CodePen. HTML部分にはコンテナとなる親要素「.container」をdivで作成しています。 矢印はクラス名「.arrow」を作成し、4方向分の追加クラス名を付けています。 <div class="container"> <div class="arrow left-to-right"></div> <di

要素を斜め移動させるCSSアニメーションHTML要素を斜めに移動させるアニメーションのシンプルなCSSコードサンプルです。 See the Pen CSS | Afterimage animation by yochans (@yochans) on CodePen. HTMLには親要素とする「.container」と、その中に移動させたい要素「.item」を設置しています。 <div class="container"> <div class="item"></div> </div>要素を移動させるCSSコードは、主には top や left を操作する方法と、transform を操作する方法の2タイプがあります。 サンプルでは transform の translate を使って要素を移動させています。 translate(0, 0) から translate(150px, 150p

CSSだけでマウスホバー時に画像などのHTML要素がクルッと裏返るフリップアニメーションのサンプルを紹介しています。 マウスホバーで裏返るCSSアニメーションフリップアニメーションを出来るだけシンプルに作成した動作サンプルとサンプルコードになります。 サンプルでは、要素にカーソルを合わせると180度回転して裏返ります。 See the Pen CSS | Mouse hover VS Display none ROUND 1 by yochans (@yochans) on CodePen. HTMLには裏返すアイテムとなる「.item」、その中に前面になる「.front」、背面になる「.back」を設置しています。 前面と背面のdivにてカスタマイズは簡単におこなう事が可能です。 <div class="item"> <div class="front"><p>FRONT</p></di

要素を移動させた時に残像が残る感じにしたCSSアニメーションのサンプルコードになります。 要素がテキストや画像だとそのままでは使えませんし、このページに検索からアクセスされた方は、おそらくはこれ以外の方法を探している方だと思われーー 残像はGoogle翻訳で「Afterimage」ですが、そのあたりで検索しても良い情報は見つからず。 もっと良い英単語があるのか、いや、そもそも「残像」という言葉の類義語があって、実は皆その言葉を私の知らないところでヒソヒソ楽しんでいるのかい？ @keyframesをめちゃくちゃ細かく設定すれば、ひとつのHTML要素でも一瞬戻したりして残像を演出できそうでしたけど、もうJavaScript使いますよねってレベルで、、、今回はこれで^^ 要素の移動時に残像が残るCSSアニメーションSee the Pen CSS | Move along a circle ani

ピュアなCSSのみで雪を降らせてみたアニメーションサンプルです。 以前作成して紹介している雨が降るの雪バージョンになります。 雪が降るCSSアニメーションサンプルCSSのanimationプロパティを使って出来るだけランダムな感じで雪が降るアニメーションを作成してみた動作サンプルとサンプルコードになります。 See the Pen CSS | Alternately change colors in Table by yochans (@yochans) on CodePen. HTMLには雪の他、必要に応じて背景画像やテキストを入れれるように親要素 .container を配置しています。 今回は画像、テキストともに適当ですがサンプルとして入れてあります。 <div class="container"> <img src="https://1-notes.com/images/ishid

CSSのみで作成した桜（サクラ）が舞い落ちるCSSアニメーションのサンプルコードになります。 「紙吹雪が舞う」や「雨が降る」のCSSアニメーションシリーズのひとつです。 サクラが舞うCSSアニメーションサクラが舞うCSSアニメーションの動作サンプルとサンプルコードです。 サンプルでは背景画像はいつもサンプルに使っているものを適当に使っていますが、サクラの雰囲気が出る背景をチョイスすれば良い感じになるかもしれません。 See the Pen CSS | Confetti Animation by yochans (@yochans) on CodePen. HTMLにはサクラの他、背景画像やテキストを格納するコンテナ要素をdivタグで作成しています。 サクラはdivタグの中にspanタグひとつを一枚の花びらとして設置、サンプルでは桜の花びらの数は50個としています。 <div class="

ピュアなCSSのみで色とりどりの紙吹雪が舞うアニメーションサンプルです。 別記事で紹介している雨が降る、雪が降るなどのシリーズになります。 紙吹雪が舞うCSSアニメーションサンプルCSSのanimationプロパティを使って出来るだけランダムな感じでカラフルな紙吹雪が舞うアニメーションを作成してみました。 以下は動作サンプルとサンプルコードになります。 See the Pen CSS | Snow Animation by yochans (@yochans) on CodePen. HTMLには紙吹雪の他、必要に応じて背景画像やテキストを入れれるように親要素 .container を配置しています。 画像、テキストともに適当ですがサンプルとして入れてあります、不要なら削除して下さい。 <div class="container"> <img src="https://1-notes.co

マウスホバー時にリストのテキストの下に下線がにょきっと広がるように伸びるCSSアニメーションを紹介しています。 マウスホバーでリストに下線が広がるCSSアニメーションサンプルでは、リストはリンクではありませんがヘッダーメニューやタブメニューなどでもそのまま利用可能です。 アニメーションは、リストのテキスト部分にマウスカーソルを置くと、ニョキッと中央から下線が広がり、マウスカーソルが離れると元に戻るようになっています。 See the Pen CSS | Afterimage animation by yochans (@yochans) on CodePen. HTMLはシンプルなリストタグを設置しています。 <ul> <li>PHP</li> <li>Python</li> <li>CSS</li> <li>JavaScript</li> </ul>本題とは直接関係ありませんが、リストは

色とりどりの円が次々に広がる爆発エフェクトをCSSだけで実装するアニメーションを紹介しています。 CSSだけで実装するにあたり、「円を移動させながら」か「円の色を変えながら」か迷いましたが、今回は後者にしました。 円の位置は固定で、爆発毎に色を変える事でランダムな感じのアニメーションを作成しています。 カラフルな爆発エフェクトのCSSアニメーションカラフルな円の爆発エフェクトのCSSアニメーションです。 HTML、CSS共に出来るだけシンプルな構造で作成しています。 動作サンプルでは白背景ですが、黒背景の方が映えるかもしれません。 See the Pen CSS | Border expand animation by yochans (@yochans) on CodePen. HTMLにはコンテナとなる親要素「.container」、爆発の部分を「.explosions」として中に各円

サムネイルなどの画像をふわっと拡大させるCSSアニメーションのサンプルコードの紹介です。 See the Pen CSS | Enlarge image animation by yochans (@yochans) on CodePen. 画像をふわっと拡大させるCSSで画像のドラッグを無効にするにはuser-dragプロパティにて「none」を指定します。 <div class="thumbnail-box"> <a href="https://1-notes.com/css-pixel-stars-animation/" target="_blank" rel="noopener"><img class="brightness" src="https://1-notes.com/wp-content/uploads/2020/01/%E3%82%AD%E3%83%A9%E3%82%A

CSSのアニメーションを利用して映画の字幕表示のようにテキストを表示するCSSアニメーションサンプルの紹介です。 字幕っぽく下段中央に文章から一行ずつ順番に割とパッと、でもふわっと表示して消えるようにしています。 ※右下のRerunボタンでリロード再生できます。 See the Pen CSS filter: blur() by yochans (@yochans) on CodePen. HTMLには、コンテナとなるクラス「container」、テキストを格納しておくクラス「text」、imgタグで背景画像を作成しています。 <div class="container"> <img src="https://1-notes.com/wp-content/uploads/2020/06/quality-50-1024x682.jpg" /> <div class="texts"> <p>吾

ピュアなCSSのみで雨を降らせてみたアニメーションサンプルです。 雨が降るパターンの各アニメーションにanimationプロパティと@keyframes（キーフレーム）を使ったサンプルコードを紹介しています。 追記：雪が降るバージョンもできました。 背景に雨が降るCSSアニメーションサンプルSee the Pen CSS Rain Animation by yochans (@yochans) on CodePen. <div class="container"> <div class="rains"> <span></span><span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span><span></span> <span></span>

CSSのみで文字や画像などをドットタイプの星などでキラキラ光らせるアニメーションサンプル集です。 CSS関連のページは作成していますが、幾分センスと根気が足りないのでイマイチ感は多めにみてやってください。 背景をキラキラ光らせるCSSアニメーションサンプルSee the Pen CSS Pixel Stars Animation (background) by yochans (@yochans) on CodePen. <div class="container"> <div class="stars"> <span class="s"></span> <span class="s"></span> <span class="s"></span> <span class="s"></span> <span class="s"></span> <span class="m"></span>