I seem to be having trouble making the transition effect work in this piece of code
I want to change the text alignment from left to right, but it's not working. The code is very simple.
<style>
/* Default State */
div {
background: green;
width: 1000px;
height: 100px;
line-height: 100px;
color: white;
text-align: left;
transition: all 10s;
-webkit-transition: all 10s;
}
/* Toggled State */
input[type=checkbox]:checked ~ div {
text-align: right;
}
</style>
<label for="toggle-1">Do Something</label>
<input type="checkbox" id="toggle-1">
<div>Control me</div>
What if I need to change from display none to block?