回答編集履歴

1 ベンダープレフィックスを付けるか付けないかを詳細に記述

kura

kura score 357

2017/04/12 23:09  投稿

elenemts.css の transition の指定が原因です。
```css
.shadow {
   -webkit-transition-duration: 1s;
   -moz-transition-duration: 1s;
   -ie-transition-duration: 1s;
   transition-duration: 1s;
}
```
これを修正して、
```css
.shadow {
   -webkit-transition: 1s -webkit-filter;
   -moz-transition: 1s -moz-filter;
   -ie-transition: 1s -ie-filter;
   transition: 1s filter;
}
```
にしてください。
# 理由
`transition: 1s filter;` は `transition-duration: 1s; transition-property: filter;` のショートハンドです。
[transition-property](https://developer.mozilla.org/ja/docs/Web/CSS/transition-property) に値を指定すると、そのプロパティだけトランジション効果が適用されます。
修正前の指定方法では `transition-property` に値が指定されていないため、すべてのプロパティにトランジション効果が適用されます。
すると anime.js での `scale` のアニメーションにもトランジション効果が適用されるので、anime.js でのアニメーションに加えてトランジション効果が加わるため、おかしなことになって動作が遅れます。
なので修正後のように、`transition-property: filter;` を指定してやればオーケーです。
# 提案
`transition` にはベンダープレフィックスはほぼ必要ないので、もっとシンプルに書いてはどうですか?
```css
.square {
   width: 200px;
   height: 200px;
   background: blue;
}
.shadow {
   transition: 1s filter;
}
.shadow:hover {
   filter: drop-shadow(2px 2px 4px #888);
}
```
[Can I use... CSS3 Transitions](http://caniuse.com/#feat=css-transitions)
(付けるにしても -webkit- だけで十二分です。-ie-というプレフィックスは存在しないと思います。)  
# 提案2
`scale` を操作する程度なら anime.js を使わなくとも `transition` で代用できます。
```css
.square {
   width: 200px;
   height: 200px;
   background: blue;
}
.shadow {
   transition: 1s filter, .8s .2s transform linear;
}
.shadow:hover {
   filter: drop-shadow(2px 2px 4px #888);
   transform: scale(1.1);
}
```
(-webkit- を指定していいかもしれません。)  
 
# 質問とは関係ないけど修正したほうがいいところ
- `<lang = "ja">` → `<html lang = "ja">`
- `<div class = "square shadow" />` → `<div class = "square shadow"></div>`
- `type = "text/javascript"`などは `type="text/javascript"` のようにスペースを入れずに書く
- `<lang = "ja">` → `<html lang="ja">`
- `<div class = "square shadow" />` → `<div class="square shadow"></div>`
- `=` の前後はスペースを入れず、`type="text/javascript"` のように書く

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る