アニメーションに関するrenosのブックマーク (3)

  • Anima2Dでキャラクターアニメーションを作ろう!編 - SEGA TECH Blog

    ■ 共闘ことばRPG 「コトダマン」 www.youtube.com こんにちは。 セガゲームス 開発統括部 アート&デザイン部 TAセクション 廣田です。 今春リリースの「共闘ことばRPG コトダマン」では全てのキャラクターアニメーション(700キャラ以上!)をAnima2D で作成しました。タイトルリリース前ですが、一足先にコトダマンのキャラクターを使って、Anima2D のセットアップからアニメーション作成を解説していきます。 さらに次回、Anima2Dでの制作をサポートするスクリプトについても書いていく予定です。 公式 好評配信中です! kotodaman.sega.jp Twitter この記事で紹介しているキャラクターは、全てコトダマンのAnima2Dキャラクターです。 Twitterでは他のキャラクターもたくさん登場していますので、Anima2Dのサンプルとして是非ご覧くださ

    Anima2Dでキャラクターアニメーションを作ろう!編 - SEGA TECH Blog
  • CSS:ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法 - NxWorld

    ここ最近主にナビゲーションなどでホバー時にアンダーラインをアニメーションさせるエフェクトの実装要望が多いので、パッと使えるようによく利用するものをひと通りまとめたのでシェアします。 また、大体この手のアニメーションを利用する際はサイト全体で動きを統一させることが多いのですが、たまに場所によって少し違いをつけたいということもあるので、そういったときにすぐ対応できるようにSassのmixinを用いて実装する方法も併せて紹介します。 ここで紹介しているサンプルで使用しているHTMLは、すべて<a href="#">Lorem ipsum</a>のようなシンプルなa要素を使用した想定になっています。

    CSS:ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法 - NxWorld
  • CSSアニメーション 入門 - Qiita

    はじめに CSSアニメーションに関して説明する機会があったため、それらに関してまとめました。 「CSSは書けるがCSSアニメーションがよくわからん!」といった人達向けに書いた記事であり、 CSSアニメーションに関するプロパティを理解できるようになることを目的としています。 デモはCodePen上に置いてあります。編集して変化を見てみると理解が深まると思います。 デモのJavaScriptはjQueryを読み込んでいないと動かないため、ローカル環境でデモを実行する場合はご注意ください。 CSSアニメーションとは 要素をアニメーションさせるCSSの機能。 CSS TransitionCSS Animationの2つの機能がある。 CSS Transitionとは プロパティに変更があった時に、一定時間でプロパティを変化させる機能。 単純な動きのアニメーションを実装する時に利用する。 CSS

    CSSアニメーション 入門 - Qiita
  • 1