home.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nav</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>
<nav>
<ul>
<li id="home"><a href="home.html">Home</a></li>
<li id="animation"><a href="animation.html">Animation</a></li>
<li id="transition"><a href="transition.html">Transition</a></li>
<li id="translation"><a href="translation.html">Translation</a></li>
</ul>
</nav>
</header>
<section><div class="home"><h2>CSS HOME Page</h2></div></section>
</div>
</body>
</html>
animation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nav</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header><nav>
<ul>
<li id="home"><a href="home.html">Home</a></li>
<li id="animation"><a href="animation.html">Animation</a></li>
<li id="transition"><a href="transition.html">Transition</a></li>
<li id="translation"><a href="translation.html">Translation</a></li>
</ul>
</nav>
</header>
<section>
<div class="animation">
<div id="f1"></div><div id="f2"></div>
<div id="f3"></div><div id="f4"></div>
</div>
</section>
</div>
</body>
</html>
transition.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nav</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container"><header><nav><ul>
<li id="home"><a href="home.html">Home</a></li>
<li id="animation"><a href="animation.html">Animation</a></li>
<li id="transition"><a href="transition.html">Transition</a></li>
<li id="translation"><a href="translation.html">Translation</a></li>
</ul></nav>
</header>
<section><div class="transition">
<div id="f5"></div><div id="f6"></div>
<div id="f7"></div><div id="f8"></div></div>
</section></div>
</body>
</html>
style.css
* {margin: 0;padding: 0;font-family: sans-serif;box-sizing: border-box;}
body {height: 100vh;width: 100vw;}
nav {
display: flex; align-items: center; justify-content: center;
height: 60px; background: lightblue;}
ul {display: flex; gap: 20px;}
li {list-style-type: none;}
h2 {font-size: 28px; font-weight: bold; color: lightseagreen;}
a { text-decoration: none; color: black; font-size: 20px;}
section {display: flex; justify-content: center; margin-top: 60px;}
.animation {padding: 30px;display: flex;gap: 30px;}
#f1,#f2,#f3,#f4 {
height: 200px; width: 200px;background: white; border-radius: 30px; border: 2px solid white);}
#f1 {animation-name: example 1s infinite;}
@keyframes example {
0% {background-color: red;}25% {background-color: yellow;}
50% {background-color: blue;}100% {background-color: green;}}
#f2 { animation: rotate 2s infinite forwards;}
@keyframes rotate {
0% {rotate: 90deg;background: red;}
100% {rotate: 360deg;background: yellow;}}
#f3 { animation: zoom 2s infinite alternate;}
@keyframes zoom {
0% {transform: scaleX(.5) scaleY(.5);}
100% {transform: scaleX(1) scaleY(1);}}
#f4 {animation: move 2s 2s infinite alternate;}
@keyframes move {
0% {transform: translateX(1px);}
100% {transform: translateX(-700px);}}
.transition {padding: 30px;display: flex;gap: 30px;}
#f5,#f6,#f7,#f8 {
height: 200px;width: 200px;border: 2px solid black;
background: #000;border-radius: 30px;transition: all .8s ease;}
#f5 {background: blue;}
#f6 {background: rgb(55, 155, 236);}
#f7 {background: rgb(232, 97, 13);}
#f8 {background: rgb(212, 255, 0);}
