Reavl Text Animation

HTML _CSS

Reavl Text Animation

HiroDaegu 2022. 6. 13. 00:18

728x90

SMALL

<!DOCTYPE html>
<html lang="ko">
<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>TEXT REVEAL ANIMATION</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 class="title" style="--duration: 1s">
    <span style="--delay: .5s">You're</span>
    <span style="--delay: .8s">Awesome!</span>
  </h1>
</body>
</html>

* {
  background-color: #333;
}

h1 {
  width: 30%;
  margin: 25% 0;
}

.title span {
  --total: calc(var(--duration) + var(--delay));
  position: relative;
  display: block;
  color: transparent;
  overflow: hidden;
  animation: revealText 1s var(--total) forwards;
}

.title span::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background-color: #BB93FC;
  animation: rollIn var(--duration) var(--delay) forwards, rollOut var(--duration) var(--total) forwards;
}

.title span:nth-child(2)::after {
  border-top: 3px solid #896AB9;
}

@keyframes revealText {
  to {
    color: #FFF;
  }
}

@keyframes rollIn {
  from {
    transform: scaleX(0);
  } 
  to {
    transform: scaleX(1);
  }
}

@keyframes rollOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(105%);
  }
}

728x90

LIST