To achieve this we create a span animations with a delay telling the box that hides our text to reveal it only of animations based on scroll position, only to find all items moving effectively in tandem. This animated follows the style of modern technology. The letters take on a protruding 3D effect using CSS3 text shadows along with a slight diagonal slant.

Since the day CSS3 was launched, the monopoly of jQuery in the animation field has been reduced. Especially because of the “keyframe” feature of CSS3 which is more or less equivalent to the timeline concept of flash. In today’s animation also I’ve used only the simple concept of “keyframes”. Basically what I’ve done is, I‘ve taken a span, The text which I’m gonna animate is inside the span tag.

I’ve given an up and down animation effect to the outermost div, a horizontal movement animation to the 2nd div, and a spinning effect to the h1 tag. And all those animations are triggered together. So, as a result, we’re getting this text bouncing and spinning effect. Now I’m gonna tell you how the code is working, and trust me it’s really very very simple. Once you understand the code, you will be able to make some new animations too.

 
The fade-in animation style the same jumping text. Everything is controlled through CSS This way you can play the animation many times over to get a better look. This animation mimics the typing carousel effect I mentioned earlier, except this can be made with just CSS.

It relies on a custom looping animation that moves from one CSS keyframe to another, each frame displaying a different word or phrase in the rotating text. I find this effect much better and easier to read on a homepage. If you’re looking for some cool text effects for your homepage this would be an excellent choice.

The CSS text-shadow property applies to create a shadow to the text. It accepts a list of shadows separated by a comma. The list will be applied to the text for its decorations. Some combination of X and Y offsets from the element describes each of the shadows. We are using @keyframes for the animation code.

The animation is created by gradually changing from one set of CSS to another one. The change of all styles happen in percentage or the style change happens by using the keywords “from” and “to”, which is the same as 0% and 100%. The set of CSS can be changed many times.

 
For any doubts and queries, feel free to leave comments below. Remember to subscribe to our channel. Do share the tutorial if you think it’s worth it