@keyframes menuOn {
    0%   {--borderSize:0px}  
    50% {--borderSize:1px}
    100% {--borderSize:3px}
}
@-webkit-keyframes menuOn {
    0%   {--borderSize:0px}  
    100% {--borderSize:3px}
}
@-moz-keyframes menuOn {
    0%   {--borderSize:0px}  
    100% {--borderSize:3px}
}
@-o-keyframes menuOn {
    0%   {--borderSize:0px}  
    100% {--borderSize:3px}
}



@keyframes  skewRotateAnim{ 
    0% { transform: translate(-50%, -50% ) rotate(1deg) skew(1deg, 1deg) }  
    15% { transform: translate(-50%, -50% ) rotate(15deg) skew(3deg, 6deg) }
    35% { transform: translate(-50%, -50% ) rotate(12deg)skew(5deg, 5deg) }
    65% { transform: translate(-50%, -50% ) rotate(25deg)skew(2deg, 12deg) }
    80% { transform: translate(-50%, -50% ) rotate(36deg) skew(1deg, 1deg) }
    100% { transform: translate(-50%, -50% ) rotate(1deg) skew(1deg, 1deg) } 
}
@-webkit-keyframes  skewRotateAnim{ 
    0% { -webkit-transform: translate(-50%, -50% ) rotate(1deg) skew(1deg, 1deg) }  
    15% { -webkit-transform: translate(-50%, -50% ) rotate(15deg) skew(3deg, 6deg) }
    35% { -webkit-transform: translate(-50%, -50% ) rotate(12deg)skew(5deg, 5deg) }
    65% { -webkit-transform: translate(-50%, -50% ) rotate(25deg)skew(2deg, 12deg) }
    80% { -webkit-transform: translate(-50%, -50% ) rotate(36deg) skew(1deg, 1deg) }
    100% { -webkit-transform: translate(-50%, -50% ) rotate(1deg) skew(1deg, 1deg) } 
}
@-moz-keyframes  skewRotateAnim{ 
    0% { -moz-transform: translate(-50%, -50% ) rotate(1deg) skew(1deg, 1deg) }  
    15% { -moz-transform: translate(-50%, -50% ) rotate(15deg) skew(3deg, 6deg) }
    35% { -moz-transform: translate(-50%, -50% ) rotate(12deg)skew(5deg, 5deg) }
    65% { -moz-transform: translate(-50%, -50% ) rotate(25deg)skew(2deg, 12deg) }
    80% { -moz-transform: translate(-50%, -50% ) rotate(36deg) skew(1deg, 1deg) }
    100% { -moz-transform: translate(-50%, -50% ) rotate(1deg) skew(1deg, 1deg) } 
}
@-o-keyframes  skewRotateAnim{ 
    0% { -o-transform: translate(-50%, -50% ) rotate(1deg) skew(1deg, 1deg) }  
    15% { -o-transform: translate(-50%, -50% ) rotate(15deg) skew(3deg, 6deg) }
    35% { -o-transform: translate(-50%, -50% ) rotate(12deg)skew(5deg, 5deg) }
    65% { -o-transform: translate(-50%, -50% ) rotate(25deg)skew(2deg, 12deg) }
    80% { -o-transform: translate(-50%, -50% ) rotate(36deg) skew(1deg, 1deg) }
    100% { -o-transform: translate(-50%, -50% ) rotate(1deg) skew(1deg, 1deg) } 
}