Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a TICK TOCK animation. To build this animation, we need HTML and CSS. We don’t use any images, icons or external libraries to create this animation. We make this animation using Pure CSS.
These kinds of tutorials are not much used in real word projects. But these are fun ways to learn, experiment and explore new CSS properties.
This is a beginner-friendly CSS animation project. If you are looking for more tutorials to improve your CSS skills you can check this playlist here. This playlist here consists of a bunch of CSS animation tutorials that will help you improve your CSS skills.
Video Tutorial:
If you are interested to learn by watching a video tutorial, you can check out the video down below. If you like the video, kindly subscribe to my youtube channel, where I post new tutorials every alternate day. Along with tutorials, I also post multiple choice questions based on HTML, CSS and Javascript that will help you with the interviews.
Project Folder Structure:
Before we begin to code, let us take a look at the project folder structure. We create a project folder called – ‘Tick Tock Animation’. Within this folder, we have two files. These files are index.html and style.css. The first file is the HTML document, and the second one is the stylesheet.
HTML:
We start with the HTML code first. The HTML code creates elements that are required to create the layout of the animation. First, copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tick Tock Animation</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="word word-1">
<span>T</span>
<span>CK</span>
</div>
<div class="pendulum"></div>
<div class="word word-2">
<span>T</span>
<span>CK</span>
</div>
</div>
</body>
</html>
CSS:
We style these elements using CSS. We use keyframes to add animations to the elements we have just created using HTML. Now copy the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient(45deg, #4756c6, #ae76f1, #e9b6ed);
}
.container {
font-size: 14px;
width: 35em;
height: 31.25em;
position: relative;
margin: auto;
}
.word {
font-family: "Poppins", sans-serif;
color: #301167;
font-weight: 800;
font-size: 6em;
letter-spacing: 0.3em;
position: absolute;
}
.word-1 {
left: 0.52em;
top: 1em;
}
.word-2 {
top: 3.12em;
right: 0;
}
.word-2 span:last-child {
margin-left: 0.3em;
}
.pendulum {
background-color: #f5de59;
height: 25em;
width: 1.3em;
position: absolute;
left: 11.9em;
top: -2.5em;
box-shadow: 0 0 1.8em rgba(0, 8, 57, 0.2);
transform: rotate(15deg);
transform-origin: top;
animation: swing 2.5s infinite ease-in-out;
}
@keyframes swing {
50% {
transform: rotate(-15deg);
}
}
.pendulum:after {
position: absolute;
content: "";
height: 2.5em;
width: 2.5em;
border: 1.3em solid #f5de59;
border-radius: 50%;
bottom: -4.37em;
left: -2.1em;
}
@media screen and (min-width: 700px) {
.container {
font-size: 20px;
}
}
That’s it for this tutorial. Your ‘Tick Tock’ Animation is now ready. If you face any issues while creating this animation you can download the source code by clicking on the ‘Download Code’ button below. Also If you have any queries, suggestions or feedback comment below.
Happy Coding!
