Cacher is the code snippet organizer for pro developers

.btn {
  transition: background .2s ease-in, color .2s ease-in, transform .2s ease-out;
  // transition determins what happens when certain properties change (ex. see :hover below )
  

  &:hover {
    background: white;
    color: $navy;
    transform: scale(1.1);
    // transforms work be adjusting the size or shape of the item
    
  }
}

// keyframes allow you to determine teh timing and what happens in custom animations 
@keyframes test {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
  // or you can use percentages 
}