CSS3 Animation

Developer
Khaled Coder
Size
1,864 Kb
Views
8,096
  1. CSS3 Animation Previews
  2. CSS3 Animation HTML Codes
  3. CSS3 Animation CSS Codes

How do I make an css3 animation?

First Simple CSS3 Animation. What is a css3 animation? How do you make a css3 animation? This script and codes were developed by Khaled Coder on 11 January 2023, Wednesday.

CSS3 Animation Previews
IQ Test

CSS3 Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title> CSS3 Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- khaled coder
First Simple CSS3 Animation -->
<html>
<head> <meta charset="utf-8"> <title>khaled coder</title>
</head>
<body>	<div class="center">	<div class="coder"><a href="https://www.facebook.com/khaled.coder" target="_blank">Coder</a></div>	</div>
</body>
</html>
<!--khaled coder-->
</body>
</html>

CSS3 Animation - Script Codes CSS Codes

/* khaled coder
First Simple CSS3 Animation */
body
{	margin: 0px;	padding: 0px;	background-color: #252628;
}
.center
{	position: absolute;	top: 50%;	left: 50%;	transform: translate(-50%,-50%);	cursor: pointer;
}
.coder
{	width: 100px;	height:100px ;	background: #ff6d4a;	border-radius: 50%;	color: #FFF;	text-align: center;	line-height: 100px;	font-family: verdana;	text-transform: uppercase;	animation: animate 3s linear infinite;
}
.coder:hover
{	background: #1A1A1A;
}
.coder a
{	text-decoration: none;	color: #FFF;
}
@keyframes animate
{	0%	{	box-shadow: 0 0 0 0px rgba(255,109,75,.8), 0 0 0 0 rgba(255,109,74,.7);	}	40%	{	box-shadow: 0 0 0 100px rgba(255,109,75,0), 0 0 0 0 rgba(255,109,74,.7);	}	80%	{	box-shadow: 0 0 0 0px rgba(255,109,75,0), 0 0 0 50px rgba(255,109,74,0);	}	100%	{	box-shadow: 0 0 0 0 rgba(255,109,75,0), 0 0 0 50px rgba(255,109,74,0);	}
}
/* khaled coder
First Simple CSS3 Animation */
CSS3 Animation - Script Codes
CSS3 Animation - Script Codes
Home Page Home
Developer Khaled Coder
Username khaledcoder
Uploaded January 11, 2023
Rating 3
Size 1,864 Kb
Views 8,096
Do you need developer help for CSS3 Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Khaled Coder (khaledcoder) Script Codes
Name
Login Form
Sultan khaled coder
Sultan Khaled Restaurant
Sultan Khaled
Calender
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!