Why my CSS animation does not work in way i want

Question

Hello i am making my very first website. I would like to make an animation there. And i have made it. But the problem is, animation does not go from left to right but it stays in one place and just go from opacity 0 to opacity 1. It looks like the parent prevents header-main from executing animation. Could you help me?

* {
    padding: 0;
    margin: 0;
}

html{
  box-sizing: inherit;
  font-size: 62.5%;
}

body {
  font-size: 1.5rem;
  line-height: 1.7;
  padding: 3rem;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
  background-image: radial-gradient(#d8d6d6 20%, transparent 20%),
  radial-gradient(#fafafa 20%, transparent 20%);
  background-color: #f8f2f2;
  background-position: 0 0, 20px 20px;
  background-size: 10px 10px;
  height: 200px;
  width: 100%;
}

.header {
    height: 95vh;
    background-image: linear-gradient(to right bottom, rgba(23, 1, 104, 0.856), rgba(3, 25, 124, 0.822)),
    url(img\\finance.jpg);
    background-size: cover;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
    text-align: center;
}

.name{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
}

.header-main{
   color: white;
   font-size: 6.5rem;
   letter-spacing: 1.5rem;
   animation: moveInLeft 3s ease-out;
}

.header-sub{
    color: white;
    display: block;
    font-size: 2.5rem;
    letter-spacing: 0.8rem;
    line-height: 2.2;
 }


 @keyframes moveInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-6rem);
            transform: translateX(-6rem);
  }
  80% {
    -webkit-transform: translateX(0.6rem);
            transform: translateX(0.6rem);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Personal Website</title>
        <link rel = "stylesheet" href="style.css">
        <link rel ="shortcut icon" type = "image/png" href="img/letter-m.png">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
    </head>
    <body>
        <header class = "header">
            <div class = "name">
            <h1><span class = "header-main">*My Name*</span> 
                <span class = "header-sub">*My occupation*</span>
            </h1>
            </div>
        </header>
    </body>
</html>

Please [edit] your question to add the HTML so the question contains a [mre]. — 0stone0, Jun 03 '21 at 16:10

score 1 · Answer 1 · answered Jun 03 '21 at 16:26

1

I have done it by myself. You need to put display: block; in header-main. :)

answered Jun 03 '21 at 16:26

score 0 · Answer 2 · answered Jun 03 '21 at 16:38

* {
    padding: 0;
    margin: 0;
}

html{
  box-sizing: inherit;
  font-size: 62.5%;
}

body {
  font-size: 1.5rem;
  line-height: 1.7;
  padding: 3rem;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
  background-image: radial-gradient(#d8d6d6 20%, transparent 20%),
  radial-gradient(#fafafa 20%, transparent 20%);
  background-color: #f8f2f2;
  background-position: 0 0, 20px 20px;
  background-size: 10px 10px;
  height: 200px;
  width: 100%;
}

.header {
    height: 95vh;
    background-image: linear-gradient(to right bottom, rgba(23, 1, 104, 0.856), rgba(3, 25, 124, 0.822)),
    url(img\\finance.jpg);
    background-size: cover;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
    text-align: center;
}

.name{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
}

.header-main{
   color: white;
   font-size: 6.5rem;
   letter-spacing: 1.5rem;
   animation: moveInLeft 3s ease-out;
   display:inline-block;
}

.header-sub{
    color: white;
    display: block;
    font-size: 2.5rem;
    letter-spacing: 0.8rem;
    line-height: 2.2;
 }


 @keyframes moveInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-6rem);
            transform: translateX(-6rem);
  }
  80% {
    -webkit-transform: translateX(0.6rem);
            transform: translateX(0.6rem);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Personal Website</title>
        <link rel = "stylesheet" href="style.css">
        <link rel ="shortcut icon" type = "image/png" href="img/letter-m.png">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
    </head>
    <body>
        <header class = "header">
            <div class = "name">
            <h1><span class = "header-main">*My Name*</span> 
                <span class = "header-sub">*My occupation*</span>
            </h1>
            </div>
        </header>
    </body>
</html>

Why my CSS animation does not work in way i want

2 Answers2