offsetプロパティは、パス上に要素を配置・移動させるCSSのプロパティです。animationプロパティやtransitionプロパティと組み合わせることで、手軽に一見複雑そうなアニメーションが作れます。 SVGやJavaScriptは詳しくないけど、複雑そうな動きのアニメーションを作ってみたい方、animationプロパティなどのおさらいをしておきたい方にオススメの記事です。 サンプルを別ウインドウで開く ソースコードを確認する offsetプロパティと対応ブラウザについて offsetプロパティは、任意のパス上に要素を配置・移動させる一括指定プロパティです。以下の5つのプロパティが指定可能です。プロパティの詳細については、MDNのドキュメントをご参照ください。 offset-path：要素を配置・移動させるためのパス。（MDN） offset-distance：offset-pat
近年、ウェブ技術の発展により、画像の一部だけを表示する「マスク表現」がよく見られるようになりました。一言でマスクと言っても、アニメーションやインタラクションとの組み合わせによりさまざまな表現が可能です。 また、どの技術を用いるかという選択も重要になります。マスク表現はCSS, SVG, Canvas APIといった技術で実現できますが、それぞれが異なる得意分野をもちます。 本記事の前半では、マスク表現を実現する技術について解説を行います。後半では実践的なマスク表現をいくつか紹介しながら、それぞれの実装方法を紹介します。いままで技術的に難しいと諦めていた表現が、マスクによって実現するヒントになれば幸いです。 ▼マスク表現の例（背景画像の一部を表示している） - Erika Moreira Portfolio マスクとは 本記事で紹介するマスク表現とは、画像の一部を切り抜く手法です。マスキング
この記事では、これまでのCSSコーディングの悩みを解決できるかもしれない最新テクニック24個をまとめてご紹介します。 コピペで利用できるテクニックを中心に、実際の問題点や新しい解決案を、実用的なサンプル参考例を確認、プレビューしながら新しいCSSテクニックに触れてみましょう。 ただし、実験段階のプロトタイプも含まれているので、一部ブラウザでは非表示のケースもあります。実装するときは、対応ブラウザの確認を行いましょう。 前回までのお役立ちCSSテクニック集がこちら、少しずつ増えてます。 よくあるWeb課題をCSSで乗り切る！知っておきたい最新テクニック20選 よくあるWeb制作の悩みをCSSで解決！最新テクニック40選まとめ 【CSS】知っておくと便利！短いコードで実装できるCSS小技20選 コンテンツ目次 1. background-imageによる実用アニメーションサンプル集 2. 無限
CSSで実装できるのか！ iPhone 15 Proのページで見かけたスクロール駆動のダイナミックアイランドを実装するテクニック
先週発表されたiPhone 15のWebページに、面白い仕掛けが実装されていました。Appleは新製品のページにはスクロール駆動のアニメーションを多数取り入れており、今回のはスクロール駆動のダイナミックアイランドです。 このスクロール駆動のダイナミックアイランドをCSSで実装するテクニックを紹介します。下記のアニメーションは少しゆっくりめにしています。 ダイナミックアイランド（Dynamic Island）とは、iPhone 14 Proで実装された機能で、カメラのパンチホール部分のスペースを利用して実行しているアプリのアクティビティを表示します。サイズはアプリごとに最適化されます。 参考: iPhone 14 ProのDynamic Islandの使い方 | Appleサポート で、今回のiPhone 15 Proのページにスクロール駆動のダイナミックアイランドが多数実装されています。コ
いざという時のために覚えておくと便利なHTML＆CSS Tips集の第2弾です。何かで困った時に読み返してみてください。何かでお役にたてると思います。 グラデーションを使ったテキストアニメーション See the Pen Text gradient animation by BUILD (@buildstd) on CodePen. テキストカラーにグラデーションを使ったアニメーションを施す方法。 テキスト要素の背景にanimation プロパティでアニメーションさせたグラデーションを設定し、background-clip: text で背景グラデションをテキストのかたちに切り抜くイメージです。color: rgba(0 0 0 / 0) でテキストカラーを透明にしないと背景グラデーションが表示されないので指定します。 CSSp { color: rgba(0 0 0 / 0); -web
Patterns for Reactivity with Modern Vanilla JavaScript – Frontend Masters Blog
“Reactivity” is how systems react to changes in data. There are many types of reactivity, but for this article, reactivity is when data changes, you do things. Reactivity Patterns are Core to Web Development We handle a lot with JavaScript in websites and web apps since the browser is an entirely asynchronous environment. We must respond to user inputs, communicate with servers, log, perform, etc.
CSSのborder-radiusで角丸を適用したボックスを拡大・縮小のアニメーションにするとき、最初は鋭角で、拡大したときには角丸になるようにしたいと思ったことはありませんか？ 下記のデモはうまく機能していますが、角丸が汚かったり、最初が鋭角の矩形にならなかったり、角丸をスムーズにアニメーションさせる際に遭遇する問題点とその解決方法を紹介します。 Smoothly animating a border-radius by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ビュー遷移による問題点 部分的な解決方法 変化する背景への対応 変化するボーダーへの対応 終わりに はじめに ビュー遷移（View Transitions）は、スナップショットをアニメーション化するため、任意の要素を別の要素に変形させる
Firefoxが2024年7月9日にリリースしたバージョン128で、CSSの「@property」に対応したことにより、主要なブラウザ全てで「@property」の記法を使用できるようになりました。「@property」を使うことで実現できるデザインの一例について、ウェブエンジニアのライアン・マリガン氏がブログに投稿しました。 CSS @property and the New Style https://ryanmulligan.dev/blog/css-property-new-style/ マリガン氏がデモとして提示したのは下図のようなボタンのアニメーションです。 最初にマリガン氏はボタンの周りをループする光について解説しています。カスタムプロパティとして「--gradient-angle」を宣言し、宣言においてこのカスタムプロパティには「angle(角度)」の値を設定可能で、初期値
Aug 21, 2025 by Jon Davis, Jen Simmons, and Tim Nguyen Random functions in programming languages are amazing. You can use them to generate variations, to make things feel spontaneous and fresh. Until now there was no way to create a random number in CSS. Now, the random() function is on its way. You’ll be able to create a random animation delay, layout content at a random place on the screen, crea
The @property at-rule recently gained support across all modern browsers, unlocking the ability to explicitly define a syntax, initial value, and inheritance for CSS custom properties. It seems like forever ago that CSS Houdini and its CSS Properties and Values API were initially introduced. I experimented sparingly over time, reading articles that danced around the concepts, but I had barely scra
サイトを訪れたときに時々表示されるCookie使用同意のポップアップ。よくあるタイプのものを独自に作成してみました。 最小限のHTML/CSS, JavaScriptだけで構成しており、コピペで簡単に実装することができます。 ※本ポップアップは、あくまでサイトがCookieを使用していることをユーザに伝える簡易的なものです。GDPRに準拠しているわけではないのでご注意ください。 はじめに：Cookie使用同意に関して 最近は以前に比べ、Cookieをはじめとする個人情報の扱いが世界的に厳しくなっています。 背景には、EUで2018年5月に施行されたGDPR（一般データ保護規則）の項目のうち、Cookieの利用同意に関する要件が厳格化したことがあるようです。その影響でGoogleさんが5000万ユーロの制裁金を科せられたとか… 現在、日本ではCookieの利用同意に関して明確なガイドラインが
A Deep Dive Into The Wonderful World Of SVG Displacement Filtering — Smashing Magazine
What exactly is a displacement filter? In this article, Dirk Weber will be diving into one of the most spectacular filter effects: the SVG feDisplacementMap filter primitive. In order to make it all easier to digest, Dirk has divided the article into three parts in which you’ll be exploring how the feDisplacementMap works, methods to create fancy displacement maps in SVG, and methods to animate th
この記事は「Commune Advent Calendar 2024」シリーズ2の7日目の記事です。 1. はじめに はじめまして。Communeでエンジニアをしています、佐々木です。普段の業務ではフロントエンド・サーバーサイド両方の実装を行なっています。 今回は、実際に動く時計をできるだけCSSだけで作ってみて、CSSアニメーションでできることを紹介しようと思います。 2. この記事で取り上げる内容 クラシカルな感じの時計を作成しました。この記事では、時計の針が時間を刻むようにするためのアニメーション設定部分のみを取り上げます。 コード全文はCodePen上で公開しています。 3. CSSアニメーションについて CSSではanimationプロパティと@keyframesルールを使って、javascriptを使わずにアニメーションを実装することができます。animationプロパティはア
![[CSS]時計を作ってちょっと分かった気になるanimationプロパティ](https://cdn-ak-scissors.b.st-hatena.com/image/square/9a7a6efd2c349ecb1ce496b690de5b467d578ed6/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--Uo-t1laj--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BCSS%25255D%2525E6%252599%252582%2525E8%2525A8%252588%2525E3%252582%252592%2525E4%2525BD%25259C%2525E3%252581%2525A3%2525E3%252581%2525A6%2525E3%252581%2525A1%2525E3%252582%252587%2525E3%252581%2525A3%2525E3%252581%2525A8%2525E5%252588%252586%2525E3%252581%25258B%2525E3%252581%2525A3%2525E3%252581%25259F%2525E6%2525B0%252597%2525E3%252581%2525AB%2525E3%252581%2525AA%2525E3%252582%25258Banimation%2525E3%252583%252597%2525E3%252583%2525AD%2525E3%252583%252591%2525E3%252583%252586%2525E3%252582%2525A3%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Ats%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2Y1MTE3MTI5NDIuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3A%2525E3%252582%2525B3%2525E3%252583%25259F%2525E3%252583%2525A5%2525E3%252583%2525BC%2525E3%252583%2525B3%2525E6%2525A0%2525AA%2525E5%2525BC%25258F%2525E4%2525BC%25259A%2525E7%2525A4%2525BE%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzZkMDViMTE5NTUuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png%3F_a%3DBACAGSGT)
こんにちは、Ryohei（@ityryohei）です！ 本記事では、CSSだけでキラッと光るボタンの作り方をご紹介しています。 商品やサービスの紹介などで「詳細はこちら」や「公式サイトはこちら」というようなボタンのアニメーションとしてキラッと光るボタンを見かけたことがあるかと思います。キラッと光らせることでスクロールをする手が止まりますし、ボタン自体が目立つため、ついクリックしたくなりますよね。アフィリエイターやブロガーの方が使用しているようなWordPressのテーマでは、キラッと光るボタンのアニメーションはデフォルトで用意されていたりしますが、残念ながら無料のテーマにはないボタンのアニメーションになります。 しかし、安心してください。本記事でご紹介する内容を使用すれば、キラッと光るボタンを簡単に作ることができます。今回キラッと光るボタンの作り方を2パターンご紹介いたします。気に入った目
24 min read6 CSS Snippets Every Front-End Developer Should Know In 2025 2025; I think every front-end developer should know how to enable page transitions, transition a <dialog>, popover, and <details>, animate light n' dark gradient text, type safe their CSS system, and add springy easing to animation. AI is not going to give you this CSS. This post is a theme continuation; checkout previous year
Randomness in CSS using trigonometryExplore brand new technique to generate random numbers with plain CSS using new trigonometry functions! In the past, I have covered the topic of pseudo-randomness in CSS using modulo operation and I used prime numbers to create an automatic counter that can be used to generate different values for each object. Thanks to that, we could compute pseudo-random value
CSS | 3Dなサイコロの作り方
CSSでtransform-styleのpreserve-3dを使って、3Dなサイコロを作成する方法を紹介しています。 See the Pen CSS | 3D Dice by yochans (@yochans) on CodePen. 主にダイスの目の設定などについて書いています。 角丸にしたり、隙間をあけたりと多少サイコロっぽく（努力は）していますが、サイコロデザインの元としている立方体の作成方法と殆ど同じです。 立方体の作り方は別記事で紹介しています。 CSS | 3Dな立方体の作り方 3Dサイコロの作り方 この記事はCSSの「transform-style」に「preserve-3d」を指定した立体的なサイコロの作成手順となります。 本体（コンテナ）側面×6サイコロの出目 本体と側面については省略しますが、CSS | 3Dな立方体の作り方 | ONE NOTESにて書いていますの
Result こういうのです。かなり複雑だけど思ったよりもCSSが少なかった事に驚いたのと応用しやすそうだったので学ばせて頂こうと思い備忘録として。 radial-gradientでスタイル、background-clipで白抜き、box-decoration-break:cloneでスタイルの一貫性を維持してる、という事だと思います。 css h1 span { --c1: #2e88c7; --c2: #9ccce8; --_p: 93% 83.5% at; --_g1: radial-gradient(var(--_p) bottom, var(--c1) 79.5%, #0000 80%) no-repeat; --_g2: radial-gradient(var(--_p) top, #0000 79.5%, var(--c1) 80%) no-repeat; --_g3: ra
Dialog Components: Go Native HTML or Roll Your Own? | CSS-Tricks
Dialog Components: Go Native HTML or Roll Your Own? As the author of a library called AgnosticUI, I’m always on the lookout for new components. And recently, I decided to dig in and start work on a new dialog (aka modal) component. That’s something many devs like to have in their toolset and my goal was to make the best one possible, with an extra special focus on making it inclusive and accessibl
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％に指定し
HTMLとCSSでページ内リンクをクリックでジャンプ先をアニメーション表示させる｜たかもそ／Web Creator.
ページ内リンクをクリックしたときにジャンプ先の背景色をアニメーションさせて分かりやすくする演出の方法です。 <a href="#jump">ページ内リンク</a> ... ... ... <p id="jump">あのイーハトーヴォの...</p>まずは、ページ内リンクをマークアップします。 html { scroll-behavior: smooth; }html 要素に scroll-behavior: smooth; を指定してページ内リンクをクリックしたときにスムーススクロールされるようにしておきます。 @keyframes highlight { 0% { background-color: #fceb70; } 100% { background-color: transparent; } }@keyframes を使ってアニメーションを定義します。今回は、黄色の背景色から透明
Playing with Infinity in CSS
CSS has an infinity constant. When I first learned about this, my brain lit up with all kinds of absurd possibilities. Let’s discuss! There might even be some practical use cases. No promises, though. Before we get into things, there’s one important ground rule: infinity can only be used inside a calc() statement. Alright, let’s go. Never Lose a z-index Battle AgainHave you ever needed an element
The CSS WG resolved to add if() to CSS, but that won’t be in browsers for a while. What are our options in the meantime? A couple days ago, I posted about the recent CSS WG resolution to add an if() function to CSS. Great as it may be, this is still a long way off, two years if everything goes super smoothly, more if not. So what can you do when you need conditionals right now? You may be pleased
はじめに こんにちは。CMA制作部スタッフYaatonです。 SVGを使ったアニメーションは細かい設定ができ、こだわった動きができるので実装する機会も多いのではないでしょうか。今回はSVGのパスアニメーションを実装するときに便利な記述や、つまづきがちなポイントを紹介したいと思います。 SVGのパスアニメーションとは SVGのパスアニメーションとはstroke-dashoffsetプロパティを使って破線の間隔を変化させることで、あたかも線が描かれているかのような演出ができるアニメーションです。 See the Pen svg path animation(css) by CMA Designer (@CMA-Designer) on CodePen. これをCSSのanimationで実装すると以下の様になります。 @keyframes pathAnime { to { stroke-das
Case Study: Combining Cutting-Edge CSS Features Into a “Course Navigation” Component | CSS-Tricks
It solved a UX problem I was facing on a project, so I’ve adapted it to the needs of an online course — a “course navigator” if you will — and built upon it. And today I’m going to pick it apart and show you how it all works: You can see I’m imagining this as some sort of navigation that you might find in an online learning management system that powers an online course. To summarize what this com
Re-Creating The Pop-Out Hover Effect With Modern CSS (Part 1) — Smashing Magazine
This article is all about experimenting with modern CSS features. If you are wondering what the future of CSS will look like, you are in a good place! We will combine things like CSS masks, CSS variables, trigonometric functions, @property, and more to create a neat hover effect that would have been extremely difficult to do even a few years ago without the latest and greatest that CSS has to offe
無限スクロールする背景のCSSアニメーションサンプル
シームレスな背景画像を使って無限スクロールする背景を作成するCSSアニメーションのサンプルコードです。 背景の無限スクロール CSSだけで横スクロールアクションゲームのように背景を無限スクロールさせるアニメーションのサンプルコードです。 See the Pen CSS | Soccer ball by yochans (@yochans) on CodePen. HTMLは背景画像を配置するコンテ用のdivタグを作成しています。 <div class="container"></div> サンプルに使う背景画像には以下のものを作成しました。 sample-bg.png (1333×889) 背景画像はCSSのbackground-imageのurl()で指定、今回は横スクロールですのでrepeat-xも指定しています。 background-sizeでサイズを調整する際、シームレスな画像で
Solved by CSS Scroll-Driven Animations: Style an element based on the active Scroll Direction and Scroll Speed
💁♂️ This article assumes you know the basics of Scroll-Driven Animations. If you don’t, then get yourself acquainted with it over at scroll-driven-animations.style, which includes links to relevant articles and videos. ⚠️ Motion Warning – This article is all about animations so things will move around, often quite abruptly. When implementing these effects in your own projects, take prefers-reduc
Solved by CSS Scroll-Driven Animations: Detect if an element can scroll or not
Because Scroll-Driven Animations are only active when there is scrollable overflow, it is possible to use them as a mechanism to detect if an element can scroll or not. Mix in a Space Toggle or a Style Query, and you’ve got all you need to selectively style an element based on it being scrollable or not. ~ The Code If you’re here for just the code, here it is: @keyframes detect-scroll { from, to {
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSのoffsetプロパティで、楽しいパスアニメーションを作ろう - ICS MEDIA
変幻自在なグラフィック表現！CSS, SVG, Canvasでマスクを使いこなせ - ICS MEDIA
【CSS】あっという間に悩み解決！新常識な最新テクニック24選 | PhotoshopVIP
いざという時に使える7つのHTML&CSS Tips集vol.2 | BUILD Journal
実は難しい！ CSSのborder-radiusで実装した角丸を矩形からスムーズにアニメーションさせるテクニック
CSSの「@property」を活用しておしゃれなボタンを作る方法をエキスパートが解説
Rolling the Dice with CSS random()
CSS @property and the New Style
【コピペで実装】Cookie使用同意のポップアップ3選 | IB-Note
[CSS]時計を作ってちょっと分かった気になるanimationプロパティ
【CSS】キラッと光るボタンの作り方！目立つボタンでクリック率を向上させよう
6 CSS Snippets Every Front-End Developer Should Know In 2025 · January 19, 2025
Randomness in CSS using trigonometry
CSSのみで白抜きテキスト内に波打つようなアニメーションエフェクト | かちびと.net
徐々に背景色を変更するCSSアニメーションサンプル | 1 NOTES
Inline conditionals in CSS, now? • Lea Verou
SVGのパスアニメーションはgetTotalLengthメソッドが便利 - Qiita