【CSS3】アニメーションボタン

f:id:sntkk3:20170413234227g:plain

CSS3によるアニメーションボタン No.2

拡大・縮小するアニメーションボタンを作成しました。

以下、ソースを記載します。

[ソース] html

<a href="#"><img class="area-main-topbtnr" src="http://サイト/パス/画像ファイル名" width="100%"></a>

※上記、サイト名、パス、画像ファイル名は適宜変更してください。

[ソース] css

.area-main-topbtnr{
  z-index:1;animation:a 1.4s;animation-iteration-count:infinite;
  -webkit-animation:a 1.4s;
  -webkit-animation-iteration-count:infinite
}
@keyframes a{
  0%{transform:scale(0.7,0.7)}
  0%,50%{opacity:1}
  50%{transform:scale(1.0,1.0)}
  to{transform:scale(0.7,0.7)}
}
@-webkit-keyframes a{
  0%,to{opacity:1}
  0%{-webkit-transform:scale(0.7,0.7)}
  50%{
  -webkit-transform:scale(1.0,1.0)}50%,
  to{opacity:1}to{-webkit-transform:scale(0.7,0.7)
  }