CODEWITHSUNDEEP
htmlcsscss-animations
SK1dev
SK1dev

Reputation: 1139

h1 doesn't slide into page smoothly

I'm animating two headers to slide into the page from the opposite sides however the second header (job role) doesn't slide in smoothly (it slides in with some of the words on another line and slowly becomes one line). Here's a CodePen which will convey my issue more clearly. How can I fix this?

.skewedBox {
    background: #edff57;
    padding: 115px 0;
    transform: skew(20, 0, 0, 40deg) translateY(-120px);
}
.container {
    padding: 150px 200px;
    transform: skew(0deg, 10deg);
    font-family: arial;
} 
.name {
    margin-top: 90px;
    animation-name: slideInLeft;
    animation-duration: 4s;
    font-size: 3em;
}
@keyframes slideInLeft {
    0% {margin-left: -1600px;}
    100% {margin-left: 0px;}
}
.role {
    color: black;
    animation-name: slideInRight;
    animation-duration: 4s;
    font-size: 3em;
}
@keyframes slideInRight {
    0% {margin-left: 1600px;}
    100% {margin-left: 0px;}
}
<div id="wrapper">
    <section class="skewedBox">
        <div className="container">
            <h1 class="name">Hi, I'm ...</h1>
            <h1 class="role">A {This is a job role}. </h1>
        </div>
    </section>
</div>

Upvotes: 1

Views: 47

Answers (1)

hityagi
hityagi

Reputation: 5256

Try white-space: nowrap; for your content.

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

.skewedBox {
  background: #edff57;
  /*padding: 115px 0;*/
  transform: skew(20, 0, 0, 40deg) translateY(-120px);
}
.container {
  padding: 150px 200px;
    transform: skew(0deg, 10deg);
  font-family: arial;
}

.name {
    margin-top: 90px;
  animation-name: slideInLeft;
  animation-duration: 3s;
  font-size: 3em;
  white-space: nowrap;
}
@keyframes slideInLeft {
  0% {margin-left: -1600px;}
  100% {margin-left: 0px;}
}

.role {
  color: black;
  animation-name: slideInRight;
  animation-duration: 3s;
  font-size: 3em;
  white-space: nowrap;
}
@keyframes slideInRight {
  0% {margin-left: 1600px;}
  100% {margin-left: 0px;}
}
<html>
<head>
</head>
<body>
  <div id="wrapper">
    <section class="skewedBox">
    <div className="container">
<h1 class="name">Hi, I'm {My Long name here}</h1>
<h1 class="role">A {This is a job role}. </h1>
</div>
</section>
    </div>
    </body>
    </html>

Upvotes: 2

Related Questions