[SOLVED] How to keep text in middle of page while pulsing

How to keep text in middle of page while pulsing

I am trying to have the text only pulse in the center of the page I do not want it ever at the top

I have played around with the scale

CSS......
.Lum{
  font-family: Edwardian Script ITC;
 position: fixed;
  top: 50%;
  left: 50%;
  font-size: 50px;
  text-align: center;
  transform: translate(-50%, -50%);
  margin: 0;
  letter-spacing: 1px;}
@keyframes pulse {
  0% {transform: scale(1);}
  50% {transform: scale(1.1);}
  100% {transform: scale(1);}
}
.pulse {
  animation-name: pulse;
  animation-duration: 2s;
}
HTML..............
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">

    <title>Lumiere</title>
  </head>
  <body class="pulse">
    <h3 class="Lum">Lumiere</h3>
  </body>
</html>

I want the text always in the middle of the page never at the top

Solution

What you should do to fix the animation on current approach:

.Lum{
  font-family: Edwardian Script ITC;
 position: fixed;
  top: 50%;
  left: 50%;
  font-size: 50px;
  text-align: center;
  transform: translate(-50%, -50%);
  margin: 0;
  letter-spacing: 1px;}
@keyframes pulse {
  /* Since you're using translate, you shouldn't overwrite it with only scale, just combine them */
  0% {transform: translate(-50%, -50%) scale(1);}
  50% {transform: translate(-50%, -50%) scale(1.1);}
  100% {transform: translate(-50%, -50%) scale(1);}
}

.pulse {
  animation-name: pulse;
  animation-duration: 2s;
  /* If you want the animation keeps going */
  animation-iteration-count: infinite;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">

    <title>Lumiere</title>
  </head>
  <body>
    <!-- You need to put pulse on the element, not the whole page -->
    <h3 class="Lum pulse">Lumiere</h3>
  </body>
</html>

Since you're using the transform for animation, maybe translate approach for centering is not very ideal. Maybe try this approach instead:

body {
  /* Make the container flexbox */
  display: flex;
  /* Center its children */
  justify-content: center;
  align-items: center;
  /* set the width and height as big as the window */
  width: 100vw;
  height: 100vh;
  
  padding: 0;
  margin: 0;
}

.Lum{
  font-family: Edwardian Script ITC;
  font-size: 50px;
  text-align: center;
  margin: 0;
  letter-spacing: 1px;
}

@keyframes pulse {
  0% {transform: scale(1);}
  50% {transform: scale(1.1);}
  100% {transform: scale(1);}
}

.pulse {
  animation-name: pulse;
  animation-duration: 2s;
  /* If you want the animation keeps going */
  animation-iteration-count: infinite;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title>Lumiere</title>
  </head>
  <body>
    <h3 class="Lum pulse">Lumiere</h3>
  </body>
</html>