How do I make the animation start and end inside .item1 div rather than on top? - Html

mmirbekian
March 2, 2023
214 views
0 votes
2 Answers

I want the welcome to appear from the left side of the .item1 div and disappear from its right side.
Right now, it starts from the page itself and doesn’t behave like it’s inside a box.
It acts like it’s relative to the root container rather than its own parent box which is class .item1 .

.inAnime {
  background-color: pink;
  color: red;
  padding: 5px;
  position: relative;
  z-index: 0;
}

.inAnime {
  animation-name: rotate;
  animation-duration: 15s;
  animation-direction: normal;
}

@keyframes rotate {
  0% {
    left: -30%;
  }
  100% {
    left: 110%;
  }
}

.item1 {
  grid-area: header;
}

.item2 {
  grid-area: menu;
}

.item3 {
  grid-area: main;
}

.item4 {
  grid-area: right;
}

.item5 {
  grid-area: footer;
}

.grid-container {
  display: grid;
  grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container>div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="viewport" content="width=device-width" />
  <link rel="stylesheet" href="animation.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Grid Test</title>

</head>
<header>
</header>

<body>
  <div class="grid-container">
    <div class="item1">
      <h1 class="inAnime">Welcome !!!</h1>
    </div>
    <div class="item2">Menu</div>
    <div class="item3">Main</div>
    <div class="item4">Right</div>
    <div class="item5">Footer</div>
  </div>
</body>

</html>

Answers

Add overflow: hidden in your .item1 class. Technically, the <h1> is inside the div, it’s just overflowing on the sides. More on overflow.

.inAnime {
  background-color: pink;
  color: red;
  padding: 5px;
  position: relative;
  z-index: 0;
}

.inAnime {
  animation-name: rotate;
  animation-duration: 15s;
  animation-direction: normal;
}

@keyframes rotate {
  0% {
    left: -30%;
  }
  100% {
    left: 110%;
  }
}

.item1 {
  grid-area: header;
  overflow: hidden;
}

.item2 {
  grid-area: menu;
}

.item3 {
  grid-area: main;
}

.item4 {
  grid-area: right;
}

.item5 {
  grid-area: footer;
}

.grid-container {
  display: grid;
  grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container>div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="viewport" content="width=device-width" />
  <link rel="stylesheet" href="animation.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Grid Test</title>

</head>
<header>
</header>

<body>
  <div class="grid-container">
    <div class="item1">
      <h1 class="inAnime">Welcome !!!</h1>
    </div>
    <div class="item2">Menu</div>
    <div class="item3">Main</div>
    <div class="item4">Right</div>
    <div class="item5">Footer</div>
  </div>
</body>

</html>

All you need to do here is set its parent, which is iteam1 to overflow:hidden. This will keep [welcome] text inside of it and you get your expected output.

.inAnime {
  background-color: pink;
  color: red;
  padding: 5px;
  position: relative;
  z-index: 0;
}

.inAnime {
  animation-name: rotate;
  animation-duration: 15s;
  animation-direction: normal;
}

@keyframes rotate {
  0% {
    left: -30%;
  }
  100% {
    left: 110%;
  }
}

.item1 {
  grid-area: header;
  /*To keep (welcome in side item1) you just need to below property*/
  overflow: hidden;
}

.item2 {
  grid-area: menu;
}

.item3 {
  grid-area: main;
}

.item4 {
  grid-area: right;
}

.item5 {
  grid-area: footer;
}

.grid-container {
  display: grid;
  grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container>div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="viewport" content="width=device-width" />
  <link rel="stylesheet" href="animation.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Grid Test</title>

</head>
<header>
</header>

<body>
  <div class="grid-container">
    <div class="item1">
      <h1 class="inAnime">Welcome !!!</h1>
    </div>
    <div class="item2">Menu</div>
    <div class="item3">Main</div>
    <div class="item4">Right</div>
    <div class="item5">Footer</div>
  </div>
</body>

</html>

Please signup or login to give your own answer.

Click here to cancel reply.

How do I make the animation start and end inside .item1 div rather than on top? – Html

Answers