erikjung · May 1, 2013 05:59
diff --git a/dabblet.css b/dabblet.css
 /**
 * Animation End Event
 */

 @keyframes remove {
  from {
    scale(1, 1);
  }
  to {
    scale(0, 0);
    opacity: .2;
  }
 }

 .removed {
  animation-name: remove;
  animation-duration: 360ms;
  animation-fill-mode: both;
 }

 .foo {
  background: pink;
  border-radius: 1em;
  width: 10em;
  height: 10em;
 }
diff --git a/dabblet.html b/dabblet.html
 <div class="foo"></div>
diff --git a/dabblet.js b/dabblet.js
 setTimeout(function () {
  var foo = document.querySelector('.foo')
  
  foo.addEventListener('webkitAnimationEnd', function () {
    console.log('Animation End')
    foo.parentNode.removeChild(foo);
  })
  
  foo.classList.add('removed')
 }, 3000)
diff --git a/settings.json b/settings.json
 {"view":"split","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
	setTimeout(function () {
	var foo = document.querySelector('.foo')

	foo.addEventListener('webkitAnimationEnd', function () {
	console.log('Animation End')
	foo.parentNode.removeChild(foo);
	})

	foo.classList.add('removed')
	}, 3000)
No results found