Coding Flutter Top Posts

CSS Beautiful Intro Animations / Rising and Falling Texts Effects in CSS and Html

Naseer Aziz Ullah June 26, 2020
CSS Beautiful Introduction Animations. It is very advanced coding in CSS. Create it with CSS and then screen record this browser text animation and easily join with your Videos. This is your Intro part. You can use this intro for your youtube channel videos, Facebook videos, etc.



If you want to use this code in your Editor, Then Remember You should Have to Remove The Comment Symbols /* From the Code.
In order to Do That Before The Body Section Of this Coding Remove /* This Symbols From Code.




Given is the CSS code for this amazing and beautiful texts up and down animations.
body
{
  margin: 0;
  padding: 0;
  background: #e91e63;

}
h1
{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	transform: translate(-50%,-50%);
	text-align: center;
	margin: 0;
	padding: 0;
	color: #fff;
	font-family: sans-serif;
	text-transform: uppercase;
	border-bottom: 8px solid #fff;
	box-shadow: 0 10px 10px rgba(0,0,0,.2);

}
h1 span
{
	position: relative;
	display: inline-block;
	animation: animate 1.5s linear infinite;

}
h1 span:before
{
	content: '';
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 4px;
	background: #fff;
	animation: spanBorder 1.5s linear infinite;

}
h1 span:nth-child(1),
h1 span:nth-child(1):before
{
	animation-delay: 0s;
}
h1 span:nth-child(2),
h1 span:nth-child(2):before
{
	animation-delay: 0.2s;
}
h1 span:nth-child(3),
h1 span:nth-child(3):before
{
	animation-delay: 0.4s;
}
h1 span:nth-child(4),
h1 span:nth-child(4):before
{
	animation-delay: 0.6s;
}
h1 span:nth-child(5),
h1 span:nth-child(5):before
{
	animation-delay: 0.8s;
}
h1 span:nth-child(6),
h1 span:nth-child(6):before
{
	animation-delay: 0.10s;
}
h1 span:nth-child(7),
h1 span:nth-child(7):before
{
	animation-delay: 0.12s;
}
h1 span:nth-child(8),
h1 span:nth-child(8):before
{
	animation-delay: 0.14s;
}
h1 span:nth-child(9),
h1 span:nth-child(9):before
{
	animation-delay: 0.16s;
}
h1 span:nth-child(10),
h1 span:nth-child(10):before
{
	animation-delay: 0.18s;
}
h1 span:nth-child(11),
h1 span:nth-child(11):before
{
	animation-delay: 0.20s;
}
h1 span:nth-child(12),
h1 span:nth-child(12):before
{
	animation-delay: 0.22s;
}
h1 span:nth-child(13),
h1 span:nth-child(13):before
{
	animation-delay: 0.24s;
}
h1 span:nth-child(14),
h1 span:nth-child(14):before
{
	animation-delay: .26s;
}

@keyframes animate
{
	0%
	{
		transform: translateY(0px);
	}
	10%
	{
		transform: translateY(-30px);
	}
	15%
	{
		transform: translateY(0px);
	}
	25%
	{
		transform: translateY(-20px);
	}
	30%
	{
		transform: translateY(0px);
	}
	40%
	{
		transform: translateY(-10px);
	}
	45%
	{
		transform: translateY(0px);
	}
	100%
	{
		transform: translateY(0px);
	}

}


@keyframes spanBorder
{
	0%
	{
		bottom: 0;
		height: 4px;
	}
	10%
	{
		bottom: -30px;
		height: 34px;

	}
	15%
	{
		bottom: 0;
		height: 4px;

	}
	25%
	{
		bottom: -20px;
		height: 24px;
	}
	30%
	{
		bottom: 0;
		height: 4px;
	}
	40%
	{
		bottom: -10px;
		height: 14px;
	}
	45%
	{
		bottom: 0;
		height: 4px;
	}
	100%
	{
		bottom: 0;
		height: 4px;
	}
}


@keyframes spanBorder
{
	0%
	{
		transform: translate(0px);
	}
	10%
	{
		transform: translate(0px);
	}
	15%
	{
		transform: translate(0px);
	}
	25%
	{
		transform: translate(0px);
	}
	30%
	{
		transform: translate(0px);
	}
	40%
	{
		transform: translate(0px);
	}
	45%
	{
		transform: translate(0px);
	}
	100%
	{
		transform: translate(0px);
	}
}

Here is the HTML code for this design.

Paste the above css code in the <style> </style> tags of Html code.




Tags

Post a Comment

0 Comments

Welcome! Please Comment Without Any Hesitation.
Thank You