CODEWITHSUNDEEP
htmlcsscss-animations
Shane Hsu
Shane Hsu

Reputation: 8357

Why isn't text alignment animated in this HTML?

Why isn't the text align changed? Here's my HTML.

<!DOCTYPE html>
<html>
<head>
<title>CSS 3 Animation</title>
<style>
.table
{
width: 400px;
height: 80px;
border: 1px dotted black;
}

.animatedMargin
{
font-size: xx-large;
-webkit-animation: marginAnimation 1s;
}

@-webkit-keyframes marginAnimation
{
from   {text-align: left}
to     {text-align: right}
}
</style>
</head>
<body>
<table class="table">
<tr>
<td class="animatedMargin">
SAMPLE TEXT
</td>
</tr>
</table>
</body>
</html>

I've changed text-align to background to see if it works, and it did. So is it something with text-align?

Upvotes: 1

Views: 112

Answers (3)

Ali Rameez
Ali Rameez

Reputation: 36

Upvotes: 0

Mike
Mike

Reputation: 2153

I think text-align simply can not be animated.

Upvotes: 0

Michael Mullany
Michael Mullany

Reputation: 31750

text-align is not supposed to be a transitionable property.

Upvotes: 2

Related Questions