Hi,
I would like to animate the text and image in the following order:
1# Hi, I’m Monika!
2# Self-taught Front-End Developer
3# Image should appear
4# HTML | CSS | JavaScript | Bootstrap | React | Node.JS | Express | MongoDB should appear
On start, I do not want to display anything. When the page loads the elements mentioned above should appear in the given order. Do you know how to achieve this?
REACT COMPONENT
import React from 'react'
import './Styles.css'
import startImg from '../images/womanDev.svg';
import {Container, Col, Row} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
function StartPage()
{
return(
<>
<Container fluid className="start_page">
<Row>
<Col>
<header>
<div class="loading">
<div class="loading__letter style_h1">I</div>
<div class="loading__letter style_h1">'</div>
<div class="loading__letter style_h1">m</div>
<div class="loading__letter style_h1"></div>
<div class="loading__letter style_h1">M</div>
<div class="loading__letter style_h1">o</div>
<div class="loading__letter style_h1">n</div>
<div class="loading__letter style_h1">i</div>
<div class="loading__letter style_h1">k</div>
<div class="loading__letter style_h1">a</div>
</div>
<h2 className="style_h2">Self-taught Front-End Developer</h2>
<img className="womanDev" src={startImg} alt="womanImage" />
<p className="start_paragraph">HTML | CSS | JavaScript | Bootstrap | React | Node.JS | Express | MongoDB </p>
</header>
</Col>
</Row>
</Container>
</>
)
}
export default StartPage
CSS
/* START PAGE STYLE SET UP */
.start_page{
display: flex;
justify-content: center;
align-items: center;
height: 120vh;
}
.style_h1{
font-size: 80px;
letter-spacing: 3px;
text-align: center;
color: #6666ff;
text-shadow: 2px 2px 2px #b3b3ff;
margin:30px;
}
.style_h2{
font-size: 50px;
color: #b3b3ff;
letter-spacing: 2px;
text-shadow: 2px 2px 2px #6666ff;
margin-bottom: 10px;
text-align: center;
font-size: 60px;
animation-name: appear;
animation-duration: 2s;
animation-iteration-count: 1;
animation-delay: 2s;
}
.womanDev{
width: 760px;
animation-name: appear;
animation-duration: 2s;
animation-iteration-count: 1;
animation-delay: 2.5s;
}
.start_paragraph{
display: block;
color: #4d4d4d;
margin-top: 10px;
margin-bottom: 10px;
}
/* image animation - womanDev */
@keyframes appear{
0%{
opacity: 0;
}
20%{
opacity: 0.2;
}
40%{
opacity: 0.4;
}
60%{
opacity: 0.6;
}
80%{
opacity: 0.8;
}
100%{
opacity: 1;
}
}
/* text animation */
/* h1 animation */
@keyframes bounce {
0% {
transform: translateY(0px);
}
40% {
transform: translateY(-40px);
}
80%,
100% {
transform: translateY(0px);
}
}
.loading {
display: flex;
flex-direction: row;
}
.loading__letter {
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: 1;
}
.loading__letter:nth-child(2) {
animation-delay: 0.1s;
}
.loading__letter:nth-child(3) {
animation-delay: 0.2s;
}
.loading__letter:nth-child(4) {
animation-delay: 0.3s;
}
.loading__letter:nth-child(5) {
animation-delay: 0.4s;
}
.loading__letter:nth-child(6) {
animation-delay: 0.5s;
}
.loading__letter:nth-child(7) {
animation-delay: 0.6s;
}
.loading__letter:nth-child(8) {
animation-delay: 0.8s;
}
.loading__letter:nth-child(9) {
animation-delay: 1s;
}
.loading__letter:nth-child(10) {
animation-delay: 1.2s;
}
.loading__letter:nth-child(11) {
animation-delay: 1.4s;
}
.loading__letter:nth-child(12) {
animation-delay: 1.6s;
}
.loading__letter:nth-child(14) {
animation-delay: 1.8s;
}
FINAL RESULT
