/*ANIMATIONS*/ tr.new-item, li.new-item { opacity:0; -webkit-animation:fadeIn .1s linear forwards; -o-animation:fadeIn .1s linear forwards; animation:fadeIn .1s linear forwards } @keyframes fadeIn { to { opacity:1 } } @keyframes openspace { to { height: auto } } tr.removed-item, li.removed-item { -webkit-animation: removed-item-animation .3s cubic-bezier(.55,-0.04,.91,.94) forwards; -o-animation: removed-item-animation .3s cubic-bezier(.55,-0.04,.91,.94) forwards; animation: removed-item-animation .3s cubic-bezier(.55,-0.04,.91,.94) forwards } @keyframes removed-item-animation { from { opacity: 1; } to { opacity: 0 } } @-webkit-keyframes new-item-animation { from { opacity: 0; -webkit-transform: scale(0); transform: scale(0) } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } } @-o-keyframes new-item-animation { from { opacity: 0; -o-transform: scale(0); transform: scale(0) } to { opacity: 1; -o-transform: scale(1); transform: scale(1) } } @-webkit-keyframes openspace { to { height: auto } } @-o-keyframes openspace { to { height: auto } } @-webkit-keyframes removed-item-animation { from { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } to { -webkit-transform: scale(0); transform: scale(0); opacity: 0 } } @-o-keyframes removed-item-animation { from { opacity: 1; -o-transform: scale(1); transform: scale(1) } to { -o-transform: scale(0); transform: scale(0); opacity: 0 } }