CSS Resources - Splash

Grab n'

Go CSS Resources

.this-code-will {

make-your-page: look-dope;

}

Grab n' Go CSS Resources

The list below will help add css animations to your page and give it some extra flair. Add these approved code snippets to buttons, images, and other blocks as applicable.

Step 01

Copy CSS snippet from this page by clicking on the box you are hoping to mimic.

Step 02

Paste the snippet into Dev Tools: CSS. It's the first window you land on after clicking the wrench icon.

Step 03

Copy the property (in bold) and paste it into Properties: Custom Classes.

Hover Effects

grow

.grow {
transition: all .2s ease-in-out;
}
.grow:hover {
transform: scale(1.1);
}

sink

Emilee Kraus is a host of exceptional ability. Studies show that a vast majority of guests attending events by Emilee have been known to leave more elated than visitors to Santa's Workshop, The Lost of Continent of Atlantis, and the Fountain of Youth.

pulse

rotate

wobble

rotate

img-sidepan

shrink

.shrink {
transition: all .2s ease-in-out;
}
.shrink:hover, .shrink:focus, .shrink:active {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}

bounce out

ease

wipe fill

wiggle

drop

img-ease-color

.img-ease-color {
/* filter: url(filters.svg#grayscale); Firefox 3.5+ */
filter: gray; /* IE5+ */
-webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
-webkit-transition: all .5s ease-in-out;
}

.img-ease-color:hover {
filter: none;
-webkit-filter: grayscale(0);
}

img-blur

img-brighten

float

