Skip to content

Instantly share code, notes, and snippets.

/index.html

Created October 15, 2016 22:23
Show Gist options
  • Save anonymous/e9b997bf08231b5be669c2a9fc68f52b to your computer and use it in GitHub Desktop.
Save anonymous/e9b997bf08231b5be669c2a9fc68f52b to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/qibilaxehi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
@keyframes pulse {
from {
transform: scale(1);
transform-origin: center center;
animation-timing-function: ease-out;
}
25% {
transform: scale(1.1);
animation-timing-function: ease-in;
}
50% {
transform: scale(1);
animation-timing-function: ease-out;
}
74% {
transform: scale(1.05);
animation-timing-function: ease-in;
}
to {
transform: scale(1);
animation-timing-function: ease-out;
}
}
/* .pulse {
animation: pulse 2s
} */
</style>
</head>
<body>
<a href="#">click me</a>
<h3>We are gonna be animated</h3>
<h3>We are gonna be animated</h3>
<h3>We are gonna be animated</h3>
<h3>We are gonna be animated</h3>
<h3>We are gonna be animated</h3>
<h3>We are gonna be animated</h3>
<script id="jsbin-javascript">
function animate (el, animationName, durationMs) {
return new Promise(res => {
const fn = e => {
if (!e.target.isEqualNode(el) || e.animationName !== animationName) return;
el.removeEventListener('animationend', fn)
el.removeEventListener('webkitAnimationEnd', fn)
el.style.animationDuration = ''
el.style.webkitAnimationDuration = ''
el.style.animationName = ''
el.style.webkitAnimationName = ''
res(el)
}
el.addEventListener('animationend', fn)
el.addEventListener('webkitAnimationEnd', fn)
el.style.animationDuration = durationMs + 'ms'
el.style.webkitAnimationDuration = durationMs + 'ms'
el.style.animationName = animationName
el.style.webkitAnimationName = animationName
})
}
document.querySelector('a').addEventListener('click', e => {
let queue = Promise.resolve()
for (let h3 of document.querySelectorAll('h3')) {
queue = queue.then(() => animate(h3, 'pulse', 1000))
}
queue = queue.then(() => alert('done'))
})
</script>
<script id="jsbin-source-css" type="text/css">@keyframes pulse {
from {
transform: scale(1);
transform-origin: center center;
animation-timing-function: ease-out;
}
25% {
transform: scale(1.1);
animation-timing-function: ease-in;
}
50% {
transform: scale(1);
animation-timing-function: ease-out;
}
74% {
transform: scale(1.05);
animation-timing-function: ease-in;
}
to {
transform: scale(1);
animation-timing-function: ease-out;
}
}
/* .pulse {
animation: pulse 2s
} */</script>
<script id="jsbin-source-javascript" type="text/javascript">function animate (el, animationName, durationMs) {
return new Promise(res => {
const fn = e => {
if (!e.target.isEqualNode(el) || e.animationName !== animationName) return;
el.removeEventListener('animationend', fn)
el.removeEventListener('webkitAnimationEnd', fn)
el.style.animationDuration = ''
el.style.webkitAnimationDuration = ''
el.style.animationName = ''
el.style.webkitAnimationName = ''
res(el)
}
el.addEventListener('animationend', fn)
el.addEventListener('webkitAnimationEnd', fn)
el.style.animationDuration = durationMs + 'ms'
el.style.webkitAnimationDuration = durationMs + 'ms'
el.style.animationName = animationName
el.style.webkitAnimationName = animationName
})
}
document.querySelector('a').addEventListener('click', e => {
let queue = Promise.resolve()
for (let h3 of document.querySelectorAll('h3')) {
queue = queue.then(() => animate(h3, 'pulse', 1000))
}
queue = queue.then(() => alert('done'))
})</script></body>
</html>
Raw
jsbin.qibilaxehi.css
@keyframes pulse {
from {
transform: scale(1);
transform-origin: center center;
animation-timing-function: ease-out;
}
25% {
transform: scale(1.1);
animation-timing-function: ease-in;
}
50% {
transform: scale(1);
animation-timing-function: ease-out;
}
74% {
transform: scale(1.05);
animation-timing-function: ease-in;
}
to {
transform: scale(1);
animation-timing-function: ease-out;
}
}
/* .pulse {
animation: pulse 2s
} */
Raw
jsbin.qibilaxehi.js
function animate (el, animationName, durationMs) {
return new Promise(res => {
const fn = e => {
if (!e.target.isEqualNode(el) || e.animationName !== animationName) return;
el.removeEventListener('animationend', fn)
el.removeEventListener('webkitAnimationEnd', fn)
el.style.animationDuration = ''
el.style.webkitAnimationDuration = ''
el.style.animationName = ''
el.style.webkitAnimationName = ''
res(el)
}
el.addEventListener('animationend', fn)
el.addEventListener('webkitAnimationEnd', fn)
el.style.animationDuration = durationMs + 'ms'
el.style.webkitAnimationDuration = durationMs + 'ms'
el.style.animationName = animationName
el.style.webkitAnimationName = animationName
})
}
document.querySelector('a').addEventListener('click', e => {
let queue = Promise.resolve()
for (let h3 of document.querySelectorAll('h3')) {
queue = queue.then(() => animate(h3, 'pulse', 1000))
}
queue = queue.then(() => alert('done'))
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment