The internet can be a pretty boring place at times. How often have you been searching for a service or product only to become frustrated or bored? Flicking through sites like a zombie looking for something to spark your imagination. a Website should be engaging! Sure, their main purpose is to convey information or get you to buy something, but there’s no reason why they can’t be super slick whilst doing it.

Studies have proven that users are more forgiving of errors and problems when a site looks beautiful or offers a pleasing using experience.

CSS3 is a blessing

The release of CSS3 gave web designers a whole new arsenal of toys and tricks to use, yet there are few websites out there that implement any of these techniques. Subtle animations can be used to draw the user’s eye and bring attention to an important element on the page. Similar effects can be used to make buttons or CTAs more interactive. If implemented correctly animations and transitions can completely change the feel of a website.

Below are 9 simple techniques that can be used to make your website feel more interactive, increase click through rates on important elements and generally make the internet a better place.

Looping Animations

The below animations can be used to highlight a call to action or important area. These animations will loop continuously.

Pulsate

/*
pulsate
*/
.pulsate {
animation-name: pulsate;
-webkit-animation-name: pulsate;animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}@keyframes pulsate {
0% {
transform: scale(0.9);
opacity: 0.7;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.9);
opacity: 0.7;
}
}@-webkit-keyframes pulsate {
0% {
-webkit-transform: scale(0.95);
opacity: 0.7;
}
50% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0.95);
opacity: 0.7;
}
}

Hover

/*
Hover
*/
.hover{
animation-name: hover;
-webkit-animation-name: hover;animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}@keyframes hover {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(8%);
}
100% {
transform: translateY(0%);
}
}@-webkit-keyframes hover {
0% {
-webkit-transform: translateY(0%);
}
50% {
-webkit-transform: translateY(8%);
}
100% {
-webkit-transform: translateY(0%);
}
}

Wobble

/*
Wobble
*/
.wobble{
animation-name: wobble;
-webkit-animation-name: wobble;animation-duration: 2.5s;
-webkit-animation-duration: 2.5s;animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}@keyframes wobble {
0% {
transform: rotate(-4deg);
}
50% {
transform: rotate(4deg);
}
100% {
transform: rotate(-4deg);
}
}@-webkit-keyframes wobble {
0% {
-webkit-transform: rotate(-4deg);
}
50% {
-webkit-transform: rotate(4deg);
}
100% {
-webkit-transform: rotate(-4deg);
}
}

 

Entrance Animations

The below animations can be used on page load or as an element comes into view to draw the users attention to an important area.

Note: So that these animations can be viewed easily they have been set to loop. The css code provided beside the animation will not loop.

Slide from top

/*
slideFromTop
*/
.slideFromTop {
animation-name: slideFromTop;
-webkit-animation-name: slideFromTop;animation-duration: 1s;
-webkit-animation-duration: 1s;animation-timing-function: ease;
-webkit-animation-timing-function: ease;visibility: visible !important;
}@keyframes slideFromTop {
0% {
transform: translateY(-100%);
}
50%{
transform: translateY(8%);
}
65%{
transform: translateY(-4%);
}
80%{
transform: translateY(4%);
}
95%{
transform: translateY(-2%);
}
100% {
transform: translateY(0%);
}
}@-webkit-keyframes slideFromTop {
0% {
-webkit-transform: translateY(-100%);
}
50%{
-webkit-transform: translateY(8%);
}
65%{
-webkit-transform: translateY(-4%);
}
80%{
-webkit-transform: translateY(4%);
}
95%{
-webkit-transform: translateY(-2%);
}
100% {
-webkit-transform: translateY(0%);
}
}

Slide from bottom

