React

by Kenneth Luplau-Brøgger

HTML

<div id="app"></div>

CSS

@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

React

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	rotation: 0.15
    }
  }
  
  render() {
    return (
    	  <div>
          <input type="number" value={this.state.rotation * 100} min="0" max="2000" onChange={(e) => {
            this.setState({
            	rotation: e.currentTarget.value / 100
            })
          }} />
    	    <img 
          src="https://upload.wikimedia.org/wikipedia/commons/a/a1/Volkswagen_Logo_till_1995.svg" 
          className="rotating" 
          style={{
          	animation: `rotating ${this.state.rotation}ms linear infinite`
          }}/>
    	  </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))