Simple 2 sides title animation

Developer
Sébastien Lombard
Size
2,306 Kb
Views
38,456
  1. Simple 2 sides title animation Previews
  2. Simple 2 sides title animation HTML Codes
  3. Simple 2 sides title animation CSS Codes

How do I make an simple 2 sides title animation?

Just a simple title animation using animate.css.. What is a simple 2 sides title animation? How do you make a simple 2 sides title animation? This script and codes were developed by Sébastien Lombard on 16 September 2022, Friday.

Simple 2 sides title animation Previews
IQ Test

Simple 2 sides title animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple 2 sides title animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Varela+Round'>
<link rel='stylesheet prefetch' href='https://daneden.github.io/animate.css/animate.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1> <div class="animated fadeInLeft">TWO</div><div class="animated fadeInRight">SIDES</div>
</h1>
<p class="animated fadeInUp delay-1">Title animation</p>
<footer>Reload the frame to see it again. Using <a href="https://daneden.github.io/animate.css/" target="_blank">animate.css</a></footer>
</body>
</html>

Simple 2 sides title animation - Script Codes CSS Codes

html, body { height: 100%; font-family: 'Varela Round' sans-serif; text-align: center;
}
h1 { margin-top: 5%; font-size: 3rem; display: inline-block;
}
h1 div { position: relative; float: left;
}
h1 div:first-child { color: #3498db; margin-right: 1rem;
}
p { font-size: 1.2rem; color: gray; text-transform: uppercase;
}
.delay-1 { -moz-animation-delay: 1s; -webkit-animation-delay: 1s; animation-delay: 1s;
}
footer { position: absolute; bottom: 2rem; width: 100%;
}
Simple 2 sides title animation - Script Codes
Simple 2 sides title animation - Script Codes
Home Page Home
Developer Sébastien Lombard
Username SebL
Uploaded September 16, 2022
Rating 4.5
Size 2,306 Kb
Views 38,456
Do you need developer help for Simple 2 sides title 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!

Sébastien Lombard (SebL) Script Codes
Name
ES6 Class to get query params in string url or array of string urls
Perspective modal window
Super simple CSS custom checkbox
SoundCloud Mini player with css record animation
Super quick responsive parametric grid generator with SASS
NgServerMessages
Responsive grid template editor concept
Handles
Bloc hover animation
Create amazing art & images 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!