CSSアニメーションでキラッと光るボタンの実装

1889 ワード
animation CSS3 CSS3 テキストリンク

CSSアニメーションを使ってキラッと光るボタンを実装する際、ボタンの形が角丸だった場合に
safariだとアニメーション部分が四角く表示されてしまうということがあったのでその解決方法メモ。
以下、pugとstylusです。

button(type='button').btn ボタン

.btn
  width: 300px
  color: #fff
  background-color: #76bddd
  font-size: 18px
  font-weight: bold
  border-radius: 40px
  border: 2px solid transparent
  padding: 14px 20px
  position: relative
  overflow: hidden
  &:before 
    content: ''
    width: 30px
    height: 100%
    background-color: #fff
    animation: shine 3s ease-in-out infinite
    position: absolute
    top: -180px
    left: 0
    opacity: 0
    transform: rotate(45deg)

@keyframes shine 
  0% 
    transform: scale(0) rotate(45deg)
    opacity: 0

  80% 
    transform: scale(0) rotate(45deg)
    opacity: 0.5

  81% 
    transform: scale(4) rotate(45deg)
    opacity: 1

  100% 
    transform: scale(50) rotate(45deg)
    opacity: 0

chromeだとこんな感じ。

ボタンの形に沿ってキラッと光ってくれてます。

safariだと、

ボタンの形に沿わず四角く光るフィルターが被さっただけのように見えてしまっています。

解決方法は、.btnに z-index を書いてあげるだけです！

.btn
  width: 300px
  〜
  z-index: 10

簡単！