Animated Text Reveal In Pure CSS

Animated Text Reveal In Pure CSS, Get Example With Source Code. You must have seen text reveal effect in many videos, even some website use these types of effect on their intro banner. Basically, this concept is: First add text, and add a shape over the text. then animate the shape left to right or right to left. When this animation will run with 2 or 3 seconds then the text reveal effect will create.

Where you can use animated text reveal? You can use it on your banner, about and footer section. This effect will be pretty good for any website. I had also previously shared dynamic website intro with HTML CSS & JavaScript, If you want an advance program then go for this. Otherwise, this program is also good.

So, Today I am sharing an Animated Text Reveal Program In Pure CSS. I created this program with only HTML and CSS, No javascript or jquery used. This a very basic and simple program but by looks it pretty enough. Let’s take a look at this program.

Preview and Example Of This Program

First, See how this program looks like, In this video.

Now you can see this program visually. If you like it, then go for source code.

Animated Text Reveal In Pure CSS Program Source Code

Before sharing source code, I want to say about this program a little bit. I just put one h1 tag for text, Left other work had done in CSS. Also, I put a rectangle over the text. Then animate the rectangles width 0 to 100 to 0 with the help of CSS keyframe and animation property. In other words, this program is fully based on CSS animation property, like animation-delay or animation-duration etc (know more about CSS animation ).

I have to create just 2 files for this program. One for HTML, & one for CSS, that’s all.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com) -->
<html>
 
<head>
  <meta charset="UTF-8">
  <title>Text Reveal In Pure CSS  | Webdevtrick.com</title>
      <link rel="stylesheet" href="style.css">
</head>
 
<body>
 
  <h1 class="reveal">
	Webdevtrick.com
</h1>
</body>
 
</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

:root {
	--animation-delay: 0;
	--duration: 800ms;
	--iterations: 1;
}
/* code by webdevtrick ( https://webdevtrick.com) */
body {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background-color: #72BDED;
	flex-direction: column;
}
 
.reveal,
.reveal::after {
	        animation-delay: 0;
	        animation-delay: var(--animation-delay, 2s);
	        animation-iteration-count: 1;
	        animation-iteration-count: var(--iterations, 1);
	        animation-duration: 800ms;
	        animation-duration: var(--duration, 800ms);
	        animation-fill-mode: both;
	        animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}
 
.reveal {
	position: relative;
	font-size: 6vw;
	animation-name: text;
	color: #FFF;
	white-space: nowrap;
	cursor: default;
	text-transform: uppercase;
}

 

.reveal::after {

content: “”;

position: absolute;

z-index: 999;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-color: #f2f98b;

        transform: scaleX(0);

        transform-origin: 0 50%;

pointer-events: none;

        animation-name: revealer;

}

 

 

 

@keyframes text {

from {

        clip-path: inset(0 100% 0 0);

}

to {

        clip-path: inset(0 0 0 0);

}

}

 

 

 

 

@keyframes revealer {
0%, 50% {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform-origin: 0 50%;
}

60%, 100% {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform-origin: 100% 50%;		
}

 
60% {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scaleX(1);
}

100% {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scaleX(0);
}

}

That’s It. Now you have successfully create this program which is animated text reveal in pure CSS. If you have any doubt or question comment down below.

Thanks for reading. If you liked this post, share it with all of your programming buddies!

Originally published on webdevtrick.com

#css #html #web-development #design-pattern

What is GEEK

Buddha Community

Graham Ssebuuma

1617940200

CSS Animation: translate3d, backdrop-filter, and Custom Tags

In this tutorial, we are going to learn:

how to create a smooth animation using the CSS transform translate3d prop.
why we’d want to use the cubic-bezier transition timing function and this function’s benefits.
how and why we use custom tags.
if you watch the video to the end, I also provide a bonus tip on using backdrop-filter to style some frost/blur style on background.

#css #css animation #css / style sheets #css animations #css background

CSS Programming

1598493059

The Guide To CSS Animation

Animations are very useful tools to make pages more appealing. I would like to start with what are animations, give some supplementary information, and give some animation syntax examples.

What are Animations?

Simply put, animations are changes in CSS styling, from one style to another. They make the web experience clearer and more understandable.

Let’s face it; animations are everywhere in these new generations of web

applications, whether they are triggered by clicking, hovering, focusing, or anything else. Check out this site about endangered species and think about the industrialization and CSS animations.

As you can see, this website uses different animations to grab the attention of the user, and it is a powerful way of emphasizing the point they are trying to make.

Before animations, I would like to a step back and talk about pseudo selectors first, and then we’ll dive into animations.

#css-animation #css3 #css #web-design #animations #html-css

The Webster

1596602879

Animated Character in CSS | CSS Animation | Webster

In this video webster is going to show you how to create Animated Character in CSS| Webster

#css #css-animation #bootstrap #animation #ui #ux

Eric Bukenya

1626298440

Animating The Pseudo-Element Content Property Using CSS Keyframes Animation

At InVision, I’m building a small user interface (UI) that loads a list of documents and then caches them in memory for all subsequent renderings of the UI. During that one-time-only loading phase, I’m showing the static text, Loading...., in the view. But, this static text got me thinking about low-effort animations. And, whether or not I could use CSS @keyframes animations to animate the ellipsis portion of that text. It turns out, animating the content property works in modern browsers!

Normally with @keyframes animations, we use the timeline to define numeric CSS properties that can be animated gracefully using some sort of timing function. That said, it appears that we can use individual keyframes to set the state for non-animatable properties. These properties will be applied for the duration of the keyframe; but, will not receive any sort of transitiony magic.

In this demo, I’m animating the content property in order to apply an increasing number of dots (.) in the Loading....

#html / css #css #css keyframes #css keyframes animation

Graham Ssebuuma

1617801720

Winning on the Web with Cascading Style Sheets (CSS) Animations

Web animations can be used to attract attention, engage people better, and communicate more clearly and effectively. It can engage and hold people’s attention longer than just a static web page.

#css3 #diving-into-css-animation #creating-animation-with-css #master-css #web-development #programming #web-animation #web-monetization