share facebook facebook twitter menu hatena pocket slack

2018.10.17 WED

background-imageはanimationやtransitionで動かせない

工藤 響己

WRITTEN BY 工藤 響己

CSSのbackground-imageプロパティはanimationやtransitionを使って動かせません。

しかし、アニメーションで動かせないと聞くとかえって動かしたくなりませんか?特にホバーするとふわりとグラデーションするボタンとか作りたくないですか?(謎の圧)

まずはこちらをご覧ください。

See the Pen Button with Gradient Effect by Hibiki Kudo (@h_kudo) on CodePen.

ホバーすると背景がグラデーションするものの、仕様通りtransition-durationプロパティが無視されアニメーション効果がついてくれません。
そこでopacityプロパティと擬似要素を使ってふわりと背景が遷移するアニメーションを表現します。

See the Pen Button with Animated Gradient Effect by Hibiki Kudo (@h_kudo) on CodePen.

コードはこちら

<button type="button" class="button"><span class="button__inner">Hover me</span></button>
.button {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: auto;
  min-width: 120px;
  height: 50px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background-color: #da0641;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}
.button::after {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  transition-duration: .3s;
  opacity: 0;
  background-image: linear-gradient(135deg, #f2d50f 0%, #da0641 100%);
}
.button:hover {
  cursor: pointer;
}
.button:hover::after {
  opacity: 1;
}
.button__inner {
  font-size: 20px;
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 120px;
  height: 100%;
  padding: 0 15px;
  text-decoration: none;
  color: #fff;
  justify-content: center;
  align-items: center;
}

この小技で少し遊び心を感じるふわっとグラデーションするボタンが実装できました。

元記事はこちら

background-imageはanimationやtransitionで動かせない

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。