/*
slideFromBottom
*/
.slideFromBottom{
animation-name: slideFromBottom;
-webkit-animation-name: slideFromBottom;animation-duration: 1s;
-webkit-animation-duration: 1s;animation-timing-function: ease;
-webkit-animation-timing-function: ease;visibility: visible !important;
}@keyframes slideFromBottom {
0% {
transform: translateY(100%);
}
50%{
transform: translateY(-8%);
}
65%{
transform: translateY(4%);
}
80%{
transform: translateY(-4%);
}
95%{
transform: translateY(2%);
}
100% {
transform: translateY(0%);
}
}@-webkit-keyframes slideFromBottom {
0% {
-webkit-transform: translateY(100%);
}
50%{
-webkit-transform: translateY(-8%);
}
65%{
-webkit-transform: translateY(4%);
}
80%{
-webkit-transform: translateY(-4%);
}
95%{
-webkit-transform: translateY(2%);
}
100% {
-webkit-transform: translateY(0%);
}
}

Slide from right

/*
slideFromRight
*/
.slideFromRight{
animation-name: slideFromRight;
-webkit-animation-name: slideFromRight;animation-duration: 1s;
-webkit-animation-duration: 1s;animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;visibility: visible !important;
}@keyframes slideFromRight {
0% {
transform: translateX(150%);
}
50%{
transform: translateX(-8%);
}
65%{
transform: translateX(4%);
}
80%{
transform: translateX(-4%);
}
95%{
transform: translateX(2%);
}
100% {
transform: translateX(0%);
}
}@-webkit-keyframes slideFromRight {
0% {
-webkit-transform: translateX(150%);
}
50%{
-webkit-transform: translateX(-8%);
}
65%{
-webkit-transform: translateX(4%);
}
80%{
-webkit-transform: translateX(-4%);
}
95%{
-webkit-transform: translateX(2%);
}
100% {
-webkit-transform: translateX(0%);
}
}

Slide from left

/*
slideFromLeft
*/
.slideFromLeft{
animation-name: slideFromLeft;
-webkit-animation-name: slideFromLeft;animation-duration: 1s;
-webkit-animation-duration: 1s;animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;visibility: visible !important;
}@keyframes slideFromLeft {
0% {
transform: translateX(-150%);
}
50%{
transform: translateX(8%);
}
65%{
transform: translateX(-4%);
}
80%{
transform: translateX(4%);
}
95%{
transform: translateX(-2%);
}
100% {
transform: translateX(0%);
}
}@-webkit-keyframes slideFromLeft {
0% {
-webkit-transform: translateX(-150%);
}
50%{
-webkit-transform: translateX(8%);
}
65%{
-webkit-transform: translateX(-4%);
}
80%{
-webkit-transform: translateX(4%);
}
95%{
-webkit-transform: translateX(-2%);
}
100% {
-webkit-transform: translateX(0%);
}
}

Slide from bottom

/*

/*
expandFromBottom
*/
.expandFromBottom{
animation-name: expandFromBottom;
-webkit-animation-name: expandFromBottom;animation-duration: 0.7s;
-webkit-animation-duration: 0.7s;animation-timing-function: ease;
-webkit-animation-timing-function: ease;visibility: visible !important;
}@keyframes expandFromBottom {
0% {
transform: translateY(100%) scale(0.6) scaleY(0.5);
}
60%{
transform: translateY(-7%) scaleY(1.12);
}
75%{
transform: translateY(3%);
}
100% {
transform: translateY(0%) scale(1) scaleY(1);
}
}@-webkit-keyframes expandFromBottom {
0% {
-webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);
}
60%{
-webkit-transform: translateY(-7%) scaleY(1.12);
}
75%{
-webkit-transform: translateY(3%);
}
100% {
-webkit-transform: translateY(0%) scale(1) scaleY(1);
}
}

Fade in

/*
fadeIn
*/
.fadeIn{
animation-name: fadeIn;
-webkit-animation-name: fadeIn;animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;visibility: visible !important;
}@keyframes fadeIn {
0% {
transform: scale(0);
opacity: 0.0;
}
60% {
transform: scale(1.1);
}
80% {
transform: scale(0.9);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}@-webkit-keyframes fadeIn {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
60% {
-webkit-transform: scale(1.1);
}
80% {
-webkit-transform: scale(0.9);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
How was the experience fro you? We would love to hear if anyone has tried any of these out on their sites!