barecss-power/less/_animation.less

A classless CSS framework (power) http://barecss.com

@import (reference) "config";


a, button, input, menu, menuitem, textarea, select, tag, th, tr, ul, ::before, ::after {
  transition: all 0.3s ease-in-out;
}


// shadow (1em)
.anim-shadow(@x) {
  &:hover, &:focus, &:active {
		box-shadow: 0 @x @x -@x rgba(0, 0, 0, 0.5);
	}
}


// underline
.anim-underline(@b) {
  position: relative;
	overflow: hidden;

	&::before {
		content: "";
		position: absolute;
		left: 51%;
		right: 51%;
		bottom: 0;
		z-index: -1;
		height: 4px;
		background: @b;
		transition-property: "left, right";
		transition-timing-function: ease-out;
	}

	&:hover, &:focus, &:active {
		&::before {
			left: 0;
			right: 0;
		}
  }
}

.underline { .anim-shadow(1em); }

// buzz
.buzz, .ripple {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(0.1em) translateZ(0);
  box-shadow: 0 0 0.1em rgba(0, 0, 0, 0);
}
@keyframes buzz {
  50% { transform: translateX(0.2em) rotate(2deg); }
  100% { transform: translateX(-0.2em) rotate(-2deg); }
}
.buzz:hover, .buzz:focus, .buzz:active {
  animation-name: buzz;
  animation-duration: 0.15s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

// ripple
@ripple-color: #e1e1e1;
.ripple {
  position: relative;
}
@keyframes ripple {
  100% {
    top: -0.75em;
    right: -0.75em;
    bottom: -0.75em;
    left: -0.75em;
    opacity: 0;
  }
}
.ripple::before {
  content: '';
  position: absolute;
  border: @ripple-color solid 0.4em;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  animation-duration: 1s;
}
.ripple:hover::before, .ripple:focus::before, .ripple:active::before {
  animation-name: ripple;
}