CSSアニメーション 入門 - Qiita
はじめに CSSアニメーションに関して説明する機会があったため、それらに関してまとめました。 「CSSは書けるがCSSアニメーションがよくわからん!」といった人達向けに書いた記事であり、 CSSアニメーションに関するプロパティを理解できるようになることを目的としています。 デモはCodePen上に置いてあります。編集して変化を見てみると理解が深まると思います。 デモのJavaScriptはjQueryを読み込んでいないと動かないため、ローカル環境でデモを実行する場合はご注意ください。 CSSアニメーションとは 要素をアニメーションさせるCSSの機能。 CSS TransitionとCSS Animationの2つの機能がある。 CSS Transitionとは プロパティに変更があった時に、一定時間でプロパティを変化させる機能。 単純な動きのアニメーションを実装する時に利用する。 CSS
CSSアニメーションで円形プログレスバーを作る方法 - Qiita
CSSアニメーションで円形プログレスバーを作ってみました。JavaScriptやSVG、画像は使っていません。 サンプル（GIF） HTML .circle { position: relative; width: 120px; height: 120px; background: #333; border-radius: 50%; text-align: center; overflow: hidden; z-index: 1; } .circle::before { content: ""; display: block; position: absolute; top: 0; left: -60px; width: 120px; height: 120px; background: #999; transform-origin: right 60px; z-index: 2; ani
Good to great UI animation tips
Let’s see some examples of UI animations going from good to great. With a little bit of tweaking here and there, you can elevate your UI patterns with animation. The interactions listed show continuity between states, denote a relationship between shared elements, and call the user’s attention to something they should notice and act upon. To create these animations, I followed the guidelines from
Lottie
Easily add high-quality animation to any native app. Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images. Get Started Learn more › Why Lottie? Flexible After Effects features We currently support solids, shape layers, masks, alpha mattes, trim paths, and dash patterns. And we’ll
CSS Transform に関する Tips - KAYAC engineers' blog
はいどうも！ バーチャル Youtuber ではない面白法人カヤックのごんです。 CSS Transform の Tips をやっていきます。 1. CSS Transform は後ろから適用される transform: rotate(45deg) translateX(100px); は、45度回転してから X 方向に 100px 移動、ではなく X 方向に 100px 移動してから、45度回転 です。 これは百聞は一見にしかずなので、下にデモを貼ります。 なんで逆にしちゃったんですかね。 2. CSS Transform のパーセント表記は要素の幅に依存する CSS Transform Translate のパーセント表記は、 DOM 要素とは異なり、親要素ではなく、自身の幅に対する割合を指します。 これも百聞は一見にしかずなので、デモを貼ります。 これは、特に要素の中央寄せする際に非
サクサク感をデザインする
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog ヤフオク!アプリ開発部の中島(@52shinNaka)です。今日はデザイナーの立場からサービスの体感速度をテーマに記事を書いていきます。 サクサク感の正体 サクサク動くサービスと聞いて、どんなサービスを思いつくでしょうか？サクサク動くを分解すると下の２要素に分かれると思います。 表示速度は、純粋にコンテンツが表示されるまでの時間、体感速度は、実際にプロダクトを触って感じられた時間の長さです。触っていて「サクサク動く！」と感じられるサービスは、上の２つの要素が満たされていることが多いです。 表示速度はサービス利益に直結する デザイナーが日々の作業の中で表示速度を意識するタイミングは少ないかもしれません。しかしグロースステージにある多
AnimeEffects | 2D Animation Tool
AnimeEffectsは、ポリゴンメッシュの変形をベースとする2Dキーフレームアニメーション製作ツールです。 とっつきやすく、思いつきをすぐ形にでき、心変わりがあればいつでもやり直せるようなツールを理想として開発しています。 主な特徴 移動、回転、拡大縮小などの基本的な変形はもちろん、ボーン変形、自由変形(Free-form Deformation)、不透明度や画像の切り替えなど様々な要素をアニメーションさせることが可能です。 jpg、png、gifなどの基本的な画像ファイルはもちろん、Adobe PhotoshopをはじめとしてEasy Paint Tool SAIやClip Studio Paintなどでも対応されているPSDファイルを読み込む事が可能です。 レイヤーのクリッピング設定や、大部分のブレンディング設定にも対応しています。 ペイントツールでおなじみの、ペンタブレット操作や
WAIT! Animate
Keyframes 0% {transform: perspective(100px) rotate(0deg) } 25% {transform: perspective(100px) rotateX(180deg) rotateY(0);} 50% {transform: perspective(100px) rotateX(180deg) rotateY(180deg);} 75% {transform: perspective(100px) rotateX(0) rotateY(180deg);} 100% {transform: perspective(100px) rotateX(0) rotateY(0);} SCSS Mixin @mixin waitAnimate($options: ()) { $options: map-merge(( animationName: w
アニメーションの調味料「イージング」の使い分けレシピ (透明度、UI、音量) - feb19
アニメーションの調味料「イージング」の使い分けレシピ (透明度、UI、音量)date2016.12.1(Thu.)tagsflashactionscript この記事は FLASHer Advent Calendar 2016 1日目の記事です。 FLASHer とはAdobe Flash (現 Adobe Animate) を使用している / 使用していたデザイナー、エンジニアの総称です。Flasher はそのまま訳すと「露出狂」という意味があります。 2016 年現在、前者 GEEK 民族の浄化が行われたので、インターネットで検索をかけると本来の意味での露出狂の画像が見ることができます。会社で検索をかけるのは気をつけて下さい。(なお、本当に露出していた伝説の FLASHer がいます。気になる方は Flasher 露出 で検索) なぜ FLASHer である GEEK 民族浄化が起きた
LINEでアニメーションGIFが動かない時に確認したい！トークでのアニメーションGIFの送り方
みなさんご存知でしたでしょうか。ちょっと前にiOS・Androidともにアップデートがあり、 なんとLINEのトークルームがアニメーションGIFの送受信に対応しました！！ つまりどういうことかというと、がりどろの可愛いアニメーション素材を LINEで送ることができるようになったんでーーす！！！！！！！！！！！！ ｲｪ━━━━ヽ( ﾟДﾟ)人(ﾟДﾟ )ﾉ━━━━ｲ!! 当サイトでは以下のお誕生日のアニメーション画像がダントツ人気ですが、 いままでLINEで送っても動かない！とお悩みの方も多かったと思います。 シネマグラフ：キャンドルの火が揺れるお誕生日ケーキでお祝い中 | GIRLY DROP(ガーリードロップ)「シネマグラフ：キャンドルの火が揺れるお誕生日ケーキでお祝い中」はアニメーション,お祝い,キャンドル,ケーキ,シネマグラフ,タグのついた【イベント】カテゴリの無料（フリー）写真画像
Animation Principles for the Web - CSS Animation
As front-end designers and developers, we use CSS to style, position and create great looking sites. We often use CSS to add movement to pages in the form of transitions or even animations, but we don’t usually go much beyond that. Animation can be a powerful tool to help our visitors and customers understand and benefit from our designs. There are principles we can apply to our work to make the m
見ていてわくわくするアニメーションタイポグラフィックスまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。野田です。 夏ですね。夏といったら思い浮かぶのはなんでしょうか。 僕は風鈴の音色とセミの鳴き声です。 前々回からずっとアニメーションネタが尽きないので、今回もアニメーションネタを紹介させていただきます。 少し前からアニメーションタイポグラフィックスというのが僕の中で流行っており、趣味程度に作ったりしています。 これは文字を動かしてアニメーションにする技法で、Animated Typefaceともいい、とても美しく、何度見ても飽きません。 その際に参考にしているVimeoのリンクをまとめさせていただきます。 アフターエフェクトで作成し、gifアニメーションまたはpngで実装してみてください。 長編※音声注意 After Effects : Animatic – Animated Typeface
[CSS]box-shadowを使って、三連リングのようなカワイイ囲いを作るテクニック
三連リングのようなカワイイ囲いをスタイルシートで実装するテクニックを紹介します。 左のSingleだと、divは一つだけ！ 左のSingleを例に、実装方法を紹介します。 HTML div一つにclassを加えます。 <div class="hoja">SINGLE</div> CSS 複数のリングは、box-shadowで作成します。アニメーションさせたくない場合は、keyframesは必要ありません。 ※利用する際は、ベンダープレフィックスを加えてください。 参考：面倒なCSS3のベンダープレフィックスを自動で付与するスクリプト -Prefix free .hoja { color: #dcdce2; position: absolute; top: 50%; left: 50%; margin-left: -180px; margin-top: -90px; width: 180px
![[CSS]box-shadowを使って、三連リングのようなカワイイ囲いを作るテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/bef7bf928dc917611c060c7f63ae5b39c925d844/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014112601.png)
Firefox Nightly が CSS でスムーズスクロールを実現する scroll-behavior: smooth; をサポート
Firefox Nightly が CSS でスムーズスクロールを実現する scroll-behavior: smooth; をサポート 現在、Firefox Nightly としてリリースされている、Firefox 36 で、scroll-behavior: smooth; が実験的ながらサポートされました。CSS のみでスムーズスクロールを実現することができます。 現在、Firefox Nightly としてリリースされている、Firefox 36 で、scroll-behavior プロパティ、およびその値、smooth が実験的ながらサポートされました。 現状では、デフォルトで無効になっているため、about:config から layout.css.scroll-behavior.enabled、および layout.css.scroll-behavior.property-en
<dialog> with animation by geckotang on CodePen
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View. What's <dialog> Currently (as of July 2014), Chrome supports dialog element. Please refer dialog element demo My demos are working on Chrome 38 can
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Animaticons: Animated GIF Icons
Loaders.css
CreateJSを使ったアニメーション表現の基礎
GIFアニメ好きの画像検索&作成コミュニティ - GIFMAGAZINE
