Menu
In the following code I can move the ‘*’ character from one side of the label to the other
with a ‘text-align: left || right’ setting. The effect is immediate when clicked.
I wanted to try using the ‘transition’ command to move the ‘*’ character
smoothly across the label area rather than the immediate jump effect.
However, if you run the sample, the transition code seems to have no effect.
Any ideas as to what to change to make the ‘*’ character move smoothly
back and forth within the element?
[code]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width-device-width,initial-scale=1.0, user-scalable=yes”/>
<title> HTML5 Test Page </title>
<!– link rel=”stylesheet” href=”common.css” media=”screen” –>
<style>
label { width: 5em; border: 1px solid black; display: inline-block;
color: blue; background-color: orange; text-align: left; }
input:checked + label { text-align: right; }
#sw {
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
#sw {
transition-property: left;
transition-duration: 2s;
transition-delay: 0s;
}
</style>
</head>
<body>
<input type=”checkbox” id=”cbox”><label for=”cbox” id=”sw1″><div id=”sw”>☀</div></label>
</body>
</html>