67947


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

[code]

    .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);
      }
    }
    
[/code]


CC BY-SA 4.0
2020-03-15T23:55:16.007
63872
2020-06-24T07:04:16.430
2020-03-28T02:56:08.077
37940
37940
question
css
codepenによるcssサンプルについてタブレットの縦方向で下半分が表示される原因


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

[code]

    @-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);
       }    
    }
    
[/code]


CC BY-SA 4.0
2020-06-24T06:54:57.460
67947
2020-06-24T07:04:16.430
2020-06-24T07:04:16.430
3060
37940
63872
answer