Skip to content

Instantly share code, notes, and snippets.

@khanetor

khanetor/app.css

Created October 26, 2017 19:11
Show Gist options
  • Save khanetor/13f9482e47910a7998773cc2b28ddadc to your computer and use it in GitHub Desktop.
Save khanetor/13f9482e47910a7998773cc2b28ddadc to your computer and use it in GitHub Desktop.
Download ZIP
Css transition demo
Raw
app.css
.rectangle {
width: 10em;
height: 10em;
}
.blue {
background-color: rgb(6, 152, 219);
-webkit-transition: background-color 1s;
-moz-transition: background-color 1s;
transition: background-color 1s;
}
.red {
background-color: rgb(219, 6, 6);
-webkit-transition: background-color 1s;
-moz-transition: background-color 1s;
transition: background-color 1s;
}
Raw
app.js
const block = document.getElementById('block')
const i = setInterval(function() {
block.classList.toggle("blue")
block.classList.toggle("red")
}, 1000)
setTimeout(function() {
clearInterval(i)
}, 10000)
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./app.css" />
</head>
<body>
<h1>Hello World!</h1>
<div id="block" class="rectangle blue"></div>
<script type="application/javascript" src="./app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment