anonymoussc · August 29, 2015 14:25
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
    <title>CSS Transition animation</title>
    <link href="style.css" rel="stylesheet"/>
 </head>

 <body>
    <div class="cssanimationTimes">
        Element with cssanimationTimes class
    </div>
    <button id="trigger">Trigger animation</button>
    <button id="triggerReset">Reset animation</button>
    <script src="script.js"></script>
 </body>

 </html>
diff --git a/script.js b/script.js
 document.getElementById('trigger').addEventListener('click', function () {
    var element = document.getElementsByClassName('cssanimationTimes')[0];
    // Append classes red and large, to change the background color to red and the width to 300px
    element.className = element.className + " red large";
 });

 document.getElementById('triggerReset').addEventListener('click', function () {
    var element = document.getElementsByClassName('cssanimationTimes')[0];
    // Reset
    element.className = "cssanimationTimes";
 });
diff --git a/style.css b/style.css
 .cssanimationTimes {
    transition-property : width, background-color;
    transition-duration : 2s, 10s;
    width               : 100px;
 }

 .large {
    width : 300px;
 }

 .red {
    background-color : #FF0099;
 }
	<!DOCTYPE html>
	<html>

	<head>
	<title>CSS Transition animation</title>
	<link href="style.css" rel="stylesheet"/>
	</head>

	<body>
	<div class="cssanimationTimes">
	Element with cssanimationTimes class
	</div>
	<button id="trigger">Trigger animation</button>
	<button id="triggerReset">Reset animation</button>
	<script src="script.js"></script>
	</body>

	</html>
	document.getElementById('trigger').addEventListener('click', function () {
	var element = document.getElementsByClassName('cssanimationTimes')[0];
	// Append classes red and large, to change the background color to red and the width to 300px
	element.className = element.className + " red large";
	});

	document.getElementById('triggerReset').addEventListener('click', function () {
	var element = document.getElementsByClassName('cssanimationTimes')[0];
	// Reset
	element.className = "cssanimationTimes";
	});
	.cssanimationTimes {
	transition-property : width, background-color;
	transition-duration : 2s, 10s;
	width : 100px;
	}

	.large {
	width : 300px;
	}

	.red {
	background-color : #FF0099;
	}