Cacher is the code snippet organizer for pro developers

 	

cubic-bezier(.07,.95,0,1)

img
  &:hover
    animation enlarge .3 forward
    
@keyframes enlarge
  0% {transform: scale(1)}
  40% {transform: scale(1.15)}
  100% {transform: scale(1.05)}

background BaDa55

gold
orange
#b94949  /* red */

background: linear-gradient(tomato, crimson);

@keyframes splashit {
 100 % { background-position: 0 -3046px;} 
}

.splash {
  background: url(.xxx.svg);
  animation: splashit 1.8s steps(21) infinite;
}

/* fallback */
.no-svg .splash {
  background: url('splash.png');
}

background: url("XXX") no-repeat center center fixed;
background-size: cover;

body,html {
  width:100%;
  display: grid;
}

span {
  margin: auto;
}

transform-origin: 50% 50%;

// you can take cx and cy values of the SVG circle

transition: width .35s linear

&:active 
  animation: hi 0.5s ease 1s backwards

@keyframes hi {
  from {
    transform: translate3d(-200px, 0, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

/* Nice effect for hover link - it fills the background*/ 

box-shadow: inset 0 -0.85em 0 #000

/* 4 columns */
display: grid
grid-template-columns: repeat(4, 1fr)

@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,600'
@import 'https://fonts.googleapis.com/css?family=Roboto:400,500|Roboto+Mono:400,500'
@import 'https://fonts.googleapis.com/css?family=Special+Elite|Material+Icons'

display: flex
justify-content: center
align-items: center


height: 100vh;
position: relative;

* {
  box-sizing: border-box;
}

transform-box: fill-box

/* Accelerate animations*/

transform: translate3d(0,0,0)