polestar-icons/lib/css/animate.css

Polestar UI Icons

/* keyframes */
/* Spin */
@keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(0deg);
		transform: rotate(359deg);
	}
}

/* Pulse Spin */
@-webkit-keyframes fa-spin {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}
@keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

/* Wrenching */
@keyframes wrench {
	0% {
		transform: rotate(-12deg);
	}
	8% {
		transform: rotate(12deg);
	}
	10% {
		transform: rotate(24deg);
	}
	18% {
		transform: rotate(-24deg);
	}
	20% {
		transform: rotate(-24deg);
	}
	28% {
		transform: rotate(24deg);
	}
	30% {
		transform: rotate(24deg);
	}
	38% {
		transform: rotate(-24deg);
	}
	40% {
		transform: rotate(-24deg);
	}
	48% {
		transform: rotate(24deg);
	}
	50% {
		transform: rotate(24deg);
	}
	58% {
		transform: rotate(-24deg);
	}
	60% {
		transform: rotate(-24deg);
	}
	68% {
		transform: rotate(24deg);
	}
	75%, 100% {
		transform: rotate(0deg);
	}
}

/* Bell */
@keyframes ring {
	0% {
		transform: rotate(-15deg);
	}
	2% {
		transform: rotate(15deg);
	}
	4% {
		transform: rotate(-18deg);
	}
	6% {
		transform: rotate(18deg);
	}
	8% {
		transform: rotate(-22deg);
	}
	10% {
		transform: rotate(22deg);
	}
	12% {
		transform: rotate(-18deg);
	}
	14% {
		transform: rotate(18deg);
	}
	16% {
		transform: rotate(-12deg);
	}
	18% {
		transform: rotate(12deg);
	}
	20%, 100% {
		transform: rotate(0deg);
	}
}

/* Vertical */
@keyframes vertical {
	0% {
		transform: translate(0,-3px);
	}
	4% {
		transform: translate(0,3px);
	}
	8% {
		transform: translate(0,-3px);
	}
	12% {
		transform: translate(0,3px);
	}
	16% {
		transform: translate(0,-3px);
	}
	20% {
		transform: translate(0,3px);
	}
	22%, 100% {
		transform:translate(0,0)
	}
}

/* Horizontal */
@keyframes horizontal {
	0% {
		transform: translate(0,0);
	}
	6% {
		transform: translate(5px,0);
	}
	12% {
		transform: translate(0,0);
	}
	18% {
		transform: translate(5px,0);
	}
	24% {
		transform: translate(0,0);
	}
	30% {
		transform: translate(5px,0);
	}
	36%, 100% {
		transform: translate(0,0);
	}
}

/* Flashing */
@keyframes flash {
	0%, 100%, 50% {
		opacity: 1;
	}
	25%, 75% {
		opacity: 0;
	}
}

/* Bounce */
@keyframes bounce {
	0%, 10%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-15px);
	}
	60% {
		transform: translateY(-15px);
	}
}

/* Float */
@keyframes float {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-6px);
	}
	100% {
		transform: translateY(0);
	}
}

/* Pulse */
@keyframes pulse {
	0% {
		transform: scale(1.1);
	}
 	50% {
		transform: scale(0.8);
	}
 	100% {
		transform: scale(1.1);
	}
}

/* Tada */
@keyframes tada {
	0% {
		transform: scale(1);
	}
	10%, 20% {
		transform: scale(.9) rotate(-8deg);
	}
	30%, 50%, 70% {
		transform: scale(1.3) rotate(8deg);
	}
	40%, 60% {
		transform: scale(1.3) rotate(-8deg);
	}
	80%, 100% {
		transform:scale(1) rotate(0);
	}
}

/* Passing */
@keyframes passing {
	0% {
		transform: translateX(-50%);
		opacity: 0;
	}
	50% {
		transform: translateX(0%);
		opacity: 1;
	}
	100% {
		transform: translateX(50%);
		opacity:0;
	}
}

