I make buttons

arranrp

CSS Animation

arranrp

Animations & Transitions 

arranrp

arranrp

@keyframes slide {
  from {
    left: 0;
  }
  to {
    left: 75%;
  }
}

.stage:hover .ball {
  animation-name: slide;
  animation-duration: 2s;
}

arranrp

@keyframes slide {
  0% {
    left: 0;
    top: 0;
  }
  50% {
    top: 50%;
  }
  100% {
    left: 75%;
    top: 0;
  }
}

.stage:hover .ball {
  animation-name: slide;
  animation-duration: 2s;
}

arranrp

@keyframes slide {
  0% {
    left: 0;
    top: 0;
  }
  50% {
    top: 50%;
  }
  100% {
    left: 75%;
    top: 0;
  }
}

.stage:hover .ball {
  animation-name: slide;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

arranrp

@keyframes slide {
  0% {
    left: 0;
    top: 0;
  }
  50% {
    top: 50%;
  }
  100% {
    left: 75%;
    top: 0;
  }
}

.stage:hover .ball {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate; 
}

arranrp

@keyframes slide {
  0% {
    left: 0;
    top: 0;
  }
  50% {
    top: 50%;
  }
  100% {
    left: 75%;
    top: 0;
  }
}

.stage:hover .ball {
  animation-name: slide;
  animation-duration: 2s;

  animation-timing-function: 
cubic-bezier (.13,-0.19,1,-0.24);

  animation-iteration-count: infinite;
  animation-direction: alternate; 
}

arranrp

.stage .ball:hover {
  animation-play-state: paused;
}

arranrp

@keyframes slide {
  0% {
    left: 0;
    top: 0;
  }
  50% {
    top: 50%;
    background: #51E5FF;

  }
  100% {
    left: 75%;
    top: 0;
    background: #EC368D;
  }
}

.stage:hover .ball {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

arranrp

@keyframes slide {
  0% {
    left: 0;
    top: 0;
    opacity: 1;
  }
  50% {
    top: 50%;
    background: #51E5FF;
    opacity: 0.75;

  }
  100% {
    left: 75%;
    top: 0;
    background: #EC368D;
    opacity: 1;
  }
}

Pixel pipeline 

arranrp

Paul Lewis         

arranrp

    aerotwist

arranrp

.stage:hover .tool {
  transform: translate(0, 0);
  opacity: 1;
  transition: 500ms ease-out;
}

.tool {
  opacity: 0;
  transform: translate(0, 75%);
  transition: all 800ms ease-out;
  will-change: transform;
  transform: translateZ(0);
}

Compositing Layer

arranrp

• Opacity
• Translate
• Rotate
• Scale
• Position
• Matrix

csstriggers.com

Compositing Layer

arranrp

.element {
  will-change: transform;
}