More than 5 years have passed since last update.

カードにマウスオーバーした時に影をアニメーション表示する

Last updated at 2014-07-16Posted at 2014-07-10

CSS

.card{
  -webkit-transition: all .3s;
  transition: all .3s;
  &:hover{
    -webkit-box-shadow: 0 6px 6px -6px #777;
    -moz-box-shadow: 0 6px 6px -6px #777;
    box-shadow: 0 6px 6px -6px #777;
  }
}

transition: all .3s;は全ての要素について0.3秒間のアニメーションを行なうという指示。

transition: box-shadow .3s;にすればbox-shadowにだけアニメーションがかかり、
hoverの際にwidthやheightを変更してもアニメーションはかからない。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up