IvanaSays

.box {
    box-shadow: 1px 1px 1px rgba(0,0,0,.5);
    transition: .2s;
}
.active {
   box-shadow: 1px 1px 1px rgba(0,0,0,1);
}

IvanaSays

var wrapperHeight = wrapper.getBoundingClientRect().height + 'px';
boxes.forEach(box => {
    box.style.transform = “translateY(“ + wrapperHeight + “px)”;
})

IvanaSays

element.addEventListener('touchmove', doSomething(), { passive: true });

IvanaSays

.box {
   contain: style; //will limit the scope of styles to this element and its children
}

IvanaSays

boxes.forEach(box => {
    box.style.transform = “translateY(“ + wrapper.getBoundingClientRect().height + “px)”;
})

IvanaSays

function doSomething() {
    requestAnimationFrame(doSomething);
    // Do stuff
}
doSomething();

IvanaSays

var box = document.getElementById("box")
box.addEventListener("click", function(){
    box.classList.toggle("class-name");
});

IvanaSays

@keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
.box {
   animation-name: spin;
   animation-duration: 3ms;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
}

IvanaSays

.box {
  will-change: auto;
}

IvanaSays

.box {
   position: relative;
}
.box:before {
   content: “”;
   box-shadow: 1px 1px 1px rgb(0,0,0);
   opacity: .5;
   transition: .2s;
   position: absolute;
   width: 100%;