LoginSignup
1
0

More than 3 years have passed since last update.

IEではtransformで斜めにした親要素とCSSアニメーション(transition/animation)を指定した子要素は相性が悪い

Posted at

起きた現象

wow.jsとAnimate.cssでいつものようにclass属性とdata属性を使用していました。

※wow.jsとAnimate.cssについて
Animate.cssとwow.jsを使ってサイトにアニメーションをつける

今回は背景を斜めにする必要があり、親要素に以下のようなプロパティを指定して子要素にアニメーションの指定をしていました。

サンプル
https://codepen.io/ShimokawaChan/pen/qGWxPV

※背景斜めについて
斜めの背景を作るためのCSSは「回転させて元に戻す」で書く!

他のブラウザでは問題なかったのですが、、、IEだと要素が消えるもしくはチカチカする、、、現象が起きました。

対処

いい解決策が見つからず、背景を斜めにしているところを通常にもどして上部と下部に三角形をつけるような形で対処しました。

こちらの方がやっているような方法

斜め背景でカッコいいフロントエンドデザイン

おしまい

IEはまだまだ不安定なのでCSS3のプロパティを使う際は注意したいものです。。。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0