テキストをアニメーション化してCSSの画面の上部に移動するにはどうすればいいですか？

Question

私のページを開くと、私のテキストは画面中央にアニメーションで表示されます（私は "animate.css"を使用します）。そして、画面サイズに関係なく画面の上部に移動します。それを行う方法はありますか？

私はどのようにテキストdivを中央に配置しましたか。

.center { 

     position: absolute; 
     margin: auto; 
     top: 0; 
     right: 0; 
     bottom: 0px; 
     left: 0; 
     width: 100%; 
     height: 170px; 
     background-color: red; 

    } 

私のアニメーション技術。 （下段の代わりに：300ピクセル、ページ上部に移動します）

.center:hover { 

     -webkit-animation: animationShrink 2s 1 ease forwards; 

    } 

    .container:hover { 

     -webkit-animation: animationUp 2s 1 ease forwards; 

    } 

    @-webkit-keyframes animationShrink { 

     from { 

      font-size: 1em; 

     } 
     to { 

      font-size: 0.6em; 

     } 

    } 

    @-webkit-keyframes animationUp { 

     from { 

      bottom: 0px; 

     } to { 

      bottom: 300px; 

     } 

    } 

ありがとうございました。

Answer 1

HTML：

<a class='center'>Text</a> 

はCSS：

.center { 
    position: absolute; 
    left: 0; 
    top: calc(50vh - (170px/2)); 
    width: 100%; 
    height: 170px; 
    background-color: red; 
    -ms-transition: top 1s linear; 
    -moz-transition: top 1s linear; 
    -o-transition: top 1s linear; 
    -webkit-transition: top 1s linear; 
    transition: top 1s linear; 

} 

.center:active { 
    top: 0; 
    -ms-transition: top 2s linear; 
    -moz-transition: top 2s linear; 
    -o-transition: top 2s linear; 
    -webkit-transition: top 2s linear; 
    transition: top 2s linear; 
} 

例えば、このplunkerをチェックしてください： https://plnkr.co/edit/GvH176vMGKSD47VrleXQ?p=preview

を私は（上のクリックしてアクティブにアニメーションを開始するには、 "アクティブ" 疑似クラスを使用要素、たとえばちょうど）。このコードは、カスタマイズのための良い基盤を提供するはずです。