【CSS3】アニメーション(ゆらゆらバナー)

ECサイト設置用 CSS3のアニメーションバナー

ECサイト設置用にCSS3のアニメーションバナー、
作りました。 ※以下はDemo用ダミーです。

f:id:sntkk3:20170406231359p:plain

以下、サンプル用のソースを共有します。

<style> 
/*   基本設定   */ 
html, body { 
  margin: 0; 
  padding: 0; 
} 
body { 
  font-family: 
  'Hiragino Kaku Gothic ProN', 
  Meiryo, sans-serif; 
  font-size:16px; 
  -webkit-text-size-adjust: 100%; 
} 
img{ 
  border-width:0px; 
} 
.article{ 
  font-size:16px; 
  line-height:170%; 
} 
/*記事・カテゴリ中の画像調整*/ 
img.slide_arrow { 
  max-width:100%; 
  height:auto !important; 
} 
/*   レイアウト設定   */ 
#arrowbutton { 
  float: left; 
  box-sizing: border-box; 
  background-color:#fff; 
  border-radius: 4px; 
  margin-bottom: 30px; 
} 
.clear{ 
  clear:both; 
} 
/*** ゆらゆらアニメーションバナー設定 ***/ 
@-moz-keyframes skew_button { 
0% { -moz-transform: skewX(9deg); } 
10% { -moz-transform: skewX(-8deg); } 
20% { -moz-transform: skewX(7deg); } 
30% { -moz-transform: skewX(-6deg); } 
40% { -moz-transform: skewX(5deg); } 
50% { -moz-transform: skewX(-4deg); } 
60% { -moz-transform: skewX(3deg); } 
70% { -moz-transform: skewX(-2deg); } 
80% { -moz-transform: skewX(1deg); } 
90% { -moz-transform: skewX(0deg); } 
100% { -moz-transform: skewX(0deg); } 
} 
@-o-keyframes skew_button { 
0% { -o-transform: skewX(9deg); } 
10% { -o-transform: skewX(-8deg); } 
20% { -o-transform: skewX(7deg); } 
30% { -o-transform: skewX(-6deg); } 
40% { -o-transform: skewX(5deg); } 
50% { -o-transform: skewX(-4deg); } 
60% { -o-transform: skewX(3deg); } 
70% { -o-transform: skewX(-2deg); } 
80% { -o-transform: skewX(1deg); } 
90% { -o-transform: skewX(0deg); } 
100% { -o-transform: skewX(0deg); } 
} 
@-webkit-keyframes skew_button { 
0% { -webkit-transform: skewX(9deg); } 
10% { -webkit-transform: skewX(-8deg); } 
20% { -webkit-transform: skewX(7deg); } 
30% { -webkit-transform: skewX(-6deg); } 
40% { -webkit-transform: skewX(5deg); } 
50% { -webkit-transform: skewX(-4deg); } 
60% { -webkit-transform: skewX(3deg); } 
70% { -webkit-transform: skewX(-2deg); } 
80% { -webkit-transform: skewX(1deg); } 
90% { -webkit-transform: skewX(0deg); } 
100% { -webkit-transform: skewX(0deg); } 
} 
@-moz-keyframes skew_arrow { 
0% { -moz-transform: translateX(0px); } 
45% { -moz-transform: translateX(20px); } 
50% { -moz-transform: translateX(25px); } 
55% { -moz-transform: translateX(20px); } 
95% { -moz-transform: translateX(0px); } 
100% { -moz-transform: translateX(0px); } 
} 
@-o-keyframes skew_arrow { 
0% { -o-transform: translateX(0px); } 
45% { -o-transform: translateX(20px); } 
50% { -o-transform: translateX(25px); } 
55% { -o-transform: translateX(20px); } 
95% { -o-transform: translateX(0px); } 
100% { -o-transform: translateX(0px); } 
} 
@-webkit-keyframes skew_arrow { 
0% { -webkit-transform: translateX(0px); } 
45% { -webkit-transform: translateX(20px); } 
50% { -webkit-transform: translateX(25px); } 
55% { -webkit-transform: translateX(20px); } 
95% { -webkit-transform: translateX(0px); } 
100% { -webkit-transform: translateX(0px); } 
} 
.a-btn { 
position: relative; 
display:block; 
width:100%; 
max-width:600px; 
padding:10px; 
padding-left:10%; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
margin-left:auto; 
margin-right:auto; 
} 
.shake 
{ 
-webkit-animation-duration:2s; 
-moz-animation-duration:2s; 
-ms-animation-duration:2s; 
-o-animation-duration:2s; 
animation-duration:2s; 
-webkit-animation-timing-function: ease-in; 
-moz-animation-timing-function: ease-in; 
-o-animation-timing-function: ease-in; 
animation-timing-function: ease-in; 
-moz-animation-iteration-count: infinite; 
-webkit-animation-iteration-count: infinite; 
-o-animation-iteration-count: infinite; 
-ms-animation-iteration-count: infinite; 
animation-iteration-count: infinite; 
margin-left:auto; 
margin-right:auto; 
z-index: 8; 
-webkit-animation-name: skew_button; 
-moz-animation-name: skew_button; 
-o-animation-name: skew_button; 
animation-name: skew_button; 
width:90%; 
} 
.slide_arrow { 
position: absolute; 
top:30%; 
left:-5px; 
-webkit-animation-duration:1s; 
-moz-animation-duration:1s; 
-ms-animation-duration:1s; 
-o-animation-duration:1s; 
animation-duration:1s; 
-webkit-animation-timing-function: ease-in; 
-moz-animation-timing-function: ease-in; 
-o-animation-timing-function: ease-in; 
animation-timing-function: ease-in; 
-moz-animation-iteration-count: infinite; 
-webkit-animation-iteration-count: infinite; 
-o-animation-iteration-count: infinite; 
-ms-animation-iteration-count: infinite; 
animation-iteration-count: infinite; 
-webkit-animation-name: skew_arrow; 
-moz-animation-name: skew_arrow; 
-o-animation-name: skew_arrow; 
animation-name: skew_arrow; 
z-index: 9; 
width:20%; 
max-width:100px; 
} 
.a-btn:hover img{ 
opacity:1; 
} 
p { 
    display: block; 
    -webkit-margin-before: 1em; 
    -webkit-margin-after: 1em; 
    -webkit-margin-start: 0px; 
    -webkit-margin-end: 0px; 
} 
</style>

<div id="arrowbutton"> 
<p><a class="a-btn" href="#" target="_blank" rel="nofollow"><img class="slide_arrow" src="画像ファイル01" alt="" width="100"><img class="shake aligncenter" src="画像ファイル02[f:id:sntkk3:20170406231359p:plain]" alt="" width="500" height="120"></a></p> 
</div><!--#arrowbutton-->