Css keyfram chang without effect on body

Hi I am facing a problem using keyfram change css i am try to change font site but its effect on body any trick to fix this issue.

CSS:

@keyframes fadeIn { 
  from { font-size: 20px; color:red; } 
}

.animate-flicker {
    animation: fadeIn 0.3s infinite alternate;
}

HTML:

<span class="animate-flicker">Riyaz BABA</span>

Its look working fine but when this i loop this font site change it will effect on other rows

If you change the font-size to 20px then the element will be bigger and thus all other content will need to move down to allow room for the larger font size. It won;t change the font size of any other elements though if that was what you were suggesting?

If you want a pulse effect without affecting the flow then use scale instead as that does not alter the flow.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
@keyframes fadeIn { 
  from { transform:scale(1.2); color:red; } 
}

.animate-flicker {
    animation: fadeIn 0.3s infinite alternate;
	display:inline-block;
	transform-origin: 0 0;
}

</style>

</head>

<body>

<p><span class="animate-flicker">Riyaz BABA</span> <br>
<span>More text</span></p>
</body>
</html>

Thanks Its work perfect.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.