Can I apply align-self on transition?

Can I apply align-self on transition??

As you can see, When I hover to .wrap

div:nth-of-type(2) {
    align-self: flex-start;

}

 div:nth-of-type(4) {
        align-self: flex-end;
   }

will change to align-self: flex-center;

I have tried to do transition: All 2s on .wrap div:nth-of-type(2) & .wrap div:nth-of-type(4) but it's not working. I hope to make a slow animation but it seems not working. I have read a post that said Flexbox align-self property not transitioning?. So I can't apply align-self on transition?

.wrap {
  height: 300px;
  width: 600px;
  margin: 0 auto;
}
.wrap div {
  height: 100px;
  width: 100px;
  border: 3px solid black;
  background-color: pink;
  transition: align-self 9s;
}
.wrap div:nth-of-type(2) {
  align-self: flex-start;
}
.wrap div:nth-of-type(4) {
  align-self: flex-end;
}

.wrap:hover div {
  align-self: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <title>A Great Demo on CodePen</title>
</head>
<body>
 <div class="wrap d-flex align-items-center justify-content-md-center">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
 </div>
  
  
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>

Solution

consider margin intead since you are using fixed height:

.wrap {
  height: 300px;
  width: 600px;
  margin: 0 auto;
}
.wrap div {
  height: 100px;
  width: 100px;
  border: 3px solid black;
  background-color: pink;
  transition: margin 1s;
}
.wrap div:nth-of-type(2) {
  margin-bottom:200px
}
.wrap div:nth-of-type(4) {
  margin-top:200px
}

.wrap:hover div {
  margin: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <title>A Great Demo on CodePen</title>
</head>
<body>
 <div class="wrap d-flex align-items-center justify-content-md-center">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
 </div>
  
  
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>