cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              h5 Super fast display property animation
h1 Click Me!
.box.box1  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, quae obcaecati eligendi vero perspiciatis sit porro? Ea eos voluptas dignissimos animi quia explicabo amet facilis, velit voluptate aut, architecto sit!
.box.box2
.box.box3
.box.box1
.box.box2
.box.box3
.box.box1
.box.box2
.box.box3
.box.box1
.box.box2
.box.box3
.box.box1
.box.box2
.box.box3
.box.box1
.box.box2
.box.box3
.box.box1
.box.box2
.box.box3
.box.box1
.box.box2
.box.box3
.box.box1
.box.box2
.box.box3
.box.box1
.box.box2
.box.box3
.box.box1
.box.box2
.box.box3
.box.box1
.box.box2
.box.box3
.box.box1
.box.box2
.box.box3
.box.box1
.box.box2
.box.box3
.box.box1
.box.box2
.box.box3
.box.box1
.box.box2
.box.box3
.box.box1
.box.box2
.box.box3
.box.box1
.box.box2
.box.box3
.box.box1
.box.box2
.box.box3
.box.box1
.box.box2
.box.box3
.box.box1
.box.box2
.box.box3
.box.box1
.box.box2
.box.box3
.box.box1
.box.box2
.box.box3
.box.box1
.box.box2
.box.box3
.box.box1
.box.box2
.box.box3
.box.box1
.box.box2
.box.box3
            
          
!
            
              @import "nib"

.box
  transform-origin:0 0
  opacity:1
  margin-right:8px
  margin-bottom:8px
  display:inline-block
  overflow:hidden
.box1
  background:#f00
  width:80px
  height:40px
.box2
  background:#0f0
  width:40px
  height:80px
.box3
  background:#00f
  width:80px
  height:80px
.state2
  width:100%
  height:40px
  opacity:.5
  display:block
  margin-bottom:8px
.trans
  transition:1s
            
          
!
            
              //classList polyfill
(function () {

if (typeof window.Element === "undefined" || "classList" in document.documentElement) return;

var prototype = Array.prototype,
    push = prototype.push,
    splice = prototype.splice,
    join = prototype.join;

function DOMTokenList(el) {
  this.el = el;
  // The className needs to be trimmed and split on whitespace
  // to retrieve a list of classes.
  var classes = el.className.replace(/^\s+|\s+$/g,'').split(/\s+/);
  for (var i = 0; i < classes.length; i++) {
    push.call(this, classes[i]);
  }
};

DOMTokenList.prototype = {
  add: function(token) {
    if(this.contains(token)) return;
    push.call(this, token);
    this.el.className = this.toString();
  },
  contains: function(token) {
    return this.el.className.indexOf(token) != -1;
  },
  item: function(index) {
    return this[index] || null;
  },
  remove: function(token) {
    if (!this.contains(token)) return;
    for (var i = 0; i < this.length; i++) {
      if (this[i] == token) break;
    }
    splice.call(this, i, 1);
    this.el.className = this.toString();
  },
  toString: function() {
    return join.call(this, ' ');
  },
  toggle: function(token) {
    if (!this.contains(token)) {
      this.add(token);
    } else {
      this.remove(token);
    }

    return this.contains(token);
  }
};

window.DOMTokenList = DOMTokenList;

function defineElementGetter (obj, prop, getter) {
    if (Object.defineProperty) {
        Object.defineProperty(obj, prop,{
            get : getter
        });
    } else {
        obj.__defineGetter__(prop, getter);
    }
}

defineElementGetter(Element.prototype, 'classList', function () {
  return new DOMTokenList(this);
});

})();



var smoove=function(elements,action){
var toArray=function(a){return Array.prototype.slice.call(a)}

elements=toArray(elements)

var transform;
var dummyElement = document.createElement("i").style

if(!("transform" in dummyElement)){ 
  ["Moz","Webkit","Ms","O"].forEach(function(a){
  	if((a+"Transform") in dummyElement){transform=a+"Transform"}
	})
}else{transform="transform"};

if(!transform){action(elements);return false}
var transitionClass="trans"

var oldRects=elements.map(function(a){
  var r=a.getBoundingClientRect()
  return {top:r.top,left:r.left,width:r.width,height:r.height}
})
var oldOpacities=elements.map(function(a){
  return getComputedStyle(a).opacity
})

action(elements)

var newRects=elements.map(function(a){
  var r=a.getBoundingClientRect()
  return {top:r.top,left:r.left,width:r.width,height:r.height}
})
var newOpacities=elements.map(function(a){
  return getComputedStyle(a).opacity
})

var topDifs=elements.map(function(a,b){
    return oldRects[b].top-newRects[b].top;
})
var leftDifs=elements.map(function(a,b){
    return oldRects[b].left-newRects[b].left;
})
var widthDifs=elements.map(function(a,b){
    return oldRects[b].width/newRects[b].width;
})
var heightDifs=elements.map(function(a,b){
    return oldRects[b].height/newRects[b].height;
})
elements.forEach(function(a,b){
  var w=widthDifs[b];
  var h=heightDifs[b];
  a.style[transform]="translate("+(leftDifs[b])+"px,"+topDifs[b]+"px)  scale("+w+","+h+")";
	a.style.opacity=oldOpacities[b];
})

elements.forEach(function(a,b){
  	a.offsetWidth
	  a.classList.add(transitionClass)
    a.style[transform]="";
  	a.style.opacity="";
})

elements.forEach(function(a,b){
    a.addEventListener("transitionend",function(){
    a.classList.remove(transitionClass);
  })
})
}

var elements=document.querySelectorAll(".box");
onclick=function(){
  smoove(elements,function(elements){
    elements.forEach(function(a){
      a.classList.add("state2")
    })
  })
}
            
          
!
999px
Loading ..................

Console