Animation - text

Developer

Size

3,268 Kb

Views

44,528

Animation - text Previews
Animation - text HTML Codes
Animation - text CSS Codes

How do I make an animation - text?

What is a animation - text? How do you make a animation - text? This script and codes were developed by Alen on 07 September 2022, Wednesday.

Animation - text Previews

Animation - text - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>animation - text</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1 class="stretchLeft">Hello World</h1>
<h1 class="stretchRight">Hello World</h1>
<h1 class="pullDown">Hello World</h1>
<h1 class="pullUp">Hello World</h1>
<h1 class="slideDown">Hello World</h1>
</body>
</html>

Animation - text - Script Codes CSS Codes

/*
==============================================
slideDown
==============================================
*/
.slideDown{	animation-name: slideDown;	-webkit-animation-name: slideDown;	animation-duration: 1s;	-webkit-animation-duration: 1s;	animation-timing-function: ease;	-webkit-animation-timing-function: ease;	visibility: visible !important;
}
@keyframes slideDown {	0% {	transform: translateY(-100%);	}	50%{	transform: translateY(8%);	}	65%{	transform: translateY(-4%);	}	80%{	transform: translateY(4%);	}	95%{	transform: translateY(-2%);	}	100% {	transform: translateY(0%);	}
}
@-webkit-keyframes slideDown {	0% {	-webkit-transform: translateY(-100%);	}	50%{	-webkit-transform: translateY(8%);	}	65%{	-webkit-transform: translateY(-4%);	}	80%{	-webkit-transform: translateY(4%);	}	95%{	-webkit-transform: translateY(-2%);	}	100% {	-webkit-transform: translateY(0%);	}
}
/*
==============================================
slideUp
==============================================
*/
.slideUp{	animation-name: slideUp;	-webkit-animation-name: slideUp;	animation-duration: 1s;	-webkit-animation-duration: 1s;	animation-timing-function: ease;	-webkit-animation-timing-function: ease;	visibility: visible !important;
}
@keyframes slideUp {	0% {	transform: translateY(100%);	}	50%{	transform: translateY(-8%);	}	65%{	transform: translateY(4%);	}	80%{	transform: translateY(-4%);	}	95%{	transform: translateY(2%);	}	100% {	transform: translateY(0%);	}
}
@-webkit-keyframes slideUp {	0% {	-webkit-transform: translateY(100%);	}	50%{	-webkit-transform: translateY(-8%);	}	65%{	-webkit-transform: translateY(4%);	}	80%{	-webkit-transform: translateY(-4%);	}	95%{	-webkit-transform: translateY(2%);	}	100% {	-webkit-transform: translateY(0%);	}
}
/*
==============================================
slideLeft
==============================================
*/
.slideLeft{	animation-name: slideLeft;	-webkit-animation-name: slideLeft;	animation-duration: 1s;	-webkit-animation-duration: 1s;	animation-timing-function: ease-in-out;	-webkit-animation-timing-function: ease-in-out;	visibility: visible !important;
}
@keyframes slideLeft {	0% {	transform: translateX(150%);	}	50%{	transform: translateX(-8%);	}	65%{	transform: translateX(4%);	}	80%{	transform: translateX(-4%);	}	95%{	transform: translateX(2%);	}	100% {	transform: translateX(0%);	}
}
@-webkit-keyframes slideLeft {	0% {	-webkit-transform: translateX(150%);	}	50%{	-webkit-transform: translateX(-8%);	}	65%{	-webkit-transform: translateX(4%);	}	80%{	-webkit-transform: translateX(-4%);	}	95%{	-webkit-transform: translateX(2%);	}	100% {	-webkit-transform: translateX(0%);	}
}
/*
==============================================
slideRight
==============================================
*/
.slideRight{	animation-name: slideRight;	-webkit-animation-name: slideRight;	animation-duration: 1s;	-webkit-animation-duration: 1s;	animation-timing-function: ease-in-out;	-webkit-animation-timing-function: ease-in-out;	visibility: visible !important;
}
@keyframes slideRight {	0% {	transform: translateX(-150%);	}	50%{	transform: translateX(8%);	}	65%{	transform: translateX(-4%);	}	80%{	transform: translateX(4%);	}	95%{	transform: translateX(-2%);	}	100% {	transform: translateX(0%);	}
}
@-webkit-keyframes slideRight {	0% {	-webkit-transform: translateX(-150%);	}	50%{	-webkit-transform: translateX(8%);	}	65%{	-webkit-transform: translateX(-4%);	}	80%{	-webkit-transform: translateX(4%);	}	95%{	-webkit-transform: translateX(-2%);	}	100% {	-webkit-transform: translateX(0%);	}
}
/*
==============================================
slideExpandUp
==============================================
*/
.slideExpandUp{	animation-name: slideExpandUp;	-webkit-animation-name: slideExpandUp;	animation-duration: 1.6s;	-webkit-animation-duration: 1.6s;	animation-timing-function: ease-out;	-webkit-animation-timing-function: ease -out;	visibility: visible !important;
}
@keyframes slideExpandUp {	0% {	transform: translateY(100%) scaleX(0.5);	}	30%{	transform: translateY(-8%) scaleX(0.5);	}	40%{	transform: translateY(2%) scaleX(0.5);	}	50%{	transform: translateY(0%) scaleX(1.1);	}	60%{	transform: translateY(0%) scaleX(0.9);	}	70% {	transform: translateY(0%) scaleX(1.05);	}	80%{	transform: translateY(0%) scaleX(0.95);	}	90% {	transform: translateY(0%) scaleX(1.02);	}	100%{	transform: translateY(0%) scaleX(1);	}
}
@-webkit-keyframes slideExpandUp {	0% {	-webkit-transform: translateY(100%) scaleX(0.5);	}	30%{	-webkit-transform: translateY(-8%) scaleX(0.5);	}	40%{	-webkit-transform: translateY(2%) scaleX(0.5);	}	50%{	-webkit-transform: translateY(0%) scaleX(1.1);	}	60%{	-webkit-transform: translateY(0%) scaleX(0.9);	}	70% {	-webkit-transform: translateY(0%) scaleX(1.05);	}	80%{	-webkit-transform: translateY(0%) scaleX(0.95);	}	90% {	-webkit-transform: translateY(0%) scaleX(1.02);	}	100%{	-webkit-transform: translateY(0%) scaleX(1);	}
}
/*
==============================================
expandUp
==============================================
*/
.expandUp{	animation-name: expandUp;	-webkit-animation-name: expandUp;	animation-duration: 0.7s;	-webkit-animation-duration: 0.7s;	animation-timing-function: ease;	-webkit-animation-timing-function: ease;	visibility: visible !important;
}
@keyframes expandUp {	0% {	transform: translateY(100%) scale(0.6) scaleY(0.5);	}	60%{	transform: translateY(-7%) scaleY(1.12);	}	75%{	transform: translateY(3%);	}	100% {	transform: translateY(0%) scale(1) scaleY(1);	}
}
@-webkit-keyframes expandUp {	0% {	-webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);	}	60%{	-webkit-transform: translateY(-7%) scaleY(1.12);	}	75%{	-webkit-transform: translateY(3%);	}	100% {	-webkit-transform: translateY(0%) scale(1) scaleY(1);	}
}
/*
==============================================
fadeIn
==============================================
*/
.fadeIn{	animation-name: fadeIn;	-webkit-animation-name: fadeIn;	animation-duration: 1.5s;	-webkit-animation-duration: 1.5s;	animation-timing-function: ease-in-out;	-webkit-animation-timing-function: ease-in-out;	visibility: visible !important;
}
@keyframes fadeIn {	0% {	transform: scale(0);	opacity: 0.0;	}	60% {	transform: scale(1.1);	}	80% {	transform: scale(0.9);	opacity: 1;	}	100% {	transform: scale(1);	opacity: 1;	}
}
@-webkit-keyframes fadeIn {	0% {	-webkit-transform: scale(0);	opacity: 0.0;	}	60% {	-webkit-transform: scale(1.1);	}	80% {	-webkit-transform: scale(0.9);	opacity: 1;	}	100% {	-webkit-transform: scale(1);	opacity: 1;	}
}
/*
==============================================
expandOpen
==============================================
*/
.expandOpen{	animation-name: expandOpen;	-webkit-animation-name: expandOpen;	animation-duration: 1.2s;	-webkit-animation-duration: 1.2s;	animation-timing-function: ease-out;	-webkit-animation-timing-function: ease-out;	visibility: visible !important;
}
@keyframes expandOpen {	0% {	transform: scale(1.8);	}	50% {	transform: scale(0.95);	}	80% {	transform: scale(1.05);	}	90% {	transform: scale(0.98);	}	100% {	transform: scale(1);	}
}
@-webkit-keyframes expandOpen {	0% {	-webkit-transform: scale(1.8);	}	50% {	-webkit-transform: scale(0.95);	}	80% {	-webkit-transform: scale(1.05);	}	90% {	-webkit-transform: scale(0.98);	}	100% {	-webkit-transform: scale(1);	}
}
/*
==============================================
bigEntrance
==============================================
*/
.bigEntrance{	animation-name: bigEntrance;	-webkit-animation-name: bigEntrance;	animation-duration: 1.6s;	-webkit-animation-duration: 1.6s;	animation-timing-function: ease-out;	-webkit-animation-timing-function: ease-out;	visibility: visible !important;
}
@keyframes bigEntrance {	0% {	transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);	opacity: 0.2;	}	30% {	transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);	opacity: 1;	}	45% {	transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);	opacity: 1;	}	60% {	transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);	opacity: 1;	}	75% {	transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);	opacity: 1;	}	90% {	transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);	opacity: 1;	}	100% {	transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);	opacity: 1;	}
}
@-webkit-keyframes bigEntrance {	0% {	-webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);	opacity: 0.2;	}	30% {	-webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);	opacity: 1;	}	45% {	-webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);	opacity: 1;	}	60% {	-webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);	opacity: 1;	}	75% {	-webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);	opacity: 1;	}	90% {	-webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);	opacity: 1;	}	100% {	-webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);	opacity: 1;	}
}
/*
==============================================
hatch
==============================================
*/
.hatch{	animation-name: hatch;	-webkit-animation-name: hatch;	animation-duration: 2s;	-webkit-animation-duration: 2s;	animation-timing-function: ease-in-out;	-webkit-animation-timing-function: ease-in-out;	transform-origin: 50% 100%;	-ms-transform-origin: 50% 100%;	-webkit-transform-origin: 50% 100%;	visibility: visible !important;
}
@keyframes hatch {	0% {	transform: rotate(0deg) scaleY(0.6);	}	20% {	transform: rotate(-2deg) scaleY(1.05);	}	35% {	transform: rotate(2deg) scaleY(1);	}	50% {	transform: rotate(-2deg);	}	65% {	transform: rotate(1deg);	}	80% {	transform: rotate(-1deg);	}	100% {	transform: rotate(0deg);	}
}
@-webkit-keyframes hatch {	0% {	-webkit-transform: rotate(0deg) scaleY(0.6);	}	20% {	-webkit-transform: rotate(-2deg) scaleY(1.05);	}	35% {	-webkit-transform: rotate(2deg) scaleY(1);	}	50% {	-webkit-transform: rotate(-2deg);	}	65% {	-webkit-transform: rotate(1deg);	}	80% {	-webkit-transform: rotate(-1deg);	}	100% {	-webkit-transform: rotate(0deg);	}
}
/*
==============================================
bounce
==============================================
*/
.bounce{	animation-name: bounce;	-webkit-animation-name: bounce;	animation-duration: 1.6s;	-webkit-animation-duration: 1.6s;	animation-timing-function: ease;	-webkit-animation-timing-function: ease;	transform-origin: 50% 100%;	-ms-transform-origin: 50% 100%;	-webkit-transform-origin: 50% 100%;
}
@keyframes bounce {	0% {	transform: translateY(0%) scaleY(0.6);	}	60%{	transform: translateY(-100%) scaleY(1.1);	}	70%{	transform: translateY(0%) scaleY(0.95) scaleX(1.05);	}	80%{	transform: translateY(0%) scaleY(1.05) scaleX(1);	}	90%{	transform: translateY(0%) scaleY(0.95) scaleX(1);	}	100%{	transform: translateY(0%) scaleY(1) scaleX(1);	}
}
@-webkit-keyframes bounce {	0% {	-webkit-transform: translateY(0%) scaleY(0.6);	}	60%{	-webkit-transform: translateY(-100%) scaleY(1.1);	}	70%{	-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);	}	80%{	-webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);	}	90%{	-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);	}	100%{	-webkit-transform: translateY(0%) scaleY(1) scaleX(1);	}
}
/*
==============================================
pulse
==============================================
*/
.pulse{	animation-name: pulse;	-webkit-animation-name: pulse;	animation-duration: 1.5s;	-webkit-animation-duration: 1.5s;	animation-iteration-count: infinite;	-webkit-animation-iteration-count: infinite;
}
@keyframes pulse {	0% {	transform: scale(0.9);	opacity: 0.7;	}	50% {	transform: scale(1);	opacity: 1;	}	100% {	transform: scale(0.9);	opacity: 0.7;	}
}
@-webkit-keyframes pulse {	0% {	-webkit-transform: scale(0.95);	opacity: 0.7;	}	50% {	-webkit-transform: scale(1);	opacity: 1;	}	100% {	-webkit-transform: scale(0.95);	opacity: 0.7;	}
}
/*
==============================================
floating
==============================================
*/
.floating{	animation-name: floating;	-webkit-animation-name: floating;	animation-duration: 1.5s;	-webkit-animation-duration: 1.5s;	animation-iteration-count: infinite;	-webkit-animation-iteration-count: infinite;
}
@keyframes floating {	0% {	transform: translateY(0%);	}	50% {	transform: translateY(8%);	}	100% {	transform: translateY(0%);	}
}
@-webkit-keyframes floating {	0% {	-webkit-transform: translateY(0%);	}	50% {	-webkit-transform: translateY(8%);	}	100% {	-webkit-transform: translateY(0%);	}
}
/*
==============================================
tossing
==============================================
*/
.tossing{	animation-name: tossing;	-webkit-animation-name: tossing;	animation-duration: 2.5s;	-webkit-animation-duration: 2.5s;	animation-iteration-count: infinite;	-webkit-animation-iteration-count: infinite;
}
@keyframes tossing {	0% {	transform: rotate(-4deg);	}	50% {	transform: rotate(4deg);	}	100% {	transform: rotate(-4deg);	}
}
@-webkit-keyframes tossing {	0% {	-webkit-transform: rotate(-4deg);	}	50% {	-webkit-transform: rotate(4deg);	}	100% {	-webkit-transform: rotate(-4deg);	}
}
/*
==============================================
pullUp
==============================================
*/
.pullUp{	animation-name: pullUp;	-webkit-animation-name: pullUp;	animation-duration: 1.1s;	-webkit-animation-duration: 1.1s;	animation-timing-function: ease-out;	-webkit-animation-timing-function: ease-out;	transform-origin: 50% 100%;	-ms-transform-origin: 50% 100%;	-webkit-transform-origin: 50% 100%;
}
@keyframes pullUp {	0% {	transform: scaleY(0.1);	}	40% {	transform: scaleY(1.02);	}	60% {	transform: scaleY(0.98);	}	80% {	transform: scaleY(1.01);	}	100% {	transform: scaleY(0.98);	}	80% {	transform: scaleY(1.01);	}	100% {	transform: scaleY(1);	}
}
@-webkit-keyframes pullUp {	0% {	-webkit-transform: scaleY(0.1);	}	40% {	-webkit-transform: scaleY(1.02);	}	60% {	-webkit-transform: scaleY(0.98);	}	80% {	-webkit-transform: scaleY(1.01);	}	100% {	-webkit-transform: scaleY(0.98);	}	80% {	-webkit-transform: scaleY(1.01);	}	100% {	-webkit-transform: scaleY(1);	}
}
/*
==============================================
pullDown
==============================================
*/
.pullDown{	animation-name: pullDown;	-webkit-animation-name: pullDown;	animation-duration: 1.1s;	-webkit-animation-duration: 1.1s;	animation-timing-function: ease-out;	-webkit-animation-timing-function: ease-out;	transform-origin: 50% 0%;	-ms-transform-origin: 50% 0%;	-webkit-transform-origin: 50% 0%;
}
@keyframes pullDown {	0% {	transform: scaleY(0.1);	}	40% {	transform: scaleY(1.02);	}	60% {	transform: scaleY(0.98);	}	80% {	transform: scaleY(1.01);	}	100% {	transform: scaleY(0.98);	}	80% {	transform: scaleY(1.01);	}	100% {	transform: scaleY(1);	}
}
@-webkit-keyframes pullDown {	0% {	-webkit-transform: scaleY(0.1);	}	40% {	-webkit-transform: scaleY(1.02);	}	60% {	-webkit-transform: scaleY(0.98);	}	80% {	-webkit-transform: scaleY(1.01);	}	100% {	-webkit-transform: scaleY(0.98);	}	80% {	-webkit-transform: scaleY(1.01);	}	100% {	-webkit-transform: scaleY(1);	}
}
/*
==============================================
stretchLeft
==============================================
*/
.stretchLeft{	animation-name: stretchLeft;	-webkit-animation-name: stretchLeft;	animation-duration: 1.5s;	-webkit-animation-duration: 1.5s;	animation-timing-function: ease-out;	-webkit-animation-timing-function: ease-out;	transform-origin: 100% 0%;	-ms-transform-origin: 100% 0%;	-webkit-transform-origin: 100% 0%;
}
@keyframes stretchLeft {	0% {	transform: scaleX(0.3);	}	40% {	transform: scaleX(1.02);	}	60% {	transform: scaleX(0.98);	}	80% {	transform: scaleX(1.01);	}	100% {	transform: scaleX(0.98);	}	80% {	transform: scaleX(1.01);	}	100% {	transform: scaleX(1);	}
}
@-webkit-keyframes stretchLeft {	0% {	-webkit-transform: scaleX(0.3);	}	40% {	-webkit-transform: scaleX(1.02);	}	60% {	-webkit-transform: scaleX(0.98);	}	80% {	-webkit-transform: scaleX(1.01);	}	100% {	-webkit-transform: scaleX(0.98);	}	80% {	-webkit-transform: scaleX(1.01);	}	100% {	-webkit-transform: scaleX(1);	}
}
/*
==============================================
stretchRight
==============================================
*/
.stretchRight{	animation-name: stretchRight;	-webkit-animation-name: stretchRight;	animation-duration: 1.5s;	-webkit-animation-duration: 1.5s;	animation-timing-function: ease-out;	-webkit-animation-timing-function: ease-out;	transform-origin: 0% 0%;	-ms-transform-origin: 0% 0%;	-webkit-transform-origin: 0% 0%;
}
@keyframes stretchRight {	0% {	transform: scaleX(0.3);	}	40% {	transform: scaleX(1.02);	}	60% {	transform: scaleX(0.98);	}	80% {	transform: scaleX(1.01);	}	100% {	transform: scaleX(0.98);	}	80% {	transform: scaleX(1.01);	}	100% {	transform: scaleX(1);	}
}
@-webkit-keyframes stretchRight {	0% {	-webkit-transform: scaleX(0.3);	}	40% {	-webkit-transform: scaleX(1.02);	}	60% {	-webkit-transform: scaleX(0.98);	}	80% {	-webkit-transform: scaleX(1.01);	}	100% {	-webkit-transform: scaleX(0.98);	}	80% {	-webkit-transform: scaleX(1.01);	}	100% {	-webkit-transform: scaleX(1);	}
}