/* Passing Reverse */

@keyframes passing-reverse {
	0% {
		transform: translateX(50%);
		opacity: 0;
	}
	50% {
		transform: translateX(0%);
		opacity: 1;
	}
	100% {
		transform: translateX(-50%);
		opacity: 0;
	}
}

/* Burst */
@keyframes burst {
	0% {
		opacity: 0.6;
	}
	50% {
		transform: scale(1.8);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

/* Falling */
@keyframes falling {
    0% {
		transform: translateY(-50%);
		opacity:0;
	}
    50% {
		transform: translateY(0%);
		opacity: 1;
	}
    100% {
		transform: translateY(50%);
		opacity:0;
	}
}

.polestar-icon {
    display: inline-block;
    font: normal normal normal 14px/1 polestar;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Style Sheet */
/* Spin */
.ps-spin.animated,
.ps-spin.animated-hover:hover,
.ps-parent.animated-hover:hover > .ps-spin {
	animation: spin 1.5s linear infinite;
}
.ps-spin.animated.ps-fast,
.ps-spin.animated-hover.ps-fast:hover,
.ps-parent.animated-hover:hover > .ps-spin.ps-fast {
	animation: spin 0.7s linear infinite;
}
.ps-spin.animated.ps-slow,
.ps-spin.animated-hover.ps-slow:hover,
.ps-parent.animated-hover:hover > .ps-spin.ps-slow {
	animation: spin 2.2s linear infinite;
}

/* Pulse Spin */
.ps-spin-pulse.animated,
.ps-spin-pulse.animated-hover:hover,
.ps-parent.animated-hover:hover > .ps-spin-pulse {
	-webkit-animation: fa-spin 1s infinite steps(8);
    animation: fa-spin 1.5s infinite steps(8);
}
.ps-spin-pulse.animated.ps-fast,
.ps-spin-pulse.animated-hover.ps-fast:hover,
.ps-spin-pulse.animated-hover:hover > .ps-spin-pulse.ps-fast {
	-webkit-animation: fa-spin 1s infinite steps(8);
    animation: fa-spin 0.7s infinite steps(8);
}
.ps-spin-pulse.animated.ps-slow,
.ps-spin-pulse.animated-hover.ps-slow:hover,
.ps-parent.animated-hover:hover > .ps-spin-pulse.ps-slow {
	-webkit-animation: fa-spin 1s infinite steps(8);
    animation: fa-spin 2.2s infinite steps(8);
}

/* Wrenching */
.ps-wrench.animated,
.ps-wrench.animated-hover:hover,
.ps-parent.animated-hover:hover > .ps-wrench {
	animation: wrench 2.5s ease infinite;
	transform-origin-x: 90%;
	transform-origin-y: 35%;
	transform-origin-z: initial;
}
.ps-wrench.animated.ps-fast,
.ps-wrench.animated-hover.ps-fast:hover,
.ps-parent.animated-hover:hover > .ps-wrench.ps-fast {
	animation: wrench 1.2s ease infinite;
}
.ps-wrench.animated.ps-slow,
.ps-wrench.animated-hover.ps-slow:hover,
.ps-parent.animated-hover:hover > .ps-wrench.ps-slow {
	animation: wrench 3.7s ease infinite;
}

/* Bell */
.ps-ring.animated,
.ps-ring.animated-hover:hover,
.ps-parent.animated-hover:hover > .ps-ring {
	animation: ring 2s ease infinite;
	transform-origin-x: 50%;
	transform-origin-y: 0px;
	transform-origin-z: initial;
}
.ps-ring.animated.ps-fast,
.ps-ring.animated-hover.ps-fast:hover,
.ps-parent.animated-hover:hover > .ps-ring.ps-fast {
	animation: ring 1s ease infinite;
}
.ps-ring.animated.ps-slow,
.ps-ring.animated-hover.ps-slow:hover,
.ps-parent.animated-hover:hover > .ps-ring.ps-slow {
	animation: ring 3s ease infinite;
}

/* Vertical */
.ps-vertical.animated,
.ps-vertical.animated-hover:hover,
.ps-parent.animated-hover:hover > .ps-vertical {
	animation: vertical 2s ease infinite;
}
.ps-vertical.animated.ps-fast,
.ps-vertical.animated-hover.ps-fast:hover,
.ps-parent.animated-hover:hover > .ps-vertical.ps-fast {
	animation: vertical 1s ease infinite;
}
.ps-vertical.animated.ps-slow,
.ps-vertical.animated-hover.ps-slow:hover,
.ps-parent.animated-hover:hover > .ps-vertical.ps-slow {
	animation: vertical 4s ease infinite;
}

/* Horizontal */
.ps-horizontal.animated,
.ps-horizontal.animated-hover:hover,
.ps-parent.animated-hover:hover > .ps-horizontal {
	animation: horizontal 2s ease infinite;
}
.ps-horizontal.animated.ps-fast,
.ps-horizontal.animated-hover.ps-fast:hover,
.ps-parent.animated-hover:hover > .ps-horizontal.ps-fast {
	animation: horizontal 1s ease infinite;
}
.ps-horizontal.animated.ps-slow,
.ps-horizontal.animated-hover.ps-slow:hover,
.ps-parent.animated-hover:hover > .ps-horizontal.ps-slow {
	animation: horizontal 3s ease infinite;
}

/* Flashing */
.ps-flash.animated,
.ps-flash.animated-hover:hover,
.ps-parent.animated-hover:hover > .ps-flash {
	animation: flash 2s ease infinite;
}
.ps-flash.animated.ps-fast,
.ps-flash.animated-hover.ps-fast:hover,
.ps-parent.animated-hover:hover > .ps-flash.ps-fast {
	animation: flash 1s ease infinite;
}
.ps-flash.animated.ps-slow,
.ps-flash.animated-hover.ps-slow:hover,
.ps-parent.animated-hover:hover > .ps-flash.ps-slow {
	animation: flash 3s ease infinite;
}

/* Bounce */
.ps-bounce.animated,
.ps-bounce.animated-hover:hover,
.ps-parent.animated-hover:hover > .ps-bounce {
	animation: bounce 2s ease infinite;
}
.ps-bounce.animated.ps-fast,
.ps-bounce.animated-hover.ps-fast:hover,
.ps-parent.animated-hover:hover > .ps-bounce.ps-fast {
	animation: bounce 1s ease infinite;
}
.ps-bounce.animated.ps-slow,
.ps-bounce.animated-hover.ps-slow:hover,
.ps-parent.animated-hover:hover > .ps-bounce.ps-slow {
	animation: bounce 3s ease infinite;
}

/* Float */
.ps-float.animated,
.ps-float.animated-hover:hover,
.ps-parent.animated-hover:hover > .ps-float {
	animation: float 2s linear infinite;
}
.ps-float.animated.ps-fast,
.ps-float.animated-hover.ps-fast:hover,
.ps-parent.animated-hover:hover > .ps-float.ps-fast {
	animation: float 1s linear infinite;
}
.ps-float.animated.ps-slow,
.ps-float.animated-hover.ps-slow:hover,
.ps-parent.animated-hover:hover > .ps-float.ps-slow {
	animation: float 3s linear infinite;
}

/* Pulse */
.ps-pulse.animated,
.ps-pulse.animated-hover:hover,
.ps-parent.animated-hover:hover > .ps-pulse {
	animation: pulse 2s linear infinite;
}
.ps-pulse.animated.ps-fast,
.ps-pulse.animated-hover.ps-fast:hover,
.ps-parent.animated-hover:hover > .ps-pulse.ps-fast {
	animation: pulse 1s linear infinite;
}
.ps-pulse.animated.ps-slow,
.ps-pulse.animated-hover.ps-slow:hover,
.ps-parent.animated-hover:hover > .ps-pulse.ps-slow {
	animation: pulse 3s linear infinite;
}

/* Tada */
.ps-tada.animated,
.ps-tada.animated-hover:hover,
.ps-parent.animated-hover:hover > .ps-tada {
	animation: tada 2s linear infinite;
}
.ps-tada.animated.ps-fast,
.ps-tada.animated-hover.ps-fast:hover,
.ps-parent.animated-hover:hover > .ps-tada.ps-fast {
	animation: tada 1s linear infinite;
}
.ps-tada.animated.ps-slow,
.ps-tada.animated-hover.ps-slow:hover,
.ps-parent.animated-hover:hover > .ps-tada.ps-slow {
	animation: tada 3s linear infinite;
}

/* Passing */
.ps-passing.animated,
.ps-passing.animated-hover:hover,
.ps-parent.animated-hover:hover > .ps-passing {
	animation: passing 2s linear infinite;
}
.ps-passing.animated.ps-fast,
.ps-passing.animated-hover.ps-fast:hover,
.ps-parent.animated-hover:hover > .ps-passing.ps-fast {
	animation: passing 1s linear infinite;
}
.ps-passing.animated.ps-slow,
.ps-passing.animated-hover.ps-slow:hover,
.ps-parent.animated-hover:hover > .ps-passing.ps-slow {
	animation: passing 3s linear infinite;
}

/* Passing Reverse */
.ps-passing-reverse.animated,
.ps-passing-reverse.animated-hover:hover,
.ps-parent.animated-hover:hover > .ps-passing-reverse {
	animation: passing-reverse 2s linear infinite;
}
.ps-passing-reverse.animated.ps-fast,
.ps-passing-reverse.animated-hover.ps-fast:hover,
.ps-parent.animated-hover:hover > .ps-passing-reverse.ps-fast {
	animation: passing-reverse 1s linear infinite;
}
.ps-passing-reverse.animated.ps-slow,
.ps-passing-reverse.animated-hover.ps-slow:hover,
.ps-parent.animated-hover:hover > .ps-passing-reverse.ps-slow {
	animation: passing-reverse 3s linear infinite;
}

/* Burst */
.ps-burst.animated,
.ps-burst.animated-hover:hover,
.ps-parent.animated-hover:hover > .ps-burst {
	animation: burst 2s infinite linear
}
.ps-burst.animated.ps-fast,
.ps-burst.animated-hover.ps-fast:hover,
.ps-parent.animated-hover:hover > .ps-burst.ps-fast {
	animation: burst 1s infinite linear
}
.ps-burst.animated.ps-slow,
.ps-burst.animated-hover.ps-slow:hover,
.ps-parent.animated-hover:hover > .ps-burst.ps-slow {
	animation: burst 3s infinite linear
}

/* Falling */
.ps-falling.animated,
.ps-falling.animated-hover:hover,
.ps-parent.animated-hover:hover > .ps-falling {
	animation: falling 2s linear infinite;
}
.ps-falling.animated.ps-fast,
.ps-falling.animated-hover.ps-fast:hover,
.ps-parent.animated-hover:hover > .ps-falling.ps-fast {
	animation: falling 1s linear infinite;
}
.ps-falling.animated.ps-slow,
.ps-falling.animated-hover.ps-slow:hover,
.ps-parent.animated-hover:hover > .ps-falling.ps-slow {
	animation: falling 3s linear infinite;
}

/* SHAKE */
.ps-shake.animated,
.ps-shake.animated-hover:hover,
.ps-parent.animated-hover:hover > .ps-shake {
	animation: wrench 2.5s ease infinite;
}
.ps-shake.animated.ps-fast,
.ps-shake.animated-hover.ps-fast:hover,
.ps-parent.animated-hover:hover > .ps-shake.ps-fast {
	animation: wrench 1.2s ease infinite;
}
.ps-shake.animated.ps-slow,
.ps-shake.animated-hover.ps-slow:hover,
.ps-parent.animated-hover:hover > .ps-shake.ps-slow {
	animation: wrench 3.7s ease infinite;
}