OpenAI announces leadership transition

2023/11/17 83 users

Chief technology officer Mira Murati appointed interim CEO to lead OpenAI; Sam Altman departs the company. Search process underway to identify permanent successor. The board of directors of OpenAI, Inc., the 501(c)(3) that acts as the overall governing body for all OpenAI activities, today announ... 続きを読む

View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA

2023/05/10 87 users ICS MEDIA View Transitions 手段

今年3月に公開されたChrome 111とEdge 111にView Transitons APIが搭載されました。View Transitons APIを使うと、シンプルでスムーズな連続性のあるアニメーションを実装できます。 ウェブ技術でのアニメーションはさまざまな手段が存在します。CSSのtransitionやanimation、JavaScriptでのWeb Animations APIなど利用... 続きを読む

デモとコード例で学ぶ Vue.js のトランジション

2017/10/20 52 users トランジション transit Vue.js デモ コード例

フロントエンド開発においてトランジション、アニメーションの実装は比較的難しいものだと思いますが、心地の良い UI を作るためには必要不可欠です。Vue.js にはその実装を簡単にしてくれる機能があるので、デモを交えながらその使い方と、強力さを紹介します。 <transition> コンポーネント 要素が挿入、削除される時のアニメーションは Vue.js デフォルトで用意されている <transit... 続きを読む

jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法｜Webpark

2015/10/27 334 users jQuery Webpark スクロール アニメーション デモ

可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました... 続きを読む

ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ - CSS Animation

2015/04/12 405 users CSS HTML css animation ディズニー社

ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ フロントエンド・デザイナーやデベロッパーは、スタイリングや配置、またデザイン性の良いサイトを作成するためにCSS（Cascading Style Sheets、カスケーディング・スタイル・シート）を利用します。しばしばページに変化（英: Transition）やアニメーション（英: Animation）を加えるために... 続きを読む

CSSアニメーションを勉強しないとなーと思いつつまだやってない人のために、五分くらいでぱっと分かるCSS Animationを説明するよ。 | Ginpen.com

2013/10/28 116 users Ginpen.com CSSアニメーション マウスホバー

いえーいCSSでぐりぐり動かしてますか！ やろうやろうと思いつつなかなか手が出ないなんて事もありますが、CSS Animationについてそんな人のための簡単な導入です。 CSSでのアニメーションは二種類 実はCSSのアニメーション、と言っても二種類あります。 transition … マウスホバーとかの操作時に動くやつ animation … ずっと動き続けるやつ プロパティは割と似てる 今のと... 続きを読む

擬似要素とCSS3を使ってリストメニューを楽しくデザイン｜Webpark

2013/07/22 121 users Webpark jQuery ul class a href

画像を使わずに擬似要素を使ってリストメニューをデザインしてみました。CSS3のtransitionを使った動きのあるメニューも作ってみました。 まずはHTMLから <ul class="rist-menu" id="list1"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">jQuery</a... 続きを読む

オンマウスでふんわり現れる！CSS3を使った吹き出しサンプル5つ｜Webpark

2013/06/24 470 users Webpark opacity rotate オンマウス 通り

タイトルの通りですが、アイコンの上にマウスを乗せると吹き出しが現れるサンプルを紹介します。今回は現れる動きが違うサンプルを5つ用意しましたので、気に入ったものがあればうれしいです。 Chrome、Firefoxの最新バージョンやIE10だとすべてのサンプルが動きます。CSS3のtransitionやrotateが使えないブラウザでも機能的には問題はないと思います。opacityが使えないIE8以下... 続きを読む

CSSだけで作る動きのあるドロップダウンメニュー｜Webpark

2013/04/09 222 users Webpark CSS ドロップダウンメニュー HTML 最初

よくあるタイプのドロップダウンメニューをCSSだけで作りました。CSS3のtransitionを使うことで動きを付けています。また、最近フラットなデザインが流行っているようなので、何となくフラットな感じにしてみました。 今回は最初のサンプルを詳しく解説します。後の2つは少し変えるだけで作ることができます。コードはサンプルの下に載せています。 では、HTMLから解説していきます。 HTML <ul ... 続きを読む

CSS3(transition)で円の中心を基準に拡大する丸いボタンが並んだメニュー｜Webpark

2013/03/11 104 users Webpark 丸いボタン サンプル 基準 CSS3

最近丸いデザインが流行っているらしいので、丸いボタンが並んだメニューを作ってみました。CSS3のtransitionでスムーズに拡大します。円の中心を基準に拡大するところが今回のポイントです。 そもそもこいうのはメニューと呼ばないのかな。検索エンジンのことを考えると色々キーワードを入れたいけど、入れすぎると何をいっているのか分からなくなる。ほんとタイトルって難しい。。 ということで、今回もサンプル... 続きを読む

CSSアニメーションの初歩をおさらい｜WEB Drawer

2012/12/20 239 users 初歩 おさらい CSSアニメーション WEB Drawer

最近はアニメーションをFlashではなく、CSSやJavaScriptで実装されているサイトをよく見るようになりました。 今回は復習も兼ねて、CSSで動きを付けられるanimationとtransitionのおさらいをしてみたいと思います。 ベンダープレフィックスをつけないと動かないブラウザもありますが、省略します。 animationとtransitionの違い どう違うのかなと思って調べたので... 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強 – #9 CSS3アニメーション（Transition） ｜ クラスメソッド開発ブログ

2012/11/15 296 users HTML クラスメソッド開発ブログ CSS3アニメーション

この順序で指定するのが必須というわけではありませんが、durationとdelayの順序だけは決まっており、逆にすることが出来ません。 記述例) transition /* * @transition-duration * @transition-property * @transition-timing-function * @transition-delay */ transition: .3... 続きを読む

CSS3でクールな角丸テーブルを作る例:phpspot開発日誌

2012/01/10 66 users phpspot開発日誌 CSS3 カーソル ヘッダー CSS

Practical CSS3 tables with rounded corners - RedTeamDesign CSS3でクールな角丸テーブルを作る例。 ヘッダーにグラデーションをかけつつ角丸なテーブルを作る例です。カーソルを乗せるとハイライトする機能もtransitionによって組み込んであって良い感じです。 HTMLとしては普通のテーブルなのでCSSでここまでカスタマイズできるというのは... 続きを読む

CSS でつまづいたポイント ― transparent, transition, box-sizing | Unformed Building

2011/11/24 84 users transparent box-sizing CSS 過去

CSS でつまづいたポイント ― transparent, transition, box-sizing 過去に CSS でつまづいたポイントとかメモしておこうと思います。 このくらい分かっとけと言われそうですが、まあ自分はその程度だということで。 transparent について CSS グラデーションで何か黒くなるなーと思ったら、transparent を使っていないかどうか見てみましょう。 ... 続きを読む

CSS3のtransitionとtext-shadowで作る様々なリンク装飾｜Webpark

2011/05/24 76 users hover Webpark text-shadow CSS3

CSS3のtransitionとtext-shadowでオンマウス時のリンクを楽しく装飾してみます。すべてのリンクに使うとわずらわしいですが、タイトルロゴなんかだとこれくらい凝ってもいいのかなと思います。 transition（時間的変化をつける） hoverなどでスタイルが変化する際、通常はすぐに切り替わりますが、transitionを使うと時間をかけて変化するなど様々な設定をすることが可能にな... 続きを読む