Home Page	Home
Developer	Alen
Username	Alen
Uploaded	September 07, 2022
Rating	3
Size	3,268 Kb
Views	44,528

Do you need developer help for Animation - text?

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!

Alen (Alen) Script Codes

Name	Size
Menu Innerpage Sample	47,168 Kb
Sidebar Form	1,942 Kb
Simple Form in Table Layout	2,012 Kb
Listing Style	1,919 Kb
Ribbon CSS	2,283 Kb
Carousel Slider Using owl.carousel.js	2,495 Kb
Animation	10,063 Kb
Ribbon CSS Right	1,776 Kb
A Pen by Alen	71,039 Kb
3 Circle Venn Diagram	1,838 Kb

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!

Similar Scripts & Codes

Name	Username	Size
Resizable SASS Icons	Marianarlt	7,611 Kb
Tile Animation Thing	Frxnz	4,332 Kb
Slider for stackoverflow	KKOKU	3,222 Kb
A Pen by Dalton Liu	Liudalton	12,437 Kb
A Pen by Xand0r	Xand0r	1,928 Kb
Side Sliding Menu CSS	EduardL	4,388 Kb
Subtle site navigation with description	Necks	3,206 Kb
Mondrian	Chrisarmstrong	2,787 Kb
Polygon Logo in CSS	Kai	3,412 Kb
Wikipedia viewer	Chpecson	2,865 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!