Scribd
Upload
3 views2 pages

Animated HTML and CSS Example

The document is an HTML file that creates a simple animated display of letters forming the word 'bonjour' using styled div elements. Each letter is animated to move up and down with a delay, creating a wave effect. The CSS styles define the appearance and animation behavior of the letters.

Uploaded by

charfeddinenaoufel4028
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views2 pages

Animated HTML and CSS Example

The document is an HTML file that creates a simple animated display of letters forming the word 'bonjour' using styled div elements. Each letter is animated to move up and down with a delay, creating a wave effect. The CSS styles define the appearance and animation behavior of the letters.

Uploaded by

charfeddinenaoufel4028
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="[Link]" />
<title>Document</title>
</head>

<body>
<div class="b">b</div>
<div class="o1">o</div>
<div class="n">n</div>
<div class="j">j</div>
<div class="o2">o</div>
<div class="u">u</div>
<div class="r">r</div>
</body>

</html>

div {
width: 60px;
height: 60px;
background-color: aqua;
border-radius: 50%;
margin-left: 5px;
margin-right: 5px;
text-align: center;
font-size: 50px;
float: left;
animation: anim 2s infinite;
animation-direction: alternate;
}

.b {
animation-delay: 0.5s;
}

.o1 {
animation-delay: 0.75s;
}

.n {
animation-delay: 1s;
}

.j {
animation-delay: 1.25s;
}
.o2 {
animation-delay: 1.5s;
}

.u {
animation-delay: 1.75s;
}

.r {
animation-delay: 2s;
}

@keyframes anim {
0%,
100% {
margin-top: 15px;
}
50% {
margin-top: 100px;
}
}

You might also like