Add new features in CSS to animate movement

css/style.css

@@ -8,6 +8,7 @@
 /*-----------------------Icon CSS high-resolution-------------------------------------*/
 
 /*-----------------------Character CSS high-resolution--------------------------------*/
+
 h1 {
     font-family: headersFont;
     font-size: 100px;
@@ -234,6 +235,15 @@ html {
     height: 2rem;
     border-radius: 0.4rem 0.4rem;
     background-color: #e31e5e;
+    transform: rotate(0deg);
+}
+@keyframes animation-move-left{
+    0%{
+        transform: rotate(30deg);
+    }
+    100%{
+        transform: rotate(0deg);
+    }
 }
 
 #char-pants-right {

js/script.js

@@ -5,7 +5,9 @@ $(document).ready(function() {
             $("#char-container").css({
                 'left': '-=2rem',
             })
-        }
+            $("#char-pants-left").animate({
+                //zmienic klase na 
+            })
         if(e.which == 38){
             $("#char-container").css({
                 'top': '-=2rem',
@@ -15,6 +17,8 @@ $(document).ready(function() {
             $("#char-container").css({
                 'left': '+=2rem',
             })
+            $("#char-pants-right").css({
+            })
         }
         if(e.which == 40){
             $("#char-container").css({