この資料は最新のウェブ技術を利用しておりますので、 ブラウザの不具合によって正常に表示されない場合がございます。 特にChromeのご利用なら、このタイトルスライドと、 iframeのコンテンツが正しく表示されません。 Edgeのご利用なら、ブラウザの不具合によって コンテンツが乱れて、分かりづらいところがございます。 これからスライドシェア版を用意いたしますが、 暫くお待ちください。
Native
Web
Native
Web
問題1

不要

「みてみて!」

「聞いてる?」

「ラジャー」

「何してる??」

Edgeでは、SVG SMILが実装されていませんので、 アニメーションが走りません。

「仕事中だよ」

Edgeでは、SVG SMILが実装されていませんので、 アニメーションが走りません。

「何したの?」

「こう変わったよ」

「どこに行っちゃった?」

「こういう関係」

「エンジョイ」?

問題2

難しい

CSS Transitions


button {
  background: #e90000;
}
button:hover {
  background: #e9aaaa;
}
            

CSS Animations


button {
}
@keyframes 膨らむ {
  0%   { transform: scale(1) }
  100% { transform: scale(2) }
}
            
CSSTransitions CSSAnimations
  • A → B
  • A → B → C
  • A → B → A
  • 繰り返し
4+ (transitions)
5+
1+
10
3+ (transitions)
4+
Chromeでは、SVGのtransform-originがSMILの <animateTransform>で使えないようですので、正常に表示されません。
Edgeでは、SVG SMILが実装されていませんので、 アニメーションが走りません。

SVG SMIL



  <animateTransform
    attributeName="transform"
    type="scale"
    values="1; 2; 1"
    dur="2s" repeatCount="indefinite"
    begin="mouseover" end="mouseout"/>

            
ボタン
  • パス変換の
    アニメーション
  • モーションパス
  • 加法的アニメーション
  • 連鎖するアニメーション
4+
2+
(deprecated in 45+)
4+

Javascript


$('button').animate(
  { scale: 2 },
  { duration: 1000, loop: true });
            

Libraries

Web Animations


elem.animate({ transform: 'scale(2)' },
             { duration: 1000,
               direction: 'alternate',
               iterations: Infinity });
          
animate():
animate(): 36+
実装中
問題3

遅い

アニメから学ぼう

『昭和 二万日の全記録 第9巻』講談社、1989年、p.239。パブリックドメイン。

小さな動き

+

セル画を動かす

キャメルを動かす

MTさん (主要スレッド)

もう無理!

MTさん
コンポジターくん

コンポジッターくん、できる子

  • 位置を変える
  • 角度を変える
  • 拡大・縮小する
  • 3D のトランスフォーム
  • 透明度を変える

つまり、transformopacityだけ

tympanus.net/Blueprints/ProductComparison/
tympanus.net/Blueprints/PageStackNavigation/
tympanus.net/Development/DialogEffects/cathy.html
bouncejs.com
github.com/birtles/facetweak/
MTさん
コンポジターくん

.active {
  animation: fly 2s;
}
@keyframes fly {
  to {
    transform: translate(-500px);
  }
}
          

早く教えてよ。

MTさん
コンポジターくん

この1枚を200pxぐらい右横にずらして、アレンジしてね。

了解です。

MTさん
コンポジターくん
{ animation }

このアニメーション
あるんだけど…

任せてください 💪

CSS Animations / Transitions:
Javascript:

パラパラアニメ?

1 0
1 0
1 0
1 0

img:nth-child(1) {
  animation: frame1 2s infinite;
}
@keyframes frame1 {
  from   { opacity: 1 }
  25%    { opacity: 1 }
  25.01% { opacity: 0 }
  to     { opacity: 0 }
}
              

img:nth-child(1) {
  animation: frame1 2s infinite;
  animation-timing-function:
                       step-end;
}
@keyframes frame1 {
  from   { opacity: 1 }
  25%    { opacity: 0 }
  25.01% { opacity: 0 }
  to     { opacity: 0 }
}
              

img:nth-child(1) {
  opacity: 0;
  animation: frame1 2s infinite
             step-end;
}
@keyframes frame1 {
  from   { opacity: 1 }
  25%    { opacity: 0 }
  to     { opacity: 0 }
}
              

img:nth-child(1) {
  opacity: 0;
  animation: frame1 2s infinite
             step-end;
}
@keyframes frame1 {
  from   { opacity: 1 }
  25%    { opacity: 0 }
}
img:nth-child(2) {
  animation: frame2 2s infinite
             step-end;
}
@keyframes frame2 {
  25%    { opacity: 1 }
  50%    { opacity: 0 }
}
              


img {
  opacity: 0;
  animation: frame1 2s infinite
             step-end;
}
@keyframes frame1 {
  from   { opacity: 1 }
  25%    { opacity: 0 }
}
img:nth-child(2) {
  animation-name: frame2;
}
@keyframes frame2 {
  25%    { opacity: 1 }
  50%    { opacity: 0 }
}
              

img {
  opacity: 0;
  animation: frame 2s infinite
             step-end;
}
img:nth-child(2) {
  animation-delay: 0.5s
}
img:nth-child(3) {
  animation-delay: 1s
}
img:nth-child(4) {
  animation-delay: 1.5s
}
@keyframes frame {
  from   { opacity: 1 }
  25%    { opacity: 0 }
}
              
ありがとうございました。 @brianskold