CSS Animation Examples With Source Code | Animated Border Card

Last Updated: 2025-08-05 12:45:41

If you’re looking for a CSS tutorial for beginners that’s fun, creative, and easy to follow, this guide is for you. In this HTML CSS tutorial for beginners, we’ll build a responsive profile card HTML CSS design with an animated border effect. You’ll see how Animations With CSS can completely transform a simple card into a stylish user profile page template HTML CSS.

This example is one of the best simple CSS animation examples because it uses smooth movement, blur effects, and shadows to create a clean, modern look. You can download the complete source code from here and customize it for your own projects.

Source Code Explanation

The magic happens with the .blue-border element. Using CSS animation code and @keyframes, we move a blurred blue circle around the card, creating a glowing animated border effect. The transform property combined with percentage-based movement gives a continuous loop.

The .bg element adds a semi-transparent background with backdrop-filter: blur() for a glassy effect. Together, these make the CSS animated border profile cards stand out.

 

.blue-border {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background-color: #0077ff;
	opacity: 1;
	filter: blur(12px);
	animation: blue-border-bounce
		5s infinite ease;
}

@keyframes blue-border-bounce {
	0% {
		transform: translate(-100%, -100%)
			translate3d(0, 0, 0);
	}
	25% {
		transform: translate(-100%, -100%)
			translate3d(100%, 0, 0);
	}
	50% {
		transform: translate(-100%, -100%)
			translate3d(100%, 100%, 0);
	}
	75% {
		transform: translate(-100%, -100%)
			translate3d(0, 100%, 0);
	}
	100% {
		transform: translate(-100%, -100%)
			translate3d(0, 0, 0);
	}
}

 

 

My Suggestions

• To create this CSS examples with source code style effect:
• Keep your HTML simple with a single .card container.
• Use position: absolute; for moving elements inside the card.
• Apply @keyframes for smooth animated movement.
• Add blur and shadow for a modern UI look.
• Watch the video tutorial for a better understanding and step-by-step guidance.

With this approach, you’ll be able to build Free CSS examples with source code and even free HTML website templates with source code for your own web design projects.