CSS Animation effect

Developer
Elena
Size
5,409 Kb
Views
6,072
  1. CSS Animation effect Previews
  2. CSS Animation effect HTML Codes
  3. CSS Animation effect CSS Codes

How do I make an css animation effect?

What is a css animation effect? How do you make a css animation effect? This script and codes were developed by Elena on 17 December 2022, Saturday.

CSS Animation effect Previews
IQ Test

CSS Animation effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Animation effect</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body {	background: #cddc39;	color: #fff;	font-size: 17px;	line-height: 1.2;	}	.container {	max-width: 720px;	width: 100%;	height: 100%;	margin: 52px auto;	text-align: center;	}	.box i {	font-size: 34px;	}	.box { position: relative; display: inline-block; margin: 3em; padding: 0; color: #fff; font-size: 1.4em; overflow: visible; -webkit-transition: color 0.7s; transition: color 0.7s; cursor: pointer;	}	.box:after {	content: ''; position: absolute; top: 50%; left: 50%; margin: -35px 0 0 -35px; width: 70px; height: 70px; border-radius: 50%; opacity: 0;	}	/* 1. Anim effect*/	.s-1:after { border: 5px solid rgba(255,255,255,.5); margin: -40px 0 0 -40px;	}	.s-1:hover::after {	-webkit-animation: sAnim1 .52s ease-in-out forwards infinite;	animation: sAnim1 .52s ease-in-out forwards infinite;	}	@-webkit-keyframes sAnim1 {	from {	opacity: 1;	-webkit-transform: scale3d(0.25, 0.25, 1);	transform: scale3d(0.25, 0.25, 1);	}	to {	opacity: 0;	-webkit-transform: scale3d(1.5, 1.5, 1);	transform: scale3d(1.5, 1.5, 1);	}	}	@keyframes sAnim1 {	from {	opacity: 1;	-webkit-transform: scale3d(0.25, 0.25, 1);	transform: scale3d(0.25, 0.25, 1);	}	to {	opacity: 0;	-webkit-transform: scale3d(1.5, 1.5, 1);	transform: scale3d(1.5, 1.5, 1);	}	}	/* 2. Anim effect*/	.s-2:after {	background: rgba(255,255,255,.27);	}	.s-2:hover:after {	-webkit-animation: sAnim2 .7s forwards infinite;	animation: sAnim2 .7s forwards infinite;	}	@-webkit-keyframes sAnim2 {	from {	-webkit-transform: scale3d(0.15, 0.15, 1);	transform: scale3d(0.25, 0.25, 1);	}	25%, 50% {	opacity: 1;	}	to {	opacity: 0;	-webkit-transform: scale3d(1.5, 1.5, 1);	transform: scale3d(1.5, 1.5, 1);	}	}	@keyframes sAnim2 {	from {	-webkit-transform: scale3d(0.15, 0.15, 1);	transform: scale3d(0.25, 0.25, 1);	}	25%, 50% {	opacity: 1;	}	to {	opacity: 0;	-webkit-transform: scale3d(1.5, 1.5, 1);	transform: scale3d(1.5, 1.5, 1);	}	}	/* 3. Anim effect*/	.s-3:after {	box-shadow: inset 0 0 0 35px rgba(255,255,255,0);	}	.s-3:hover:after {	-webkit-animation: sAnim3 .72s ease-out forwards infinite;	animation: sAnim3 .72s ease-out forwards infinite;	}	@-webkit-keyframes sAnim3 {	0% {	opacity: 1;	-webkit-transform: scale3d(0.15, 0.15, 1);	transform: scale3d(0.15, 0.15, 1);	}	80% {	box-shadow: inset 0 0 0 2px rgba(255,255,255,.75);	opacity: 0.1;	}	100% {	box-shadow: inset 0 0 0 2px rgba(255,255,255,.75);	opacity: 0;	-webkit-transform: scale3d(1.5, 1.5, 1);	transform: scale3d(1.5, 1.5, 1);	}	}	@keyframes sAnim3 {	0% {	opacity: 1;	-webkit-transform: scale3d(0.15, 0.15, 1);	transform: scale3d(0.15, 0.15, 1);	}	80% {	box-shadow: inset 0 0 0 2px rgba(255,255,255,.75);	opacity: 0.1;	}	100% {	box-shadow: inset 0 0 0 2px rgba(255,255,255,.75);	opacity: 0;	-webkit-transform: scale3d(1.5, 1.5, 1);	transform: scale3d(1.5, 1.5, 1);	}	}	/* 4. Anim effect*/	.s-4::before {	position: absolute;	top: 50%;	left: 50%;	margin: -35px 0 0 -35px;	width: 70px;	height: 70px;	border-radius: 50%;	content: '';	opacity: 0;	pointer-events: none;	}	.s-4::before,	.s-4::after {	box-shadow: 0 0 0 2px rgba(255,255,255,.5);	}	.s-4:hover:before {	-webkit-animation: sAnim4 .72s forwards infinite;	animation: sAnim4 .72s forwards infinite;	}	.s-4:hover:after {	-webkit-animation: sAnim42 .72s forwards infinite;	animation: sAnim42 .72s forwards infinite;	}	@-webkit-keyframes sAnim4 {	from {	opacity: 1;	-webkit-transform: scale3d(0.15, 0.15, 1);	transform: scale3d(0.15, 0.15, 1);	}	to {	opacity: 0;	-webkit-transform: scale3d(1.35, 1.35, 1);	transform: scale3d(1.35, 1.35, 1);	}	}	@keyframes sAnim4 {	from {	opacity: 1;	-webkit-transform: scale3d(0.15, 0.15, 1);	transform: scale3d(0.15, 0.15, 1);	}	to {	opacity: 0;	-webkit-transform: scale3d(1.35, 1.35, 1);	transform: scale3d(1.35, 1.35, 1);	}	}	@-webkit-keyframes sAnim42 {	0% {	opacity: 1;	-webkit-transform: scale3d(0.15, 0.15, 1);	transform: scale3d(0.15, 0.15, 1);	}	50%, 100% {	opacity: 0;	-webkit-transform: scale3d(1.5, 1.5, 1);	transform: scale3d(1.5, 1.5, 1);	}	}	@keyframes sAnim42 {	0% {	opacity: 1;	-webkit-transform: scale3d(0.15, 0.15, 1);	transform: scale3d(0.15, 0.15, 1);	}	50%, 100% {	opacity: 0;	-webkit-transform: scale3d(1.5, 1.5, 1);	transform: scale3d(1.5, 1.5, 1);	}	}	/* 5. Anim effect*/	.s-5::before {	position: absolute;	top: 50%;	left: 50%;	margin: -25px 0 0 -25px;	width: 50px;	height: 50px;	border-radius: 50%;	content: '';	opacity: 0;	}	.s-5::before,	.s-5::after {	box-shadow: 0 0 0 2px rgba(255,255,255,.5);	}	.s-5:hover:before,	.s-5:hover:after {	-webkit-animation-name: sAnim52, sAnim5;	animation-name:sAnim52, sAnim5;	-webkit-animation-duration: 1s;	animation-duration: 1s;	-webkit-animation-iteration-count: infinite;	animation-iteration-count: infinite;	-webkit-animation-timing-function: ease-in-out;	animation-timing-function: ease-in-out;	-webkit-animation-fill-mode: forwards;	animation-fill-mode: forwards;	}	.s-5:hover:after {	-webkit-animation-delay: .55s;	animation-delay: .55s;	}	@-webkit-keyframes sAnim5 {	0%, 100% {	opacity: 0;	}	40%, 60% {	opacity: 1;	}	}	@keyframes sAnim5 {	0%, 100% {	opacity: 0;	}	40%, 60% {	opacity: 1;	}	}	@-webkit-keyframes sAnim52 {	0% {	-webkit-transform: scale3d(0.15, 0.15, 1);	transform: scale3d(0.15, 0.15, 1);	}	100% {	-webkit-transform: scale3d(1.5, 1.5, 1);	transform: scale3d(1.5, 1.5, 1);	}	}	@keyframes sAnim52 {	0% {	-webkit-transform: scale3d(0.15, 0.15, 1);	transform: scale3d(0.15, 0.15, 1);	}	100% {	-webkit-transform: scale3d(1.5, 1.5, 1);	transform: scale3d(1.5, 1.5, 1);	}	}	/*7. Anim effect*/	.s-7::before {	position: absolute;	top: 50%;	left: -25px;	margin: -4px 0 0 0;	width: 4px;	height: 4px;	border-radius: 50%;	background: rgba(255,255,255,.85);	content: '';	opacity: 0;	-webkit-transform-origin: 40px 50%;	transform-origin: 40px 50%;	}	.s-7::after {	border: 4px solid rgba(255,255,255,.27);	margin: -40px 0 0 -40px;	}	.s-7:hover:after {	-webkit-animation: sAnim7 52s forwards infinite;	animation: sAnim7 52s forwards infinite;	}	.s-7:hover:before {	-webkit-animation-name: sAnim71, sAnim72;	animation-name: sAnim71, sAnim72;	-webkit-animation-duration: 5s, .52s;	animation-duration: 5s, .52s;	-webkit-animation-iteration-count: 1, infinite;	animation-iteration-count: 1, infinite;	-webkit-animation-timing-function: ease, linear;	animation-timing-function: ease, linear;	-webkit-animation-fill-mode: forwards;	animation-fill-mode: forwards;	}	@-webkit-keyframes sAnim7 {	0%, 100% {	-webkit-transform: scale3d(0, 0, 1);	transform: scale3d(0, 0, 1);	opacity: 0;	}	5%, 95% {	opacity: 1;	-webkit-transform: scale3d(1, 1, 1);	transform: scale3d(1, 1, 1);	}	}	@keyframes sAnim7 {	0%, 100% {	-webkit-transform: scale3d(0, 0, 1);	transform: scale3d(0, 0, 1);	opacity: 0;	}	5%, 95% {	opacity: 1;	-webkit-transform: scale3d(1, 1, 1);	transform: scale3d(1, 1, 1);	}	}	@-webkit-keyframes sAnim71 {	0%, 5%, 95%, 100% {	opacity: 0;	}	10%, 90% {	opacity: 1;	}	}	@keyframes sAnim71 {	0%, 5%, 95%, 100% {	opacity: 0;	}	10%, 90% {	opacity: 1;	}	}	@-webkit-keyframes sAnim72 {	100% {	-webkit-transform: rotate3d(0, 0, 1, 360deg);	transform: rotate3d(0, 0, 1, 360deg);	}	}	@keyframes sAnim72 {	100% {	-webkit-transform: rotate3d(0, 0, 1, 360deg);	transform: rotate3d(0, 0, 1, 360deg);	}	}	/*8.Anim effect*/	.s-8::before {	content: "";	position: absolute;	top: 50%;	left: 50%;	width: 70px;	height: 70px;	border-radius: 50%;	opacity: 0;	}	.s-8::after,	.s-8::before {	border: 4px solid rgba(255,255,255,.5); margin: -40px 0 0 -40px;	}	.s-8:hover:after {	-webkit-animation-name: sAnim82, sAnim8;	animation-name: sAnim82, sAnim8;	-webkit-animation-duration: 5s, 2s;	animation-duration: 5s, 2s;	-webkit-animation-iteration-count: 1, infinite;	animation-iteration-count: 1, infinite;	-webkit-animation-timing-function: ease, linear;	animation-timing-function: ease, linear;	-webkit-animation-fill-mode: forwards;	animation-fill-mode: forwards;	}	.s-8:hover:before {	-webkit-animation-name: sAnim82, sAnim81;	animation-name: sAnim82, sAnim81;	-webkit-animation-duration: 5s, 2s;	animation-duration: 5s, 2s;	-webkit-animation-iteration-count: 1, infinite;	animation-iteration-count: 1, infinite;	-webkit-animation-timing-function: ease, linear;	animation-timing-function: ease, linear;	-webkit-animation-fill-mode: forwards;	animation-fill-mode: forwards;	}	@-webkit-keyframes sAnim8 {	0% {	-webkit-transform: perspective(1000px) rotate3d(1, 1, 1, 0deg);	transform: perspective(1000px) rotate3d(1, 1, 1, 0deg);	}	100% {	-webkit-transform: perspective(1000px) rotate3d(1, 1, 1, 360deg);	transform: perspective(1000px) rotate3d(1, 1, 1, 360deg);	}	}	@keyframes sAnim8 {	0% {	-webkit-transform: perspective(1000px) rotate3d(1, 1, 1, 0deg);	transform: perspective(1000px) rotate3d(1, 1, 1, 0deg);	}	100% {	-webkit-transform: perspective(1000px) rotate3d(1, 1, 1, 360deg);	transform: perspective(1000px) rotate3d(1, 1, 1, 360deg);	}	}	@-webkit-keyframes sAnim81 {	0% {	-webkit-transform: perspective(1000px) rotate3d(-1, -1, -1, 0deg);	transform: perspective(1000px) rotate3d(-1, -1, -1, 0deg);	}	100% {	-webkit-transform: perspective(1000px) rotate3d(-1, -1, -1, 360deg);	transform: perspective(1000px) rotate3d(-1, -1, -1, 360deg);	}	}	@keyframes sAnim81 {	0% {	-webkit-transform: perspective(1000px) rotate3d(1, -1, 1, 0deg);	transform: perspective(1000px) rotate3d(1, -1, 1, 0deg);	}	100% {	-webkit-transform: perspective(1000px) rotate3d(1, -1, 1, 360deg);	transform: perspective(1000px) rotate3d(1, -1, 1, 360deg);	}	}	@-webkit-keyframes sAnim82 {	0%, 100% {	opacity: 0;	}	25%, 75% {	opacity: 1;	}	}	@keyframes sAnim82 {	0%, 100% {	opacity: 0;	}	25%, 75% {	opacity: 1;	}	}	/*10. Circle*/	/*.s-10::after {	opacity: 1;	border: 4px solid #fff;	margin: -40px 0 0 -40px;	}*/	.s-10 span {	position: absolute;	overflow: hidden;	width: 40px;	height: 80px;	display: block;	top: 50%;	margin: -40px 0 0 0;	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;	}	.s-10 .after {	left: -25px;	}	.s-10 .before {	right: -25px;	}	.s-10 .before:before,	.s-10 .after:before{	content: "";	border: 2px solid rgba(255,255,255,.5); position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background-clip: padding-box; width: 40px; height: 80px; transform: rotate(180deg); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;	}	.s-10 .before:before {	animation-play-state: paused;	border-radius: 0 80px 80px 0;	border-left: none;	transform-origin: 0% 50%;	}	.s-10 .after:before {	/*animation-play-state: paused;*/	border-radius: 80px 0px 0px 80px; border-right: none; transform-origin: 100% 50%;	}	.s-10:hover .before:before,	.s-10:hover .after:before {	/*animation-play-state: running;*/	}	.s-10:hover .before:before {	animation: circle-rightR 1s both linear;	}	.s-10:hover .after:before {	animation: circle-leftL 1s 1s both linear;	}	@keyframes circle-left {	0%{ transform: rotate(-180deg); } 10%{ transform: rotate(-180deg); }	20%{ transform: rotate(0); }	30%{ transform: rotate(0); }	40%{ transform: rotate(180deg); }	50%{ transform: rotate(180deg); }	100%{ transform: rotate(180deg); }	}	@keyframes circle-right {	0%{ transform: rotate(-180deg); }	10%{ transform: rotate(0);}	20%{ transform: rotate(0); }	30%{ transform: rotate(180deg); }	40%{ transform: rotate(180deg);}	50%{ transform: rotate(180deg); }	100%{ transform: rotate(180deg); }	}	@keyframes circle-rightR {	0%{ transform: rotate(-180deg); }	100%{ transform: rotate(0deg); }	}	@keyframes circle-leftL {	0%{ transform: rotate(-180deg); }	100%{ transform: rotate(0deg); }	}
h1 { font-family: Tahoma; font-weight: lighter; text-align: center; text-transform: lowercase;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<html lang="en">
<head>	<meta charset="UTF-8">	<title>Animate</title>	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body> <h1>Some different css effect</h1>	<div class="container">	<div class="box s-1">	<i class="fa fa-lemon-o"></i>	</div>	<div class="box s-2">	<i class="fa fa-lemon-o"></i>	</div>	<div class="box s-3">	<i class="fa fa-lemon-o"></i>	</div>	<div class="box s-4">	<i class="fa fa-lemon-o"></i>	</div>	<div class="box s-5">	<i class="fa fa-lemon-o"></i>	</div>	<div class="box s-7">	<i class="fa fa-lemon-o"></i>	</div>	<div class="box s-8">	<i class="fa fa-lemon-o"></i>	</div>	<div class="box s-10">	<i class="fa fa-lemon-o"></i>	<span class="after"></span>	<span class="before"></span>	</div>	</div>
</body>
</html>
</body>
</html>

CSS Animation effect - Script Codes CSS Codes

body {	background: #cddc39;	color: #fff;	font-size: 17px;	line-height: 1.2;	}	.container {	max-width: 720px;	width: 100%;	height: 100%;	margin: 52px auto;	text-align: center;	}	.box i {	font-size: 34px;	}	.box { position: relative; display: inline-block; margin: 3em; padding: 0; color: #fff; font-size: 1.4em; overflow: visible; -webkit-transition: color 0.7s; transition: color 0.7s; cursor: pointer;	}	.box:after {	content: ''; position: absolute; top: 50%; left: 50%; margin: -35px 0 0 -35px; width: 70px; height: 70px; border-radius: 50%; opacity: 0;	}	/* 1. Anim effect*/	.s-1:after { border: 5px solid rgba(255,255,255,.5); margin: -40px 0 0 -40px;	}	.s-1:hover::after {	-webkit-animation: sAnim1 .52s ease-in-out forwards infinite;	animation: sAnim1 .52s ease-in-out forwards infinite;	}	@-webkit-keyframes sAnim1 {	from {	opacity: 1;	-webkit-transform: scale3d(0.25, 0.25, 1);	transform: scale3d(0.25, 0.25, 1);	}	to {	opacity: 0;	-webkit-transform: scale3d(1.5, 1.5, 1);	transform: scale3d(1.5, 1.5, 1);	}	}	@keyframes sAnim1 {	from {	opacity: 1;	-webkit-transform: scale3d(0.25, 0.25, 1);	transform: scale3d(0.25, 0.25, 1);	}	to {	opacity: 0;	-webkit-transform: scale3d(1.5, 1.5, 1);	transform: scale3d(1.5, 1.5, 1);	}	}	/* 2. Anim effect*/	.s-2:after {	background: rgba(255,255,255,.27);	}	.s-2:hover:after {	-webkit-animation: sAnim2 .7s forwards infinite;	animation: sAnim2 .7s forwards infinite;	}	@-webkit-keyframes sAnim2 {	from {	-webkit-transform: scale3d(0.15, 0.15, 1);	transform: scale3d(0.25, 0.25, 1);	}	25%, 50% {	opacity: 1;	}	to {	opacity: 0;	-webkit-transform: scale3d(1.5, 1.5, 1);	transform: scale3d(1.5, 1.5, 1);	}	}	@keyframes sAnim2 {	from {	-webkit-transform: scale3d(0.15, 0.15, 1);	transform: scale3d(0.25, 0.25, 1);	}	25%, 50% {	opacity: 1;	}	to {	opacity: 0;	-webkit-transform: scale3d(1.5, 1.5, 1);	transform: scale3d(1.5, 1.5, 1);	}	}	/* 3. Anim effect*/	.s-3:after {	box-shadow: inset 0 0 0 35px rgba(255,255,255,0);	}	.s-3:hover:after {	-webkit-animation: sAnim3 .72s ease-out forwards infinite;	animation: sAnim3 .72s ease-out forwards infinite;	}	@-webkit-keyframes sAnim3 {	0% {	opacity: 1;	-webkit-transform: scale3d(0.15, 0.15, 1);	transform: scale3d(0.15, 0.15, 1);	}	80% {	box-shadow: inset 0 0 0 2px rgba(255,255,255,.75);	opacity: 0.1;	}	100% {	box-shadow: inset 0 0 0 2px rgba(255,255,255,.75);	opacity: 0;	-webkit-transform: scale3d(1.5, 1.5, 1);	transform: scale3d(1.5, 1.5, 1);	}	}	@keyframes sAnim3 {	0% {	opacity: 1;	-webkit-transform: scale3d(0.15, 0.15, 1);	transform: scale3d(0.15, 0.15, 1);	}	80% {	box-shadow: inset 0 0 0 2px rgba(255,255,255,.75);	opacity: 0.1;	}	100% {	box-shadow: inset 0 0 0 2px rgba(255,255,255,.75);	opacity: 0;	-webkit-transform: scale3d(1.5, 1.5, 1);	transform: scale3d(1.5, 1.5, 1);	}	}	/* 4. Anim effect*/	.s-4::before {	position: absolute;	top: 50%;	left: 50%;	margin: -35px 0 0 -35px;	width: 70px;	height: 70px;	border-radius: 50%;	content: '';	opacity: 0;	pointer-events: none;	}	.s-4::before,	.s-4::after {	box-shadow: 0 0 0 2px rgba(255,255,255,.5);	}	.s-4:hover:before {	-webkit-animation: sAnim4 .72s forwards infinite;	animation: sAnim4 .72s forwards infinite;	}	.s-4:hover:after {	-webkit-animation: sAnim42 .72s forwards infinite;	animation: sAnim42 .72s forwards infinite;	}	@-webkit-keyframes sAnim4 {	from {	opacity: 1;	-webkit-transform: scale3d(0.15, 0.15, 1);	transform: scale3d(0.15, 0.15, 1);	}	to {	opacity: 0;	-webkit-transform: scale3d(1.35, 1.35, 1);	transform: scale3d(1.35, 1.35, 1);	}	}	@keyframes sAnim4 {	from {	opacity: 1;	-webkit-transform: scale3d(0.15, 0.15, 1);	transform: scale3d(0.15, 0.15, 1);	}	to {	opacity: 0;	-webkit-transform: scale3d(1.35, 1.35, 1);	transform: scale3d(1.35, 1.35, 1);	}	}	@-webkit-keyframes sAnim42 {	0% {	opacity: 1;	-webkit-transform: scale3d(0.15, 0.15, 1);	transform: scale3d(0.15, 0.15, 1);	}	50%, 100% {	opacity: 0;	-webkit-transform: scale3d(1.5, 1.5, 1);	transform: scale3d(1.5, 1.5, 1);	}	}	@keyframes sAnim42 {	0% {	opacity: 1;	-webkit-transform: scale3d(0.15, 0.15, 1);	transform: scale3d(0.15, 0.15, 1);	}	50%, 100% {	opacity: 0;	-webkit-transform: scale3d(1.5, 1.5, 1);	transform: scale3d(1.5, 1.5, 1);	}	}	/* 5. Anim effect*/	.s-5::before {	position: absolute;	top: 50%;	left: 50%;	margin: -25px 0 0 -25px;	width: 50px;	height: 50px;	border-radius: 50%;	content: '';	opacity: 0;	}	.s-5::before,	.s-5::after {	box-shadow: 0 0 0 2px rgba(255,255,255,.5);	}	.s-5:hover:before,	.s-5:hover:after {	-webkit-animation-name: sAnim52, sAnim5;	animation-name:sAnim52, sAnim5;	-webkit-animation-duration: 1s;	animation-duration: 1s;	-webkit-animation-iteration-count: infinite;	animation-iteration-count: infinite;	-webkit-animation-timing-function: ease-in-out;	animation-timing-function: ease-in-out;	-webkit-animation-fill-mode: forwards;	animation-fill-mode: forwards;	}	.s-5:hover:after {	-webkit-animation-delay: .55s;	animation-delay: .55s;	}	@-webkit-keyframes sAnim5 {	0%, 100% {	opacity: 0;	}	40%, 60% {	opacity: 1;	}	}	@keyframes sAnim5 {	0%, 100% {	opacity: 0;	}	40%, 60% {	opacity: 1;	}	}	@-webkit-keyframes sAnim52 {	0% {	-webkit-transform: scale3d(0.15, 0.15, 1);	transform: scale3d(0.15, 0.15, 1);	}	100% {	-webkit-transform: scale3d(1.5, 1.5, 1);	transform: scale3d(1.5, 1.5, 1);	}	}	@keyframes sAnim52 {	0% {	-webkit-transform: scale3d(0.15, 0.15, 1);	transform: scale3d(0.15, 0.15, 1);	}	100% {	-webkit-transform: scale3d(1.5, 1.5, 1);	transform: scale3d(1.5, 1.5, 1);	}	}	/*7. Anim effect*/	.s-7::before {	position: absolute;	top: 50%;	left: -25px;	margin: -4px 0 0 0;	width: 4px;	height: 4px;	border-radius: 50%;	background: rgba(255,255,255,.85);	content: '';	opacity: 0;	-webkit-transform-origin: 40px 50%;	transform-origin: 40px 50%;	}	.s-7::after {	border: 4px solid rgba(255,255,255,.27);	margin: -40px 0 0 -40px;	}	.s-7:hover:after {	-webkit-animation: sAnim7 52s forwards infinite;	animation: sAnim7 52s forwards infinite;	}	.s-7:hover:before {	-webkit-animation-name: sAnim71, sAnim72;	animation-name: sAnim71, sAnim72;	-webkit-animation-duration: 5s, .52s;	animation-duration: 5s, .52s;	-webkit-animation-iteration-count: 1, infinite;	animation-iteration-count: 1, infinite;	-webkit-animation-timing-function: ease, linear;	animation-timing-function: ease, linear;	-webkit-animation-fill-mode: forwards;	animation-fill-mode: forwards;	}	@-webkit-keyframes sAnim7 {	0%, 100% {	-webkit-transform: scale3d(0, 0, 1);	transform: scale3d(0, 0, 1);	opacity: 0;	}	5%, 95% {	opacity: 1;	-webkit-transform: scale3d(1, 1, 1);	transform: scale3d(1, 1, 1);	}	}	@keyframes sAnim7 {	0%, 100% {	-webkit-transform: scale3d(0, 0, 1);	transform: scale3d(0, 0, 1);	opacity: 0;	}	5%, 95% {	opacity: 1;	-webkit-transform: scale3d(1, 1, 1);	transform: scale3d(1, 1, 1);	}	}	@-webkit-keyframes sAnim71 {	0%, 5%, 95%, 100% {	opacity: 0;	}	10%, 90% {	opacity: 1;	}	}	@keyframes sAnim71 {	0%, 5%, 95%, 100% {	opacity: 0;	}	10%, 90% {	opacity: 1;	}	}	@-webkit-keyframes sAnim72 {	100% {	-webkit-transform: rotate3d(0, 0, 1, 360deg);	transform: rotate3d(0, 0, 1, 360deg);	}	}	@keyframes sAnim72 {	100% {	-webkit-transform: rotate3d(0, 0, 1, 360deg);	transform: rotate3d(0, 0, 1, 360deg);	}	}	/*8.Anim effect*/	.s-8::before {	content: "";	position: absolute;	top: 50%;	left: 50%;	width: 70px;	height: 70px;	border-radius: 50%;	opacity: 0;	}	.s-8::after,	.s-8::before {	border: 4px solid rgba(255,255,255,.5); margin: -40px 0 0 -40px;	}	.s-8:hover:after {	-webkit-animation-name: sAnim82, sAnim8;	animation-name: sAnim82, sAnim8;	-webkit-animation-duration: 5s, 2s;	animation-duration: 5s, 2s;	-webkit-animation-iteration-count: 1, infinite;	animation-iteration-count: 1, infinite;	-webkit-animation-timing-function: ease, linear;	animation-timing-function: ease, linear;	-webkit-animation-fill-mode: forwards;	animation-fill-mode: forwards;	}	.s-8:hover:before {	-webkit-animation-name: sAnim82, sAnim81;	animation-name: sAnim82, sAnim81;	-webkit-animation-duration: 5s, 2s;	animation-duration: 5s, 2s;	-webkit-animation-iteration-count: 1, infinite;	animation-iteration-count: 1, infinite;	-webkit-animation-timing-function: ease, linear;	animation-timing-function: ease, linear;	-webkit-animation-fill-mode: forwards;	animation-fill-mode: forwards;	}	@-webkit-keyframes sAnim8 {	0% {	-webkit-transform: perspective(1000px) rotate3d(1, 1, 1, 0deg);	transform: perspective(1000px) rotate3d(1, 1, 1, 0deg);	}	100% {	-webkit-transform: perspective(1000px) rotate3d(1, 1, 1, 360deg);	transform: perspective(1000px) rotate3d(1, 1, 1, 360deg);	}	}	@keyframes sAnim8 {	0% {	-webkit-transform: perspective(1000px) rotate3d(1, 1, 1, 0deg);	transform: perspective(1000px) rotate3d(1, 1, 1, 0deg);	}	100% {	-webkit-transform: perspective(1000px) rotate3d(1, 1, 1, 360deg);	transform: perspective(1000px) rotate3d(1, 1, 1, 360deg);	}	}	@-webkit-keyframes sAnim81 {	0% {	-webkit-transform: perspective(1000px) rotate3d(-1, -1, -1, 0deg);	transform: perspective(1000px) rotate3d(-1, -1, -1, 0deg);	}	100% {	-webkit-transform: perspective(1000px) rotate3d(-1, -1, -1, 360deg);	transform: perspective(1000px) rotate3d(-1, -1, -1, 360deg);	}	}	@keyframes sAnim81 {	0% {	-webkit-transform: perspective(1000px) rotate3d(1, -1, 1, 0deg);	transform: perspective(1000px) rotate3d(1, -1, 1, 0deg);	}	100% {	-webkit-transform: perspective(1000px) rotate3d(1, -1, 1, 360deg);	transform: perspective(1000px) rotate3d(1, -1, 1, 360deg);	}	}	@-webkit-keyframes sAnim82 {	0%, 100% {	opacity: 0;	}	25%, 75% {	opacity: 1;	}	}	@keyframes sAnim82 {	0%, 100% {	opacity: 0;	}	25%, 75% {	opacity: 1;	}	}	/*10. Circle*/	/*.s-10::after {	opacity: 1;	border: 4px solid #fff;	margin: -40px 0 0 -40px;	}*/	.s-10 span {	position: absolute;	overflow: hidden;	width: 40px;	height: 80px;	display: block;	top: 50%;	margin: -40px 0 0 0;	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;	}	.s-10 .after {	left: -25px;	}	.s-10 .before {	right: -25px;	}	.s-10 .before:before,	.s-10 .after:before{	content: "";	border: 2px solid rgba(255,255,255,.5); position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background-clip: padding-box; width: 40px; height: 80px; transform: rotate(180deg); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;	}	.s-10 .before:before {	animation-play-state: paused;	border-radius: 0 80px 80px 0;	border-left: none;	transform-origin: 0% 50%;	}	.s-10 .after:before {	/*animation-play-state: paused;*/	border-radius: 80px 0px 0px 80px; border-right: none; transform-origin: 100% 50%;	}	.s-10:hover .before:before,	.s-10:hover .after:before {	/*animation-play-state: running;*/	}	.s-10:hover .before:before {	animation: circle-rightR 1s both linear;	}	.s-10:hover .after:before {	animation: circle-leftL 1s 1s both linear;	}	@keyframes circle-left {	0%{ transform: rotate(-180deg); } 10%{ transform: rotate(-180deg); }	20%{ transform: rotate(0); }	30%{ transform: rotate(0); }	40%{ transform: rotate(180deg); }	50%{ transform: rotate(180deg); }	100%{ transform: rotate(180deg); }	}	@keyframes circle-right {	0%{ transform: rotate(-180deg); }	10%{ transform: rotate(0);}	20%{ transform: rotate(0); }	30%{ transform: rotate(180deg); }	40%{ transform: rotate(180deg);}	50%{ transform: rotate(180deg); }	100%{ transform: rotate(180deg); }	}	@keyframes circle-rightR {	0%{ transform: rotate(-180deg); }	100%{ transform: rotate(0deg); }	}	@keyframes circle-leftL {	0%{ transform: rotate(-180deg); }	100%{ transform: rotate(0deg); }	}
h1 { font-family: Tahoma; font-weight: lighter; text-align: center; text-transform: lowercase;
}
CSS Animation effect - Script Codes
CSS Animation effect - Script Codes
Home Page Home
Developer Elena
Username semenchenko
Uploaded December 17, 2022
Rating 3
Size 5,409 Kb
Views 6,072
Do you need developer help for CSS Animation effect?

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!

Elena (semenchenko) Script Codes
Name
VideoBg
PROCESS INFOGRAPHIC
Modal
Card
Animation countdown
Responsive HTML Email template
Slider CSS Only
CSS hover effect
Calc.js
Css piramide
Create amazing video scripts 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!