CSS初心者です。
下記URLのcodepenによるサンプル「CSS のみでページを開くときのオープニングシャッターアニメーションを表現してみる」を実際サーバーにアップして試したところ、パソコンとタブレットの横向きでは問題なくサンプル通り表現されますが、タブレットの縦向きではメインのページコンテンツが上半分はシャッターにて非表示にはなりますが、下半分が背面に移動せず表示されたままです。完全に全体が非表示にするコードをご教示ください。
ページが下から起き上がる感じですが、実際はタブレットのように縦向きにするとページの中心部分から中折れしているので下半分が-15度手前に表示された状態です。下記のコード部分に変更してみたのですがだめでした。
transform: bottom scale(0.9) rotateX(15deg)
他の動作には問題は有りません。
宜しくお願いします。
https://digipress.info/tech/opening-loading-shutter-with-pure-css/
テキストエディタ Dreamweaver CS6
ブラウザ Chrome
タブレット ipad
.content{
animation: contentScale 2.6s forwards;
}
@keyframes byeShutter{
70%{
opacity:1;
}
100%{
opacity:0;
display:none;
z-index:-1;
}
}
@keyframes shutterOpen1{
0%{
width:0;
height:1px;
}
50%{
width:100%;
height:1px;
}
90%{
width:100%;
height:100%;
}
100%{
width:100%;
height:100%;
}
}
@keyframes shutterOpen2{
60%{
width:120%;
height:0;
transform:rotate(5deg);
}
90%{
width:120%;
height:100%;
transform:rotate(-5deg);
}
100%{
width:120%;
height:100%;
transform:rotate(-5deg);
}
}
@keyframes contentScale{
70%{
transform:perspective(800px) scale(0.9) rotateX(15deg);
}
100%{
transform:perspective(800px) scale(1) rotateX(0);
}
}