0

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);
  }
}
1
  • 問題を再現出来るコードを質問文へ追記していただけませんか?
    – supa
    Commented 2020年3月16日 5:15

1 件の回答 1

0

下記のコードにより、スマホでもタブレットでも下から起き上がり、自己解決致しました。

@-webkit-keyframes contentScale {
  0%  {visibility:hidden;
  }
  40%  {visibility:hidden;
  }
  70% {
    -webkit-transform: perspective(800px) scale(0.9) rotateX(15deg);
            transform: perspective(800px) scale(0.9) rotateX(15deg);
            transform-origin: center bottom;        
  }
  100% {
    -webkit-transform: perspective(800px) scale(1) rotateX(0);
            transform: perspective(800px) scale(1) rotateX(0);
  }
}
@keyframes contentScale {
  0%  {visibility:hidden;
  }
  40%  {visibility:hidden;
  }
  
  70% {
    -webkit-transform: perspective(800px) scale(0.9)  rotateX(15deg);
            transform: perspective(800px) scale(0.9)  rotateX(15deg);
            transform-origin: center bottom;        
  }
100% {
    -webkit-transform: perspective(800px) scale(1) rotateX(0);
            transform: perspective(800px) scale(1) rotateX(0);
   }    
}

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。