Css3 Animation Is Not Working

Why CSS3 Animation is not working?

You are calling fadein animation in your code but you haven't defined it anywhere.

CSS3 animations are defined with @keyframes rule. More Information about CSS3 animations is Here.

Add following css:

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#hero h5 {  animation: fadein 2s;  -moz-animation: fadein 2s; /* Firefox */  -webkit-animation: fadein 2s; /* Safari and Chrome */  -o-animation: fadein 2s; /* Opera */  font-weight: strong;  font-size: 28px; }
@keyframes fadein {  from {    opacity: 0;  }  to {    opacity: 1;  }}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><section id="hero">  <div class="content">    <div class="container">      <div class="row">        <h5>Lorem Ipsum Demo Title</h5>      </div><!-- row -->    </div> <!-- container -->  </div> <!-- content --></section><!-- section -->

CSS Animation isn't working

Both your elements are using percentage values for the height/width in their animation and these values will be calculated relatively to their container (containing block) which is the body.

By default, the body is a block level element and its width will not depend on its content so percentage width on the animated divs will work fine BUT since the height of the body depend on its content (which is the case of all the elements) percentage height on the animated div won't work and fail to auto.

^{more details here: https://www.w3.org/TR/CSS21/visudet.html}

You have to explicitely specify a height for the body to make the animation working. You can try a fixed height and your element will grow from 0 to this height.

body {
  height:100px;
}
#menuAnim1 {
  height: 8px;
  background: black;
  position: relative;
  top: 50px;
  animation: widthStretch 4s ease-out;
  animation-fill-mode: forwards;
}

#menuAnim2 {
  width: 8px;
  background: black;
  position: relative;
  left: 50px;
  animation: heightStretch 4s ease-out;
  animation-fill-mode: forwards;
}

