CSS Menu Item Transition and Image Animation

What is a css menu item transition and image animation How do you make a css menu item transition and image animation? This script and codes were developed by James Zedd on 15 December 2021, Wednesday.

How do I make an css menu item transition and image animation?
  1. CSS Menu Item Transition and Image Animation Previews
  2. CSS Menu Item Transition and Image Animation HTML Codes
  3. CSS Menu Item Transition and Image Animation CSS Codes
CSS Menu Item Transition and Image Animation Previews

CSS Menu Item Transition and Image Animation HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>CSS Menu Item Transition and Image Animation</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="container">
  <nav>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Why Hire Us?</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <header>
    <h1>Cloud Connected</h1>
  </header>
  <div class="cloud-box">
    <img src="http://jameszedd.com/demos/reflexology/img/c1.png" alt="" class="cloud1" />
    <img src="http://jameszedd.com/demos/reflexology/img/c1.png" alt="" class="cloud2" />
    <img src="http://jameszedd.com/demos/reflexology/img/c1.png" alt="" class="cloud3" />
    <img src="http://jameszedd.com/demos/reflexology/img/c1.png" alt="" class="cloud4" />
  </div>
</div>
  
  
</body>
</html>

CSS Menu Item Transition and Image Animation CSS Codes

body {
  margin: 0;
}

.container {
  text-align: center;
}

.menu {
  list-style: none;
  padding: 0;
}

.menu li {
  display: inline-block;
  font-family: 'Lato', arial, sans-serif;
  font-size: 18px;
  padding: 0 10px;
}

.menu li a {
  text-decoration: none;
  color: #101010;
}

.menu li a:after {
  content: "";
  display: block;
  width: 0;
  border-bottom: 2px solid #101010;
  transition: all 300ms ease-in-out;
}

.menu li a:hover:after {
  width: 100%;
}

header h1 {
  font-family: 'Lato', arial, sans-serif;
  font-size: 54px;
  font-weight: 900;
  color: #101010;
  margin: 15px 0;
  text-transform: uppercase;
}

.cloud-box {
  max-width: 100%;
  height: 300px;
  margin: 0 auto;
  background-color: #ADD8E6;
  position: relative;
}

.cloud1 {
  position: absolute;
  top: 12px;
  left: -50%;
  width: 100px;
  animation: c1ani 70s linear 1s infinite alternate;
}

.cloud2 {
  position: absolute;
  top: 30px;
  left: -20%;
  width: 220px;
  animation: c2ani 85s linear 5s infinite alternate;
}

.cloud3 {
  position: absolute;
  top: 50px;
  left: -20%;
  animation: c3ani 85s linear 12s infinite alternate;
}

.cloud4 {
  position: absolute;
  bottom: 40px;
  left: -20%;
  width: 100px;
  animation: c4ani 80s linear 1s infinite alternate;
}

@keyframes c1ani {
  from {left:-50%;}
  to {left: 94%;}
}

@keyframes c2ani {
  0%{top:30px; left:-20%;}
  10%{top:60px; left:0%;}
  20%{top:40px; left:10%;}
  30%{top:50px; left:20%;}
  40%{top:30px; left:30%;}
  50%{top:60px; left:40%;}
  60%{top:50px; left:50%;}
  70%{top:20px; left:60%;}
  80%{top:40px; left:70%;}
  90%{top:70px; left:80%;}
  100%{top:50px; left:84%;}
}

@keyframes c3ani {
  0%{top:50px; left:-20%;}
  10%{top:70px; left:-10%;}
  20%{top:90px; left:0%;}
  30%{top:80px; left:10%;}
  40%{top:110px; left:21%;}
  50%{top:90px; left:31%;}
  60%{top:60px; left:42%;}
  70%{top:40px; left:52%;}
  80%{top:80px; left:63%;}
  90%{top:110px; left:74%;}
  100%{top:90px; left:85%;}
}

@keyframes c4ani {
  from {left:-20%;}
  to {left: 94%;}
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.