CSSアニメーションを使ってみた気づき

codropsからサンプルさがし

codrops

とにかくステキなサンプルがたくさん紹介されています。

どのサンプルにも、「デモ」「ソース」とその使い方が書いてあって便利です。

display:none;をかけてる要素にはtransitionがきかない

display:none;で表示非表示を切り替えてる要素に、transitionでアニメーションをかけようとしても、パッと表示が変わってしまってアニメーションできませんでした。

そのときは親要素をつくって、親要素にtransitionをかけて、子要素にdisplay:none;をつけたら大丈夫でした。 そのあとで、非表示にしたい要素にheight:0;とoverflow:hidden;かけるのでもよかったなと思い至りました。

（追記：2016/4/14） visibility:hidden;にしてる要素にはtransitionがかかると会社の人に教えてもらいました！ あとtransitonかけられるプロパティ一覧もおしえてもらいました

CSS animatable properties ❧ Oli.jp (@boblet)

ループのkeyframesアニメーションに間隔をあけたいときは

keyframesのなかで、間隔をつくるのがよさそうでした。

(例)

@keyframes scaling{
  from{transform:scale(1)}
  5%{transform:scale(.9)}
  10%{transform:scale(1)}
  15%{transform:scale(.9)}
  20%{transform:scale(1)}
  to{transform:scale(1)}
}

アニメーションは20%までで終わらせて、20%〜100%までは停止。

動きはライブラリからさがすと早いです

ライブラリのソースをコピーして、自分好みに変えると作業の手間が省けてよかったです。

ライブラリサイト

• Animate.css
• Magic Animations CSS3