.float {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.float:hover, .float:focus, .float:active {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}

shake

squipple

shadow

zap

blink

img-tilt

.img-tilt {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.img-tilt:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}

Other Stuff

no footer

floating

knockout text

img-sidepan

box shadow

.shrink {
transition: all .2s ease-in-out;
}
.shrink:hover, .shrink:focus, .shrink:active {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}

multiply

.shrink {
transition: all .2s ease-in-out;
}
.shrink:hover, .shrink:focus, .shrink:active {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}

greyscale img

.shrink {
transition: all .2s ease-in-out;
}
.shrink:hover, .shrink:focus, .shrink:active {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}

img-ease-color

.img-ease-color:hover {
filter: none;
-webkit-filter: grayscale(0);
}

img-blur

img-brighten

img-tilt

all the colors

.shrink {
transition: all .2s ease-in-out;
}
.shrink:hover, .shrink:focus, .shrink:active {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}

rotate

.shrink {
transition: all .2s ease-in-out;
}
.shrink:hover, .shrink:focus, .shrink:active {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}

gradient bg

.shrink {
transition: all .2s ease-in-out;
}
.shrink:hover, .shrink:focus, .shrink:active {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}

Stay tuned for updates!

/* float */

.float {

display: inline-block;

vertical-align: middle;

-webkit-transform: translateZ(0);

transform: translateZ(0);

box-shadow: 0 0 1px rgba(0, 0, 0, 0);

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

-moz-osx-font-smoothing: grayscale;

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

-webkit-transition-property: transform;

transition-property: transform;

-webkit-transition-timing-function: ease-out;

transition-timing-function: ease-out;

}

.float:hover, .float:focus, .float:active {

-webkit-transform: translateY(-8px);

transform: translateY(-8px);

box-shadow: 0px 10px 15px 2px rgba(0, 0, 0, 0.18);

}

/*float*/

/*shrink*/

.shrink {
transition: all .2s ease-in-out;
}
.shrink:hover, .shrink:focus, .shrink:active {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}

/*shrink*/

/*grow*/

.grow {
transition: all .2s ease-in-out;
}
.grow:hover {
transform: scale(1.1);
}

/*grow*/

/*sink*/

.sink {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.sink:hover, .sink:focus, .sink:active {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}

/* sink */

/* bounce out */

.bounce-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.bounce-out:hover, .bounce-out:focus, .bounce-out:active {
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

/* bounce out*/

/* shake */

.shake:hover {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}

20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}

/*shake*/

/* Pulse Hover */

@-webkit-keyframes hvr-pulse {
25% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
75% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
}
@keyframes hvr-pulse {
25% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
75% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
}
.sp-hvr-pulse {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
}
.sp-hvr-pulse:hover, .sp-hvr-pulse:focus, .sp-hvr-pulse:active {
-webkit-animation-name: hvr-pulse;
animation-name: hvr-pulse;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}

/* Pulse Hover */

/*ease*/

.ease { transition: all .2s ease-in-out; }

/*ease*/

/* sqipple */

.sqipple {
border: 0 solid;
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
outline-offset: 0px;
outline: 1px solid;
outline-color: #595959;
text-shadow: none;
transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}

.sqipple:hover {
border: 1px solid;
outline-color: #595959;
outline-offset: 15px;
}

/* sqipple */

.hvr-grow-rotate {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}

.hvr-grow-rotate:hover, .hvr-grow-rotate:focus, .hvr-grow-rotate:active {
-webkit-transform: scale(1.1) rotate(4deg);
transform: scale(1.1) rotate(4deg);
}

/* Wipe Fill */

.wipe {
box-shadow: inset 0 0 0 0 #1B222B;
-webkit-transition: all ease 1s;
-moz-transition: all ease 1s;
transition: all ease 1s;
}
.wipe:hover {
box-shadow: inset 1500px 0 0 0 #1B222B
;
/*color:#2A53C1;*/

/* Wipe Fill */

/* shadow */

.shadowhover:hover{
box-shadow: 0px 0px 49px 0px rgba(0,0,0,0.75)

}

/* shadow */

/*wobble*/

@-webkit-keyframes hvr-wobble-to-bottom-right {
16.65% {
-webkit-transform: translate(8px, 8px);
transform: translate(8px, 8px);
}
33.3% {
-webkit-transform: translate(-6px, -6px);
transform: translate(-6px, -6px);
}
49.95% {
-webkit-transform: translate(4px, 4px);
transform: translate(4px, 4px);
}
66.6% {
-webkit-transform: translate(-2px, -2px);
transform: translate(-2px, -2px);
}
83.25% {
-webkit-transform: translate(1px, 1px);
transform: translate(1px, 1px);
}
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@keyframes hvr-wobble-to-bottom-right {
16.65% {
-webkit-transform: translate(8px, 8px);
transform: translate(8px, 8px);
}
33.3% {
-webkit-transform: translate(-6px, -6px);
transform: translate(-6px, -6px);
}
49.95% {
-webkit-transform: translate(4px, 4px);
transform: translate(4px, 4px);
}
66.6% {
-webkit-transform: translate(-2px, -2px);
transform: translate(-2px, -2px);
}
83.25% {
-webkit-transform: translate(1px, 1px);
transform: translate(1px, 1px);
}
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
.hvr-wobble-to-bottom-right {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
}
.hvr-wobble-to-bottom-right:hover, .hvr-wobble-to-bottom-right:focus, .hvr-wobble-to-bottom-right:active {
-webkit-animation-name: hvr-wobble-to-bottom-right;
animation-name: hvr-wobble-to-bottom-right;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

/*wobble*/

/*wiggle*/

@-webkit-keyframes hvr-wobble-top {
16.65% {
-webkit-transform: skew(-12deg);
transform: skew(-12deg);
}
33.3% {
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
49.95% {
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
66.6% {
-webkit-transform: skew(4deg);
transform: skew(4deg);
}
83.25% {
-webkit-transform: skew(-2deg);
transform: skew(-2deg);
}
100% {
-webkit-transform: skew(0);
transform: skew(0);
}
}
@keyframes hvr-wobble-top {
16.65% {
-webkit-transform: skew(-12deg);
transform: skew(-12deg);
}
33.3% {
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
49.95% {
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
66.6% {
-webkit-transform: skew(4deg);
transform: skew(4deg);
}
83.25% {
-webkit-transform: skew(-2deg);
transform: skew(-2deg);
}
100% {
-webkit-transform: skew(0);
transform: skew(0);
}
}
.hvr-wobble-top {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.hvr-wobble-top:hover, .hvr-wobble-top:focus, .hvr-wobble-top:active {
-webkit-animation-name: hvr-wobble-top;
animation-name: hvr-wobble-top;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

/*wiggle*/

/* zap */

@-webkit-keyframes hvr-buzz-out {
10% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
20% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
40% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
80% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform: translateX(1px) rotate(0);
transform: translateX(1px) rotate(0);
}
100% {
-webkit-transform: translateX(-1px) rotate(0);
transform: translateX(-1px) rotate(0);
}
}
@keyframes hvr-buzz-out {
10% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
20% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform: translateX(3px) rotate(2deg);
transform: translateX(3px) rotate(2deg);
}
40% {
-webkit-transform: translateX(-3px) rotate(-2deg);
transform: translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
60% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform: translateX(2px) rotate(1deg);
transform: translateX(2px) rotate(1deg);
}
80% {
-webkit-transform: translateX(-2px) rotate(-1deg);
transform: translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform: translateX(1px) rotate(0);
transform: translateX(1px) rotate(0);
}
100% {
-webkit-transform: translateX(-1px) rotate(0);
transform: translateX(-1px) rotate(0);
}
}
.hvr-buzz-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
}
.hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active {
-webkit-animation-name: hvr-buzz-out;
animation-name: hvr-buzz-out;
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}

/* zap */

/* Shutter Out Horizontal */

.hvr-shutter-out-horizontal {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-shutter-out-horizontal:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background:rgb(76, 93, 239);
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-shutter-out-horizontal:hover, .hvr-shutter-out-horizontal:focus, .hvr-shutter-out-horizontal:active {
color: white;
}
.hvr-shutter-out-horizontal:hover:before, .hvr-shutter-out-horizontal:focus:before, .hvr-shutter-out-horizontal:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}

/* Shutter Out Horizontal */

/* Shutter Vertical */

.hvr-bounce-to-bottom {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.hvr-bounce-to-bottom:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2098D1;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-bounce-to-bottom:hover, .hvr-bounce-to-bottom:focus, .hvr-bounce-to-bottom:active {
color: white;
}
.hvr-bounce-to-bottom:hover:before, .hvr-bounce-to-bottom:focus:before, .hvr-bounce-to-bottom:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/* Shutter Vertical */

/*blink*/

.blink{
animation: color-blink-1 1.5s infinite;
}
@keyframes color-blink-1 {
0%, 33%, 100% { opacity: 1;}
32% { opacity: 0.1;}
}
@keyframes color-blink-2 {
0%, 33%, 67%, 100% { opacity: 1;}
66% { opacity: 0.1;}
}
@keyframes color-blink-3 {
0%, 67% { opacity: 1;}
100% { opacity: 0.1;}
}

/*blink*/

/*no footer*/

#footer {display:none;}

/*no footer*/

/* shadow */

.shadow{

box-shadow: 0px 0px 49px 0px rgba(0,0,0,0.75)

}

/* shadow */

To edit shadow: http://www.cssmatic.com/box-shadow

.gradient {

background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);

}

.blended {

mix-blend-mode: screen;

}

/*floating*/

.floating{
float: left;
-webkit-animation-name: Floatingx;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-name: Floating;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in-out;
margin-left: 30px;
margin-top: 5px;

}

@-webkit-keyframes Floatingx{
from {-webkit-transform:translate(0, 0px);}
65% {-webkit-transform:translate(0, 15px);}
to {-webkit-transform: translate(0, -0px); }
}

@-moz-keyframes Floating{
from {-moz-transform:translate(0, 0px);}
65% {-moz-transform:translate(0, 15px);}
to {-moz-transform: translate(0, -0px);}
}

/*floating*/

.crawl{
animation: 40s ease-out 0s slideInFromRight infinite;

}

@keyframes slideInFromRight {
0% {
transform: translateX(-200%);
}
100% {
transform: translateX(350%);
}

.allthecolors {
margin: 1rem;
text-align: center;
border: 1.5rem solid;
animation: allTheColors 10s infinite;
}

.allTheColors:nth-child(1) { animation-delay: .0s; opacity: 1; }
.allTheColors:nth-child(2) { animation-delay: .3s; opacity: .8; }
.allTheColors:nth-child(3) { animation-delay: .6s; opacity: .6; }
.allTheColors:nth-child(4) { animation-delay: .9s; opacity: .4; }
.allTheColors:nth-child(5) { animation-delay: 1.2s; opacity: .2; }
.allTheColors:nth-child(6) { animation-delay: 1.5s; opacity: .1; }
.allTheColors:nth-child(7) { animation-delay: 1.8s; opacity: .075; }
.allTheColors:nth-child(8) { animation-delay: 2.1s; opacity: .050; }
.allTheColors:nth-child(9) { animation-delay: 2.4s; opacity: .025; }
.allTheColors:nth-child(10) { animation-delay: 2.7s; opacity: .000; }

@keyframes allTheColors {
5% { color: #ff6700; border-color: #ff6700; }
25% { color: #8800ff; border-color: #8800ff; }
50% { color: #001fff; border-color: #001fff; }
75% { color: #00ffff; border-color: #00ffff; }

/*img-ease-color*/

.img-ease-color:hover {
filter: none;
-webkit-filter: grayscale(0);
}
/*img-ease-color*/

.style-outline {
-webkit-text-stroke: 2px #FFFFFF;
}

.knockout-screen {
mix-blend-mode: screen;
}

.knockout-multiply {
mix-blend-mode: multiply;
}

CONTACT THE ORGANIZER

Google Outlook iCal Yahoo

Sorry, RSVPs have closed.