主なナビゲーションとしてjqueryタブを使用しています.cssトランジションで達成しようとしているのは、UIタブリンクのボタンがアクティブなときに親の背景画像のサイズが変わることです. 'GALLERY' box-bg の背景をクリックすると、アニメーションが表示され、リンクがアクティブのままになります。
タブのHTMLの一部は次のとおりです
<div class="box-bg">
<div id="box">
<div id="tabs">
<ul class="ui-tab-block">
<li style="height:60px; background:rgba(0,0,0,0.4);"></li>
<li class="ui-prim-nav"><a href="#home">HOME</a></li>
<li class="ui-prim-nav"><a href="#gallery">GALLERY</a></li>
<li class="ui-prim-nav"><a href="#about">ABOUT</a></li>
<li class="ui-prim-nav"><a href="#contact">CONTACT</a></li>
<li style="height:170px; background:rgba(0,0,0,0.4);"></li>
</ul>
</div>
</div>
</div>
私の背景
.box-bg{
background:url(../img/bg_placeholder.jpg) no-repeat;
background-size: 1000px 666px;
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
transition: background-size 2s ease-in-out;
-moz-transition: background-size 2s ease-in-out;
-web-kit-transition: background-size 2s ease-in-out;
-o-transition: background-size 2s ease-in-out;
}
私のCSSトランジション
li.ui-tabs-active a:active .box-bg{
-webkit-animation-name: bg-size;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-delay: .5s;
-moz-animation-name: bg-size;
-moz-animation-duration: 2s;
-moz-animation-timing-function: ease-out;
-moz-animation-delay: .5s;
-o-animation-name: bg-size;
-o-animation-duration: 2s;
-o-animation-timing-function: ease-out;
-o-animation-delay: .5s;
}
@keyframes bg-size {
0% {
background-size:1000px 666px;
}
100% {
background-size:2000px 1333px;
}
}
@-webkit-keyframes bg-size {
0% {
background-size:1000px 666px;
}
100% {
background-size:2000px 1333px;
}
}
ここに私がやっていることのJSFIDDLEがあります。私はjqueryでそれを行うことができるかどうかを見て、今のところcssアニメーションを破棄しました。
大変申し訳ありませんが、事前にご覧いただきありがとうございます。