I need help combining CSS animations

user_13796280 0
Viewed 90

I'm still really new to HTML and CSS so a lot of my code is bad. I need help figuring out how to combine the two animations that I have created. I would like for the first animation (which is currently on the top) to play out completely and then after about 3 seconds the second animation where it scrolls to the left slow would playout and stay hidden afterward.

Here's my code

body {
  font-family: 'Aldrich', sans-serif;
  position: relative;
  line-height: 22px;
  font-size: 18px;
  width: 1200px;
  /* color: ##FFFFFF    ;
  background: #000000; */
  overflow: hidden;
}

.text {
  font-family: 'Aldrich', sans-serif;
  position: relative;
  line-height: 20px;
  font-size: 18px;
  width: 900px;
}

.fadingEffect {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  background: white;
  animation: show 5s ease-in;
  animation-fill-mode: forwards;
  /* animation-delay: 1s; */
}

.item {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  background: white;
  animation-duration: 12s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.item {
  animation-name: anim-1;
}

@keyframes show {
  0% {width:100%}
  100% {width:0%;}
}

@keyframes anim-1 {
  0%,50% { left: 0%; opacity: 1; }
  50%,90% { left: 0%; opacity: 1; }
  90%, 100% { left: -100%; opacity: 0; }
}
<div class="text">
  <link href="https://fonts.googleapis.com/css2?family=Aldrich&display=swap" rel="stylesheet">
  <link href="faded.css" rel="stylesheet" type="text/css">
  <link href="slide.css" rel="stylesheet" type="text/css"> Defeat all of the enemies!
  <p class="item">Defeat all of the enemies!</p>
  <div class="fadingEffect"></div>
</div>

css-animations css-transitions css html
2 Answers

Just like another guy said, you should try it with javascript or jQuery. But if you wanna achieve it with only CSS, animation delay will do so.

Here is a similar sample just give you some ideal.

div.box{
  position: relative;
}
div.first {
  position: absolute;
  left: -200px;
  animation: myfirst 3s 1;
  animation-direction: alternate;
}
div.second {
  position: absolute;
  left: -200px;
  animation: mysecond 3s 1;
  animation-delay: 3s;
  animation-direction: alternate;
}
@keyframes myfirst {
  0%   {left: -200px; top: 0px; opacity: 0;}
  100%  {left: 200px; top: 0px; opacity: 1;}
}
@keyframes mysecond {
  0%   {left: 200px; top: 0px;}
  100%  {left: -200px; top: 0px;}
}
<div class="box">
<div class="first">Defeat all of the enemies!</div>
<div class="second">Defeat all of the enemies!</div>
</div>

user_67691320

I put the text in a <div> to make this work.

This is the main CSS that I added in order to get the animation to work.

white-space: nowrap; (This makes it so that the text doesn't wrap when the div is small.) overflow: hidden; (This hides the text that goes outside the div. So when you expand the width of the div it reveals the text.)

You can play around with the %s and the animation duration to make it faster or slower, depending on what you are looking for.

body {
  font-family: 'Aldrich', sans-serif;
  position: relative;
  line-height: 22px;
  font-size: 18px;
  width: 1200px;
  /* color: ##FFFFFF    ;
  background: #000000; */
  overflow: hidden;
}

.text {
  font-family: 'Aldrich', sans-serif;
  position: relative;
  line-height: 20px;
  font-size: 18px;
  width: 900px;
}

.item {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  color: black;
  white-space: nowrap;
  overflow: hidden; 
  width: 100%;
  height: auto;
  animation: show 10s ease-in;
  animation-fill-mode: forwards;
}

@keyframes show {
  0% {width:0%; left: 0%}
  30% {width:100%;}
  55% { left: 0%; opacity: 1; }
  100% { left: -100%; opacity: 0; }
}
<div class="text">
  <link href="https://fonts.googleapis.com/css2?family=Aldrich&display=swap" rel="stylesheet">
  <link href="faded.css" rel="stylesheet" type="text/css">
  <link href="slide.css" rel="stylesheet" type="text/css">
  <div class="item"><p>Defeat all of the enemies!</p></div>
</div>

user_138000430
Related