Playing with transition timing

Working and expirementing with transition-delays and skews :) What is a playing with transition timing How do you make a playing with transition timing? This script and codes were developed by Matt Gross on 01 November 2021, Monday.

How do I make an playing with transition timing?
  1. Playing with transition timing Previews
  2. Playing with transition timing HTML Codes
  3. Playing with transition timing CSS Codes
  4. Playing with transition timing JS Codes
Playing with transition timing Previews

Playing with transition timing HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Playing with transition timing</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <ul class="stuff">
  <li class="line"></li>
  <li class="line"></li>
  <li class="line"></li>
  <li class="line"></li>
</ul>
<p class="note">Click these lines ></p>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

Playing with transition timing CSS Codes

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #eee;
}

.stuff {
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  margin: auto;
  -webkit-transform: skew(-22deg,0);
}

.line {
  background: #333;
  display: inline-block;
  vertical-align: top;
  list-style: none;
  height: 100%;
  width: 8px;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transition: .4s ease;
}

.stuff.active .line {
  height: 400%;
}

.line:nth-of-type(1) { transition-delay: .2s; }
.line:nth-of-type(2) { transition-delay: .3s; }
.line:nth-of-type(3) { transition-delay: .4s; }
.line:nth-of-type(4) { transition-delay: .5s; }

.note {
  position: fixed;
  top: 50%;
  left: 25%;
  color: #ccc;
}

Playing with transition timing JS Codes

$( 'ul.stuff' ).click(function() {
  $(this).toggleClass( "active" );
});
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.