How to make a multi-step simple animation in CSS?

user_9585135 0
Viewed 3535

I want to implement the following animation using CSS in the center of the screen:

  1. the text "Hello" fades in
  2. the text "Hello" fades out
  3. the small circle appears and changes to the bigger rectangle

I implemented the 3rd step as follows:

.step3 {
  height: 250px;
  width: 250px;
  margin: 0 auto;
  background-color: blue;
  animation-name: stretch;
  animation-duration: 10s;
  animation-timing-function: ease-out;
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: 1;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes stretch {
  0% {
    transform: scale(.3);
    border-radius: 100%;
  }
  100% {
    transform: scale(1.5);
  }
}
<div class="step3"></div>

I was reading about animate.css that can be used to fade in and out the text:

<div class="animated fadeIn 1">Hello</div>

But how can I fade this text out sequentially? And how can I put all 3 steps into a sequence?

animate.css keyframe css-animations css html
2 Answers

you need to read about two properties here 1. animation delay 2. animation fill mode

animation delay will cause animation to start after some time, so basically you can start second animation after 1st one ends

animation fill mode you can read here https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

div {
  position: absolute;
  
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items:center;
  justify-content: center;
}

.text{
  font-size: 3em;
  /*animation: showfade 4s linear 2s both;*/
  animation-name: showfade;
  animation-duration: 4s;
  animation-delay: .4s;
  animation-fill-mode: both;
  
}

.rect {
  
  background-color: #07f;
  width: 200px;
  height: 200px;
  /*animation: rect 2s  linear 6s both;*/
  animation-name: rect;
  animation-duration: 2s;
  animation-delay: 4.4s;
  animation-fill-mode: both;
}


@keyframes showfade {
  0%, 100% {
    opacity: 0;
    
  }
  
  50% {
    opacity: 100;
  }
}

@keyframes rect {
  from {
    transform: scale(0);
    border-radius: 100%;
  }
}
<div class="text">Hello</div>
<div class="rect"></div>

user_52460580

You can do something like this, if I understand you correctly:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  height: 100vh;
}

.step3 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 250px;
  width: 250px;
  border-radius: 50%;
  animation: stretch 10s 3s ease-out forwards;
}

.step3 > span {
  opacity: 0;
  animation: fadeInOut 3s;
}

@keyframes stretch {
  0%, 100% {transform: scale(.3); background: blue}
  100% {
    transform: scale(1.5);
    border-radius: 0;
  }
}

@keyframes fadeInOut {
  50% {opacity: 1}
  100% {opacity: 0}
}
<div class="step3"><span>Hello</span></div>

user_28516320
Related