@keyframes widthStretch {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes heightStretch {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}

<div id='menuAnim1'></div>
<div id='menuAnim2'></div>

Why CSS animation isn't working when i use focus code?

There is nothing wrong with your css. Its just, you can't focus a div normally by pressing Tab key. To tell the browser that the div can be focused, you need to add a tabindex of 0.

Note: Here to make it focusable, I have added a 0. But it can be a positive value also. Non-negative tabindex denotes the order in which the elements should be focused. Negative tabindex is focusable through JS. More on tabindex in mdn

*{
 box-sizing: border-box;
 background-color: teal;
}
        html{
            font-size: 2rem;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden;
        }
 
        .btn{
            background-color: rgb(0, 204, 255);
            color: rgb(247, 247, 247);
           border: none;
           outline: none;
           font-size: 1rem;
           border-radius: 5em;
           padding-left:.5em;
           padding-right: .5em;
           padding-top:.5em;
           padding-bottom: .5em;
           cursor: pointer;           
        }

        .btn:focus {
            animation: kac_git 500ms ease-in-out;
        }
        
        @keyframes kac_git {
            33%{  
              transform: translate(100px,50px) rotate(30deg) scale(.9);
            }
            66%{
                transform: translate(0px,25px) rotate(90deg) scale(.75);
            }
            100%{
                transform: translate(-100px,-75px) rotate(200deg) scale(0);
            }
        }

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="btn" tabindex="0">üzerime gel</div>
</body>
</html>

CSS animation-direction not working as I would have expected

I had a think about this away from my laptop screen and realised that... what was missing from my original set up was one additional static class, describing the presentational state of .square after the .outbound animation has run:

.square.outbounded {
  background-color: blue;
  transform: translateX(200px) scale(0.5);
}

(N.B. There's no need for a corresponding static class, describing the state of .square after the .return animation has run, since the presentational state that class would describe is already described in the initial styles of .square)

Working Example (with .outbounded class added)

const square = document.querySelector('.square');
const buttonOutbound = document.querySelector('button.outboundButton');
const buttonReturn = document.querySelector('button.returnButton');

buttonOutbound.addEventListener('click', () => {

  square.className = 'square outbound';
  
  setTimeout(() => {
    square.classList.add('outbounded');
    square.classList.remove('outbound');
  }, 1000);
  
}, false);

buttonReturn.addEventListener('click', () => {

  square.className = 'square return';
  
  setTimeout(() => {
    square.classList.remove('return');
  }, 1000);
  
}, false);

.square {
  width: 100px;
  height: 100px;
  margin: 12px;
  background-color: red;
  transform: translateX(0) scale(1);
}

.square.outbounded {
  background-color: blue;
  transform: translateX(200px) scale(0.5);
}

.square.outbound {
  animation: animateSquare 1s linear normal forwards;
}

.square.return {
  animation: animateSquare 1s linear reverse forwards;
}

@keyframes animateSquare {
  
  100% {
    background-color: blue;
    transform: translateX(200px) scale(0.5);
  }
}

<div class="square"></div>
<button type="button" class="outboundButton">Outbound animation</button>
<button type="button" class="returnButton">Return animation</button>

Css animation: transition not working in reverse direction

You can do transform: scale(0.8) translateY(-60px); on hover instead of adding animation. I've changed following css and forked your codepen. This is working as you want.

.navmenu ul li a i{
  position: relative;
  -webkit-transition: -webkit-transform 1s;
  transition: transform 1s;
  color: orange;
}
.navmenu ul li a:hover i{
  -webkit-transform: scale(0.8) translateY(-60px);
  transform: scale(0.8) translateY(-60px);
  color: orange;
}

Here is the snippet as well.

body {
  background: black;
}

ul {
  list-style: none;
}

.navmenu {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}

.navmenu ul {
  padding-left: 40px;
  position: relative;
}

.navmenu ul li {
  padding: 15px 0;
}

.navmenu ul li a {
  text-decoration: none;
  position: relative;
  font-size: 1.8rem;
  font-weight: 900;
}

.navmenu ul li a span {
  font-size: 1rem;
  padding-left: 20px;
  color: orange;
  /*   transition: all 0.1s; */
  font-weight: 600;
  display: none;
}

.navmenu ul li a i {
  position: relative;
  -webkit-transition: -webkit-transform 1s;
  transition: transform 1s;
  color: orange;
}

.navmenu ul li a:hover i {
  -webkit-transform: scale(0.8) translateY(-60px);
  transform: scale(0.8) translateY(-60px);
  color: orange;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <nav class="navmenu">
    <ul>
      <li><a href="#home" class=""><i class="fas fa-home"></i><span>Home</span></a></li>
      <li><a href="#projects" class=""><i class="fas fa-laptop-code"></i><span>Projects</span></a></li>
      <li><a href="#skills" class=""><i class="fas fa-code"></i><span>Skills</span></a></li>
      <li><a href="#training" class=""><i class="fas fa-dumbbell"></i><span>Training</span></a></li>
      <li><a href="#education" class=""><i class="fas fa-user-graduate"></i><span>Education</span></a></li>
      <li><a href="#contact_me" class=""><i class="far fa-address-book"></i><span>Contact me</span></a></li>
    </ul>
  </nav>

</body>

CSS Animation does only work in Firefox and Chrome, but not on Apple Devices (Safari?)

Use webkits for your keyframes:

@-webkit-keyframes counter {
   0% { -webkit-counter-increment: count 0;    }
  10% { -webkit-counter-increment: count 8;    }
  20% { -webkit-counter-increment: count 16;   }
  30% { -webkit-counter-increment: count 32;   }
  40% { -webkit-counter-increment: count 64;   }
  50% { -webkit-counter-increment: count 128;  }
  60% { -webkit-counter-increment: count 256;  }
  70% { -webkit-counter-increment: count 512;  }
  80% { -webkit-counter-increment: count 1024; }
  90% { -webkit-counter-increment: count 2048; }
 100% { -webkit-counter-increment: count 4000; }
}

@keyframes counter {
   0% { counter-increment: count 0;    }
  10% { counter-increment: count 8;    }
  20% { counter-increment: count 16;   }
  30% { counter-increment: count 32;   }
  40% { counter-increment: count 64;   }
  50% { counter-increment: count 128;  }
  60% { counter-increment: count 256;  }
  70% { counter-increment: count 512;  }
  80% { counter-increment: count 1024; }
  90% { counter-increment: count 2048; }
 100% { counter-increment: count 4000; }
}

div::after {
  font: 800 40px system-ui;
  content: counter(count);
  animation: counter 5s linear forwards;
  counter-reset: count 0;
}

<div></div>

CSS animation-direction: alternate not working

You need to define animation-iteration-count property with value like number|infinite|initial|inherit
Example: animation-iteration-count: infinite;

Source: https://www.w3schools.com/cssref/css3_pr_animation-iteration-count.asp

.w3-animate-top{
  border : 6px solid red;
  animation-duration : 10s;
  margin-top : 300px;
}

.main{
    height : 100px;
    border : 6px solid white;
    text-align : center;
    background-color : yellow;
    animation-name : example;
    animation-duration: 2s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

@keyframes example {
  from {
    background-color: yellow;
  }
  to {
    background-color: white;}
  }
}

<div class = 'main'>
    My Animation
    <p>Hello Rishi, This is Raeesh</p>
</div>