『ボドゲ』で棚からひとつかみ - clockwise direction
※この記事は、ボドゲ紹介02 Advent Calendar 2020 1日目の記事として書かれたものです。 adventar.org ▲イントロダクション ysk（ワイエスケー）と申します。お世話になります。普段は、北陸地方を中心としてボードゲームで楽しんでおります。 本アドベントカレンダー、12/2～13までは連続して埋まっているのに、どういう訳か12/1が当日になっても埋まりません。これでは何だか気持ちが悪いので、急遽、登録させて頂いた次第です。 内容としては、‘Twitter上で今年の4月に #ボドゲ紹介リレー のハッシュタグで紹介したボードゲーム9作品の再掲となります。（使い回しでごめんなさい…。） ▲作品紹介（①～⑨） ①Sumeria 2009年の作品。コンパクトだが非常に痺れるエリアマジョリティ。手番ではコマを置くか、移動させるか、取り除くかの三択だが、どのアクションも決算
Web Animations API を使ってみる - Qiita
Animation周りが苦手だったので、Flash のタイムラインアニメーションエディタみたいなものを練習がてら作ってみたい、ということで勉強した。 本記事は勉強ログ気味。 Web Animations API とは CSS Animation の keyframe 制御を JS から可能にしたようなもの。 CSS Animation は 自分で止まったり再開したりできないし、フレーム制御も出来ない。 JS から制御できないのでコントロールしづらかったが、その問題を解決する。 Web Animations 実装具合と Polyfill Can I Use 見る限りは Firefox で 実装済み、 Chrome で実装中 https://caniuse.com/#feat=web-animation polyfill なしで試した結果、chrome で elem.animate(...)
Web Animations in WebKit
Over the last 8 months we have been working on adding support for Web Animations, a W3C standard offering Web developers a JavaScript API to create, query and controls animations. While there is work left to do to ship this experimental feature to the Web at large, we feel our implementation has matured enough that, with the release of Safari Technology Preview 59, we can turn Web Animations on by
animation-iteration-count－CSS3リファレンス
animation-iteration-countプロパティは、要素にキーフレームアニメーションを適用する場合に、アニメーションの繰り返し回数を指定する際に使用します。 初期値は1でアニメーションが開始から終了まで一回再生されます。 値にinfiniteを指定すると、アニメーションの再生を無限に繰り返します。 値に整数以外の数値を指定すると、再生サイクルの途中でアニメーションが終了します。 負の値を指定すると、0として扱われます。 例えば、アニメーションの再生を反転させるanimation-direction: alternateの指定をしている場合に、 このanimation-iteration-countプロパティで偶数の再生回数を指定してやると、キリの良い箇所でアニメーションの再生を終了させることができかもしれません。 ■値
A New Wave of Animation Features in Angular - yearofmoo.com
Learn to make use of the awesome new animation features in Angular 4.2+ Angular 4.2 introduces a wave of new animation features that allow for multi-element & reusable animations (with input param support) and as well as full-blown router-level animations. This set of animation features was originally set for release in 4.1, however, this was then moved to 4.2 to allow give the API space to mature
DIY Web Animations: Promises + rAF + Transitions — surma.dev
The Web Animations API is great. Except that support is mediocre at best. I keep finding myself re-creating them using Promises, rAF and CSS Transitions, which turned out to be pretty ergonomic. With Web Animations, you can grab any element and have it play entire sequences of animations: element.animate([ {transform: 'translateX(0px)', backgroundColor: 'red'}, {transform: 'translateX(100px)', bac
Browser animation in 2017
// Style: // transition: opacity 1s // transitionを発火する elem.style.opacity = '0'; getComputedStyle(elem); // 終わったら次の画面をactiveにする elem.addEventListener('transitionend', evt => { if (evt.propertyName === 'opacity') { evt.target.remove(); homeScreen.classList.add('active'); } }); /* * でも… */ button.addEventListener('focus', () => { // もしこれがmustacheのようなテンプレート仕組み… render(); }); transitionendが発火されないケース 要
Building performant expand & collapse animations | Blog | Chrome for Developers
TL;DR Use scale transforms when animating clips. You can prevent the children from being stretched and skewed during the animation by counter-scaling them. Previously we’ve posted updates on how to create performant parallax effects and infinite scrollers. In this post, we’re going to look over what’s involved if you want performant clip animations. If you want to see a demo, check out the Sample
Using the Web Animations API - Web APIs | MDN
The Web Animations API lets us construct animations and control their playback with JavaScript. This article will start you off in the right direction with fun demos and tutorials featuring Alice in Wonderland. The Web Animations API opens the browser's animation engine to developers and manipulation by JavaScript. This API was designed to underlie implementations of both CSS Animations and CSS Tr
Animating like you just don’t care with Element.animate – Mozilla Hacks - the Web developer blog
In Firefox 48 we’re shipping the <a href="https://developer.mozilla.org/docs/Web/API/Element/animate" target="_blank"><b>Element.animate()</b></a> API — a new way to programmatically animate DOM elements using JavaScript. Let’s pause for a second — “big deal”, you might say, or “what’s all the fuss about?” After all, there are already plenty of animation libraries to choose from. In this post I wa
Twitter's "fave" animation - CSS Animation
Twitter recently updated the design of their “fave” (also known as “fav”) button, introducing a new animation. Rather than rely on CSS transitions, the animation makes use of a series of images. Here’s how to recreate the animation using the CSS animation steps timing function. Update: Heart The following technique can also be used with the new “Heart” animation, as it’s handled in a similar way:
ブラウザーに優しくて、アニメーションを滑らかに
ブラウザーに優しくして、 アニメーションを滑らかに Brian Birtles, Mozilla Japan html5j October 2014, Tokyo Animation is awesome… Source: Christopher Price 2013, http://topherchris.com/post/55109717733 Animation is awesome… Source: icanhasGIF.com windfinder.com earth.nullschool.net healthmap.org/ebola/ 蔓延[まんえん] = spread (disease) ebolavideo.org ウィンドウを最小化する 逆に負担になります。うまくいかなかった冗談みたい。 Animation is awesome? HTC J 端末上の Firefox
Dev.Opera — CSS will-changeプロパティについて知っておくべきこと
はじめにWebKit系ブラウザでCSS transformやanimationといったプロパティを使った時に発生する、“例のちらつき”。これに気づいたことのある人ならば、おそらく“ハードウェア・アクセラレーション”という用語をこれまでにも耳にしたことがあるでしょう。 CPU, GPU, ハードウェア・アクセラレーション一言で言うと、ハードウェア・アクセラレーションとは、グラフィックス・プロセッシング・ユニット（GPU）を用いてセントラル・プロセッシング・ユニット（CPU）の処理量を軽減し、ブラウザのレンダリング処理を効率化することです。ハードウェア・アクセラレーターを有効にしてCSS処理を使うと、ページのレンダリングが速くなり、ページ表示が高速化されます。 名前の通り、CPUとGPUはどちらもプロセッシング・ユニットです。CPUはコンピュータのマザーボードに取り付けられている部品で、ほとん
Ebola Map | Virus & Contagious Disease Surveillance
March 14, 2014 March 19, 2014 March 21, 2014 March 22, 2014 March 23, 2014 March 24, 2014 March 25, 2014 March 26, 2014 March 27, 2014 March 28, 2014 March 29, 2014 March 30, 2014 March 31, 2014 April 01, 2014 April 02, 2014 April 03, 2014 April 04, 2014 April 05, 2014 April 06, 2014 April 07, 2014 April 08, 2014 April 09, 2014 April 10, 2014 April 14, 2014 April 16, 2014 April 17, 2014 April 20,
Velocity.js
Overview Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined. Download Download Velocity, include it on your page, and replace all instances of jQuery's $.animate() with $.veloci
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Creating an Animated Login Form for TouchID | CSS-Tricks
DevTool Layers Panel - Supercharged
Patrick Brossetさんのツイート: "Look at what's cooking in the @FirefoxDevTools animation inspector! Pretty great right? And that's just for one property. This works for all https://t.co/zrXKBEvLki"
Upgrading CSS Animation With Motion Curves — Smashing Magazine
Web Animations API Tutorial Part 1: Creating a Basic Animation