Animated Moving Element using CSS

byCodingFlicks -December 29, 2023

0

An essential part of making web page elements come to life is CSS animation. These days, one can make visually beautiful website transitions and animations without using JavaScript or plugins. Because of the features that CSS, and its more recent version CSS3, offer, adding dynamic and interactive elements to a website can improve user experience and engagement. Today, we'll use CSS to create a basic animated moving element that moves from left to right as the image changes at the same time. The following video tutorial shows the process of creating a snippet.

Video Tutorial;

Hope you have watched the video tutorial on CSS animations. In fact, CSS animations are such a powerhouse, a tool that allows you to add dynamism and interactivity to your web pages without the need for complex JavaScript. CSS animation is also a gateway to discovering the joys of web design and development. JavaScript uses very complex syntax while CSS syntax is friendly. This visual feedback loop is incredibly rewarding for a beginner when he sees his creations come to life in real time. This increases his desire to experiment and learn more.

You may Also Like:

Animated Moving Element Using HTML and CSS [ Source Code ]:

CSS animation is not only a technical skill but also a playground for creativity. It acts as a catalyst for beginners to learn. Creating this CSS animation example requires creating a CSS file and an HTML file. Then copy the following code and paste it into your files. You can download the code from below download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
    <!-- codingflicks.com -->
<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animated element using css</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

ADD CSS:

body {
	margin: 0;
	overflow: hidden;
	background: #eef2f5;
}
.container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	perspective: 1000px;
}
.box {
	width: 250px;
	height: 250px;
	background-image: url(img/1.jpg);
	background-size: cover;
	background-position: center center;
	border-radius: 50%;
	position: relative;
	animation: moveRotate 5s ease-in-out infinite, imgChange 3s alternate infinite;
	transform-style: preserve-3d;
	border: 20px ridge #fff;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}
@keyframes moveRotate {
	0%, 100% {
		transform: translateX(0) rotateY(0deg) rotateX(0deg);
	}
	25% {
		transform: translateX(200px) rotateY(90deg) rotateX(90deg);
	}
	50% {
		transform: translateX(0) rotateY(180deg) rotateX(180deg);
	}
	75% {
		transform: translateX(-200px) rotateY(270deg) rotateX(270deg);
	}
}
@keyframes imgChange {
	0%, 100% {
		background-image: url(img/1.jpg);
	}
	50% {
		background-image: url(img/2.jpg);
	}
}

Hope you got the code. Our website has many snippets about Landing Page Design, CSS Animation, JavaScript Projects, Bootstrap Projects, etc. Click the Load More button on the homepage to get more codes. Thanks for visiting our website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.