忘れがちなCSSアニメーションのメモ (逐一追加予定)

ベンダープレフィックスは要らない

最近はあまり古いブラウザまで対応することがないので、ベンダープレフィックスをつける事が無い。

-webkit-; (safari / chrome)
-moz-;    (fifefox)

付ける場合でも、上記の二つをつけとけばだいたい大丈夫。(IEとかOperaは無視)

Transition

test.jade

#hoge
  a(href="#") BUTTON

test.styl

a 
 display block
 color #404040
 border 1px solid #404040
 border-radius 4px
 width 200px
 height 50px
 text-align center
 line-height 50px
 text-decoration none
 transition 0.5s  // 0.5秒掛けて変化させる

a:hover
 background #181818
 color #fff

sample