Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vueでのアニメーションの話

daitasu
March 22, 2019
140

 Vueでのアニメーションの話

2019/03/22
We are Javascripters@30th (https://wajs.connpass.com/event/122984/ )でお話しした内容です。

スライド内にgifがあり、speaker deckだと表示できないため、google slideに原本を置いています。
https://docs.google.com/presentation/d/1hiZ6GkQpSbDosnoLH_DXYQt1PiWVnZgn0YdQDfHyKNk/edit?usp=sharing

daitasu

March 22, 2019
Tweet

Transcript

  1. CSSアニメーション 8つのプロパティ 6 ・animation-name: @keyframesに使う名前 ・animation-duration: 継続時間 ・animation-timing-function: 進行の度合 ・animarion-delay:

    始まるまでの時間 ・animation-iteration-count: 繰り返し回数 ・animation-direction: 再生方向 ・animation-fill-mode:        開始/終了時のスタイル指定 ・animation-play-state: 再生・停止を指定
  2. 24 Atoms Dash!! ・Atomic DesignでAtomを作ってみたかった ・Nuxt.js + Vuetify (フロントのみ) ・キャラクター選択で好きな原子を選べる

    ・うねうねしながら走る(障害物レース) ・当たり判定などがまだ出来てないためまだ未公開