Css - achieving 360 deg icon rotate in 2 clicks
<p>I'm using react and I have a button, when the button is clicked I want to rotate it by 180 deg, and when its clicked again, to rotate it again by 180 deg.
What I've managed to do is rotate it at the first time by 180, and in the second time by-180 deg.</p>

<p>jsx:</p>

<pre><code>export default class SomeComponent extends React.Component {
    render () {
        let classes = 'icon';
        if (this.props.isSelected) {
            classes += ' selected';
        }

        return (
            &lt;IconButton className={classes}&gt;expand_more&lt;/IconButton&gt;
        )
    }
}
</code></pre>

<p>css:</p>

<pre><code>.icon {
    transition-duration: .5s;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.6,0);
}

.icon.selected {
    transform: rotate(180deg);
}
</code></pre>

<p>How can I achieve that in the best way?</p>