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?
text-align is not supposed to be a transitionable property.