<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet">
<style>@charset "utf-8";

/*==================================================
スーッ
===================================*/

/*枠線が伸びて出現*/
.line {
  position: relative; /* 枠線が書かれる基点*/
}

/*上下線*/
.line::before,
.line::after {
  position: absolute;
  content: "";
  width: 0;
  height: 1px;
  background: #333; /* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 0;
  background: #333; /* 枠線の色*/
}

/*上線*/
.line::before {
  top: 0;
  left: 0;
  animation: lineAnime 0.5s linear 0s forwards; /*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before {
  top: 0;
  right: 0;
  animation: lineAnime2 0.5s linear 0.5s forwards; /*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.line::after {
  bottom: 0;
  right: 0;
  animation: lineAnime 0.5s linear 1s forwards; /*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after {
  bottom: 0;
  left: 0;
  animation: lineAnime2 0.5s linear 1.5s forwards; /*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes lineAnime2 {
  0% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}

/*枠線内側の要素*/
.line .lineinappear {
  animation: lineInnerAnime 0.5s linear 2s forwards; /*2秒後に中央のエリアが0.5秒かけて表示*/
  opacity: 0; /*初期値を透過0にする*/
}

@keyframes lineInnerAnime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*========= レイアウトのためのCSS ===============*/

body {
  vertical-align: middle;
  text-align: center;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: linear-gradient(
    100.6deg,
    rgba(218, 185, 252, 1) 22%,
    rgba(125, 89, 252, 1) 80%
  );
}

.flex {
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
}

.box {
  width: 200px;
  padding: 20px;
  margin: 20px 20px;
  color: #333;
  box-sizing: border-box;
  white-space: nowrap;

  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(6.5px);
  -webkit-backdrop-filter: blur(6.5px);

  box-shadow: 0px 6px 15px 0px rgba(142, 142, 142, 0.19);
  -webkit-box-shadow: 0px 6px 15px 0px rgba(142, 142, 142, 0.19);

  border: 1px solid rgba(255, 255, 255, 0.4);
}

.line {
  width: 220px;
  padding: 20px;
  margin: 20px;
  box-sizing: border-box;
}</style>
</head>
<body>
<body>
<!--スーッ-->
<div class="box line">
<div class="line2">
<div class="lineinappear">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/webnavi1.png" width="100" />
<br>枠線が伸びて出現</div>
</div>
</div>
<script>
</script>
</body>
</html>
/* 
   外部依存 CSS:
     - https://cdnjs.cloudflare.com/animate.min.css
     - https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
 */

@charset "utf-8";

/*==================================================
スーッ
===================================*/

/*枠線が伸びて出現*/
.line {
  position: relative; /* 枠線が書かれる基点*/
}

/*上下線*/
.line::before,
.line::after {
  position: absolute;
  content: "";
  width: 0;
  height: 1px;
  background: #333; /* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 0;
  background: #333; /* 枠線の色*/
}

/*上線*/
.line::before {
  top: 0;
  left: 0;
  animation: lineAnime 0.5s linear 0s forwards; /*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before {
  top: 0;
  right: 0;
  animation: lineAnime2 0.5s linear 0.5s forwards; /*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.line::after {
  bottom: 0;
  right: 0;
  animation: lineAnime 0.5s linear 1s forwards; /*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after {
  bottom: 0;
  left: 0;
  animation: lineAnime2 0.5s linear 1.5s forwards; /*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes lineAnime2 {
  0% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}

/*枠線内側の要素*/
.line .lineinappear {
  animation: lineInnerAnime 0.5s linear 2s forwards; /*2秒後に中央のエリアが0.5秒かけて表示*/
  opacity: 0; /*初期値を透過0にする*/
}

@keyframes lineInnerAnime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*========= レイアウトのためのCSS ===============*/

body {
  vertical-align: middle;
  text-align: center;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: linear-gradient(
    100.6deg,
    rgba(218, 185, 252, 1) 22%,
    rgba(125, 89, 252, 1) 80%
  );
}

.flex {
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
}

.box {
  width: 200px;
  padding: 20px;
  margin: 20px 20px;
  color: #333;
  box-sizing: border-box;
  white-space: nowrap;

  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(6.5px);
  -webkit-backdrop-filter: blur(6.5px);

  box-shadow: 0px 6px 15px 0px rgba(142, 142, 142, 0.19);
  -webkit-box-shadow: 0px 6px 15px 0px rgba(142, 142, 142, 0.19);

  border: 1px solid rgba(255, 255, 255, 0.4);
}

.line {
  width: 220px;
  padding: 20px;
  margin: 20px;
  box-sizing: border-box;
}
/* 
   外部依存 CSS (このデモは下記の CSS にも依存します):
     - https://cdnjs.cloudflare.com/animate.min.css
     - https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
 */