レスポンシブCSSでテキストをアニメーションしながら拡大縮小する方法

根本的にやり方を間違えていると思います。
各機能は小さく作ってできたら移植というような流れで組むべきだと思います。
「ニューっという感じでメニューが拡大縮小されません。」
というのはどの部分のことでしょうか？#menuですか？

それなら

        <!-- メニューのボタン実装 -->
        <ul class="menu">
            <li><a href="#">メニューA</a>
                <ul class="sub">
                    <li><a href="#">サブメニューA</a></li>
                    <li><a href="#">サブメニューA</a></li>
                    <li><a href="#">サブメニューA</a><!--
                        --><ul class="sub">
                            <li><a href="#">サブメニューA2</a></li>
                            <li><a href="#">サブメニューA2</a></li>
                            <li><a href="#">サブメニューA2</a></li>
                        </ul><!--
                    --></li>
                </ul>
            </li>

            <!-- サブメニューのコメントはブラウザ間の余白を取るためらしい -->
            <!-- サブメニューの中にサブメニューを作るとメニューを表示する -->

            <li><a href="#">メニューB</a>
                <ul class="sub">
                    <li><a href="#">サブメニューB</a></li>
                    <li><a href="#">サブメニューB</a>
                        <ul class="sub">
                            <li><a href="#">サブメニューB2</a></li>
                            <li><a href="#">サブメニューB2</a></li>
                            <li><a href="#">サブメニューB2</a>
                                <ul class="sub">
                                    <li><a href="#">サブメニューB3</a></li>
                                    <li><a href="#">サブメニューB3</a></li>
                                    <li><a href="#">サブメニューB3</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">サブメニューB</a></li>
                </ul>
            </li>
            <li><a href="#">メニューC</a>
                <ul class="sub">
                    <!-- サブメニューBだったのでサブメニューCに変更 -->
                    <li><a href="#">サブメニューC</a>
                        <ul class="sub">
                            <li><a href="#">サブメニューC2</a></li>
                            <li><a href="#">サブメニューC2</a></li>
                            <li><a href="#">サブメニューC2</a></li>
                        </ul>
                    </li>
                    <li><a href="#">サブメニューC</a></li>
                    <li><a href="#">サブメニューC</a></li>
                </ul>
            </li>
        </ul>

ここだけの提示でいいです。cssも該当の部分だけ提示してください。
「該当のファイルを書いても」とありますが書いたファイルで想定通り
動作する確認は取れているということでしょうか？

すいません、長くなったので、複数回に分けました。どうやったらレスポンシブになるでしょうか？

そもそもグニューっと曲がらず、スイッチするようなので、レスポンシブはいいんでしょうか？

/*A Design by W3layouts
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
*/
/* reset */
/*
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0px;padding:0px;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
*/
/* start editing from here */
/*a{text-decoration:none;}*/
/*.txt-rt{text-align:right;}*//* text align right */
/*.txt-lt{text-align:left;}*//* text align left */
/*.txt-center{text-align:center;}*//* text align center */
/*.float-rt{float:right;}*//* float right */
/*.float-lt{float:left;}*//* float left */
/*.clear{clear:both;}*//* clear float */
/*.pos-relative{position:relative;}*//* Position Relative */
/*.pos-absolute{position:absolute;}*//* Position Absolute */
/*.vertical-base{    vertical-align:baseline;}*//* vertical align baseline */
/*.vertical-top{    vertical-align:top;}*//* vertical align top */
/*.underline{    padding-bottom:5px;    border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add *//*5px bottom padding and a underline */
/*nav.vertical ul li{    display:block;}*//* vertical menu */
/*nav.horizontal ul li{    display: inline-block;}*//* horizontal menu */
/*img{max-width:100%;}*/
*/
/*--end reset--*/
html body{
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-family: arial;
    font-size: 12px;
    color: #ccc;
    background:#F2F2F2;
}


 .container {
    background-color : #5555aa;
    width : 100%;
    heigth: 200px;
}

.button {
    float :right;
    background-color: #1111aa;
}
.whitebox {
    /* margin-left:0 auto; */
    font-size:20px;
    margin: auto;
/*    margin-top:0px;*/
/*    padding-top:40px;*/
    width: 800px;
    height: 70px;
    list-style-type:none;
    background-color:#ffffff;
    border-radius: 1em;
}

.whitebox li {
    float:right;
    padding:20px;
    /*margin-left: 10px;
    margin-right: 10px;*/

}

.logono-sukima {
    padding:20px;
    float:left;
}

.sentece {
    background:url("../images/b1.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    min-height: 500px;
    padding:10px;
}

.main {
    float:left;
    width:100%;
    height:200px;
    color:white;
}

.toppu {
    margin-top:30px;
}

.bottomu {
    margin-bottom:30px;
}

.lefuto {
    margin-left:30px;
    }
.tyuuousoroe {
    margin-left:auto;
    margin-right:auto;
    }
.bubun{

    padding:40px;
    margin:0px;
    color:white;
    font-size:32px;
    text-decoration:bold;
}

.slick-prev{
    left:25px;
    z-index:999;
    color:#000;
    }
.slick-next{
    right:25px;
    color:black;
    }
/*
.slick-prev::before {
        position: relative;
        content: "\f060";
        font-family: FontAwesome;
        background: rgba(255,255,255,0.5);
        width: 10px;
        opacity: 1;

          }

.slick-next::before {
        position: relative;
        content: "\f061";
        font-family: FontAwesome;
        background: rgba(255,255,255,0.5);
        /*padding-right: 30px;*/
        /*opacity: 1;
        }

*/
/*        .slick_container {
    width:360px; /* 任意の値 */
   /* margin:0 auto; /* 任意の値 */
/*    position:relative;
}*/

/* .slick-prev, .slick-next { */
/*    width:60px; *//* 画像幅 */
/*    height:34px *//* 画像高さ */
/*}
.slick-prev:before, .slick-next:before {
    content:"";
}
button.slick-prev, button.slick-next {
    z-index:2;
}
.slick-prev{left:20px; *//* 任意の値 *//*}
.slick-next{right:20px; *//* 任意の値 *//*}

.slick-arrow{z-index:10;*//* 値は適当に *//*}*/

.mainarea {
/*    padding-left: 1%;*/
    width:100%;
    height:620px;
    margin-top:20px;
    border-top:1px solid rgba(0,0,0,0.3);

}

.leftarea {
    float:left;
    width:64%;
    height:600px;
    clear:both;
}
.posi {

}

.rightarea {
    float:left;
    width:33%;
    height:600px;
    border-left:1px solid rgba(0,0,0,0.3);
    padding-left:20px;
    padding-top:20px;
}
.mizuiro {
    position: relative;
    font-family:arial;
    font-size:38px;
    color:yellow;
    top: 300px;
    left: 200px;
    width:300px;
    height:200px;
    margin:20px auto;
    background-color:aqua;
    z-index:999;
    opacity:0.7;
    padding:20px;
    }
.cian {
    width:350px;
    height:500px;
    background-image:url("../images/ab1.jpg");
    }
.koe {
    font-family:arial;
    font-size:14px;
    color:black;
    }
.tekisuto {
    color:white;
    font-size:32px;
    text-decoration:bold;
    }
.learnmore {
    padding-top:15px;
    padding-left:20px;
    width:150px;
    height:30px;
    background-color:cyan;
    color:white;
    font-weight:bold;
    border:1px solid cyan;
    }
.hyakupa-sento-janai {
    margin-left:130px;
    }
.sakana {
    float:right;
    padding-right:20px;

}

.clearfix {
    clear:both;
    }

.hakonoarea {
    background-color:gray;
    width:130px;
    height:60px;
    text-align:center;
    margin-top:20px;
    padding-top:50%;
    color:white;
    font-weight:bold;
    }

.kurashian {
    padding-left: 1%;
    width: auto;
    height: 900px;
    /*background-color:#62f5f5; 水色。cyanとAquaは同じ */
    background-color:gray;
    max-width:970px;
    }
.tyuudann {
    width:400px;
    height:100px;
    }

.marginzennhoukou {
    margin:30px;
    }

.migidan {
    float:left
    }
.hidaridan {
    float:right;
    }
.thirdbackground {
    background-image:url("https://p.w3layouts.com/demos_new/template_demo/06-03-2018/boogie-demo_Free/19401194/web/images/cunt1.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;

    padding:40px;
    width:auto;
    height:200px;
    color:yellow;
    font-weight:bold;
    font-size:48px;
    }

.statewhite {
    color:white;
    }

.paddingcenter {
    padding-left:300px;

    }

.uminosachi {
    padding:40px;
    width:auto;
    height:300px;
    background-color:aqua;
    }
.kumorinochi {
    padding:40px;
    width:auto;
    height:300px;
    background-color:gray;
    }
.amenochi {
    padding:40px;
    height:350px;
    background-color:black;
    }
.formnoiro {
    font-size:20px;
    border:none;
    border-bottom:1px solid #fff;
    background-color:black;
    color:white;
    margin-bottom:20px;
    color:#999;
    }

.botann {
    position:relative;
    /* top:240px; */
    left:50%;
    padding-top:10px;
    padding-left:10px;
    width:150px;
    height:30px;
    background-color:cyan;
    color:white;
    font-weight:bold;
    border:1px solid cyan;
}
/*@media screen and(min-width:320px){*/

.slicknav_menu {
 display:none;/*PC時は非表示*/
}
@media screen and (max-width: 600px) {
 #gnav {
 display:none;/*モバイル時は非表示*/
}
 .slicknav_menu {
 display:block;/*モバイル時は表示*/}
}
.rateone {
    width:100%;
    height:270px;
    background-color:black;
    }
.sekainoowari {
    float:left;
    width:300px;
    height:200px;
    background-color:cyan;
    font-size:18px;
    color:yellow;
    opacity: 0.7;
    text-align:center;
    }
.mojishiro {
    color:white;
    text-align:center;
    }
.footer {
    width:100%;
    height:70px;
    background-color:black;
    }
.lastword {
    color:white;
    text-align:center;
    }

@media screen and (min-width: 970px) {

.amenochi{
    padding:0px;
    height:500px;
    }
.formnoiro {
    width:270px;
    }
.botann {
    left:60%;
    }
.amenochi{
    padding-top:10px;

    }
.mizuiro {
    left:200px;
    }
.tyuudann {
    width:400px;
}
.rateone {
    height:300px;
    }

@media screen and (max-width: 480px) {
.leftarea {
    float:none;
    width:auto;
    }
.mizuiro {
    position: static;
    font-family:arial;
    font-size:38px;
    color:yellow;
    top: auto;
    left: auto;
    width:237px;
    height:auto;
    margin-top:30px;
    margin-left: auto;
    background-color:aqua;
    z-index:999;
    opacity:0.7;
    clear:both;
    }
.konocssdake {
    margin-top:40px;
    clear:both;
    }
.botann {
    left:30%;
    }
.amenochi {
    padding-top:10px;
    }
.kurashian {
    height: auto;
    }
.migidan {
    float: none;
    }
.statewhite {
    font-size:12px;
    }
.thirdbackground {
    font-size:24px;
    }
.paddingcenter {
        padding-left: 50px;
        }
.formnoiro {
    font-size:20px;
    border:none;
    border-bottom:1px solid #fff;
    background-color:black;
    color:white;
    margin-bottom:20px;
    color:#999;
    }

.botann {
    position:relative;
    /* top:240px; */
    left:50%;
    padding-top:10px;
    padding-left:10px;
    width:150px;
    height:30px;
    background-color:cyan;
    color:white;
    font-weight:bold;
    border:1px solid cyan;

    }
.hyakupa-sento-janai {
    margin-left:5px;
    }
.tyuudann {
    width:auto;
    }
.cian {
    width:320px;
    }
.logono-sukima {
    float:none;
    }
.sekainoowari {
    float:none;
    }
.rateone {
    height:auto;
    }

@media screen and (min-width: 768px) {

.amenochi{
    padding:0px;
    height:500px;
    }
.formnoiro {
    width:270px;
    }
.botann {
    /*top:0%;*/
    /*left:80%;*/
    }
.amenochi{
    padding-top:10px;
    }
.kurashian {
    height:auto;
    }

.migidan {
    float: left;
    }
.tyuudann {
    height:auto;
}
.statewhite {
    font-size:24px;
}
.thirdbackground {
    font-size:48px;
    }
.paddingcenter {
    padding-left: 150px;
    }

.kinyuuwrap{
    height:330px;
    }
.kinyuu {
    color:white;
    float:left;
    }
.formnoiro {
    font-size:20px;
    border:none;
    border-bottom:1px solid #fff;
    background-color:black;
    color:white;
    margin-bottom:20px;
    color:#999;
    }

.botann {
    position:relative;
    /* top:240px; */
    left:60%;
    padding-top:10px;
    padding-left:10px;
    width:150px;
    height:30px;
    background-color:cyan;
    color:white;
    font-weight:bold;
    border:1px solid cyan;

    }

.hidaridan {
    float:right;
    }
.rateone {
    height:500px;
    }

}