A cron job allows you to automatically set a function to run at a set time or interval. WordPress comes with an in-built function wp_schedule_event().

WordPress Schedule Event

The function wp_schedule_event() allows you schedule a hook to run an action to schedule a function to run at a set interval.

<?php wp_schedule_event($timestamp, $recurrence, $hook, $args); ?>

Schedule An Hourly Event In Plugin

To schedule an hourly event within a plugin you will schedule a function on activation of the plugin.

register_activation_hook(__FILE__, 'my_activation');
add_action('my_hourly_event', 'do_this_hourly');

function my_activation() {
	wp_schedule_event( current_time( 'timestamp' ), 'hourly', 'my_hourly_event');
}

function do_this_hourly() {
	// do something every hour
}

If you want to deactivate the schedule event then use this.

register_deactivation_hook(__FILE__, 'my_deactivation');

function my_deactivation() {
	wp_clear_scheduled_hook('my_hourly_event');
}

Schedule hourly Event In Functions.php

This doesn’t rely on activation of the plugin as it will run inside the functions.php file.

add_action('my_hourly_event', 'do_this_hourly');

function my_activation() {
	if ( !wp_next_scheduled( 'my_hourly_event' ) ) {
		wp_schedule_event( current_time( 'timestamp' ), 'hourly', 'my_hourly_event');
	}
}
add_action('wp', 'my_activation');

function do_this_hourly() {
	// do something every hour
}

Many websites can do this with any bit of information they want, some use it for the top navigation, some use this feature to display social media button, some use it to make sure their mail list subscription box in view all the time.

Hongkiat Website

The web design website Hongkiat uses this functionality to always keep the logo, social media share buttons and a search box in view to the visitor. This allows the visitor to always be able to share the current page where ever they are on page. They have the website logo which is a link back to the home page and the search box allows the visitor to always have access to search for a subject anywhere on the page.

The below image is the standard top navigation.


When you scroll the navigation bar changes to this.

Premium Pixels Love It Button

Premium pixels is a free PSD resource by Orman Clark a graphic designer from UK. Orman makes quality PSDs and gives them away for free on his website premium pixel. On this site he allows people to vote to say if they like the PSD he is offering, by clicking on the love it button.

Premium pixels uses this same always in view functionality on the love it button. As you scroll down the page the love it button will always stay at the top of the screen.

Always In View Social Buttons

When talking about always in view elements you have to talk about social media buttons. Almost every site now has floating social media buttons which will always be in view as you scroll down the screen. They will appear just to the left of the content, this means that people can always share the current page on their favourite social media network anywhere on the page.

For this functionality you can use the WordPress plugin Digg Digg.

With Digg Digg by Buffer, you have an all in one social sharing plugin for your blog. Display all social sharing buttons nicely on your blog and make it look amazing.

You can download this for free by going to WordPress.org.

Digg Digg

Keep In View.js

I stumbled across this Github project called keep-in-view.js which uses a small bit of Javascript to make sure an element is always on the screen.

Keep in view will make sure the elements don’t scroll off the page by making them stick to the top or the bottom of the page.

View the project on Github.

Keep in View

In this tutorial we are going to build a small page which will use keep in view to make sure that the navigation bar is always on the screen.

Using Keep In View

To use keepInView it’s very simple all you have to do is download the project and include this on the page. But you must make sure that you also include jQuery on the page or it will not work correctly.

After these are included on the page then it’s very easy to make any element on the page sticky and always in view.

All you have to do is use the function keepInView on a element.

$("nav").keepInView();

This will make sure that that the element in the nav tag is always in view on the page.

The keepInView function has a number of optional parameters you can use to customise the sticky element.

• Fixed – Boolean false by default. When set to true this element will be fixed regardless of the scrolling position.
• edgeOffset – 0 by default. This will by the offset to both the top or the bottom.
• zIndex – 1 by default. Will override the CSS zindex setting on this element.

Demo Keep In View

In this demo were going to create a simple web page with navigation at the top of the page, this navigation is going to be fixed to top of the page using the keep in view plugin. We are going to create dummy content to make sure that the page is long enough so you can scroll down the page and see the navigation stick to the top of the page.

We are also going to add a subscribe box in a sidebar which we are going to use keepInView.js to make sure that the subscribe box is always on the screen.

The HTML

<article class="content">
        <h1>Too much text</h1>
        <img src="images/Sticky Notes.jpg" class="stickyImages" />
        <p><strong>Resize and scroll the window so that you can see the script keeping elements in view.</strong></p>
        <h4>JavaScript init:</h4>
        <code><pre>&lt;script type="text/javascript"&gt;
    $(document).ready(function(){
        $(".help").keepInView({fixed:true, zindex: 42, edgeOffset: 30});
        $("nav, footer p").keepInView();
    });
&lt;/script&gt;
                </pre></code>

        <h2 class=sticky>Sticky Header</h2>
        <p>Trigger the 'unstick' event on the element you no longer want to keep in view.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <h2>And it just keeps on going</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <h3>… and going and going</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </article>

    <aside>
    	<div class="subscribe-box">
    		<h3>Subscribe to stay updated</h3>
    		<p><input type=email placeholder=Enter email address /></p>
    		<p><input type=submit value=Subscribe /></p>
    	</div>

    </aside>

        <div style="clear: both; "></div>

Add The Javascript

Keep in view is a jQuery plugin so we need to add both this plugin and jquery to your page.

Save the Keep in view project in the same directory as your project and add the following to the head section of your page.

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="keepinview.js"></script>
</head>

With these added to the page we can now use the plugin to keep certain HTML elements in view, add the following Javascript to the page to keep the navigation and subscribe box in view on the page.

<script>
$(document).ready(function(){
        // Keep the navigation in view
	$("nav").keepInView();

        // Make sure the stick header is always in view with an offset of 40 pixels from the top
	$(".sticky").keepInView({edgeOffset:40});

        // Keep the subscribe box in view 80 pixels from the top with a zIndex of 20
	$(".subscribe-box").keepInView({edgeOffset:80, zIndex:20});
});
</script>

View the demo page with the elements on the page.

Demo

It’s that simple to keep any element on the page in view to your visitors. If you have any important elements you want to keep in view on your web page then you should try using the keepInView.js, which you can download from Github.

Download

Enable Theme Support For Featured Post

By default themes do not support this feature you need to add some code to the functiona.php file.

add_theme_support( 'post-thumbnails' );

Set Featured Image

There is a meta box on the post screen where you can set an image to be the featured image on the post.

Automatically Set Featured Image

But if you forget to place a featured image on your post then your theme won’t be able to display an image. Here is a snippet which will automatically set the first image from the post to be your featured image.

<?php
function autoset_featured() {
          global $post;
          $already_has_thumb = has_post_thumbnail($post->ID);
              if (!$already_has_thumb)  {
              $attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" );
                          if ($attached_image) {
                                foreach ($attached_image as $attachment_id => $attachment) {
                                set_post_thumbnail($post->ID, $attachment_id);
                                }
                           }
                        }
      }
add_action('the_post', 'autoset_featured');
add_action('save_post', 'autoset_featured');
add_action('draft_to_publish', 'autoset_featured');
add_action('new_to_publish', 'autoset_featured');
add_action('pending_to_publish', 'autoset_featured');
add_action('future_to_publish', 'autoset_featured');
?>

Animate.css

The animate.css project can be downloaded from github.

Download Animate.css

You can view the demo of Animate.css here.

Animate.css Demo

Below are the following effects you get with animate.css and the CSS it takes to create the effect.

CSS Flash Animation

The flash effect will show and hide the element by using the opacity property.

@-webkit-keyframes flash {
	0%, 50%, 100% {opacity: 1;}
	25%, 75% {opacity: 0;}
}

@-moz-keyframes flash {
	0%, 50%, 100% {opacity: 1;}
	25%, 75% {opacity: 0;}
}

@-ms-keyframes flash {
	0%, 50%, 100% {opacity: 1;}
	25%, 75% {opacity: 0;}
}

@-o-keyframes flash {
	0%, 50%, 100% {opacity: 1;}
	25%, 75% {opacity: 0;}
}

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

.flash {
	-webkit-animation-name: flash 1s;
	-moz-animation-name: flash 1s;
	-ms-animation-name: flash 1s;
	-o-animation-name: flash 1s;
	animation-name: flash 1s;
}

Demo CSS Flash

CSS Shake Animation

This effect will create a shake effect by moving the element from left to right.

@-webkit-keyframes shake {
	0%, 100% {-webkit-transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
	20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}

@-moz-keyframes shake {
	0%, 100% {-moz-transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
	20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}

@-ms-keyframes shake {
	0%, 100% {-ms-transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {-ms-transform: translateX(-10px);}
	20%, 40%, 60%, 80% {-ms-transform: translateX(10px);}
}

@-o-keyframes shake {
	0%, 100% {-o-transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
	20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}

@keyframes shake {
	0%, 100% {transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
	20%, 40%, 60%, 80% {transform: translateX(10px);}
}

.shake {
	-webkit-animation-name: shake;
	-moz-animation-name: shake;
	-ms-animation-name: shake;
	-o-animation-name: shake;
	animation-name: shake;
}

Demo CSS Shake

CSS Bounce Animation

This effect will make the HTML element bounce.

@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
	40% {-webkit-transform: translateY(-30px);}
	60% {-webkit-transform: translateY(-15px);}
}

@-moz-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
	40% {-moz-transform: translateY(-30px);}
	60% {-moz-transform: translateY(-15px);}
}

@-ms-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-ms-transform: translateY(0);}
	40% {-ms-transform: translateY(-30px);}
	60% {-ms-transform: translateY(-15px);}
}

@-o-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
	40% {-o-transform: translateY(-30px);}
	60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}

.bounce {
	-webkit-animation-name: bounce;
	-moz-animation-name: bounce;
	-ms-animation-name: bounce;
	-o-animation-name: bounce;
	animation-name: bounce;
}

Demo CSS Bounce

CSS Swing Animation

Make the element swing from left to right.

@-webkit-keyframes swing {
	20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
	20% { -webkit-transform: rotate(15deg); }
	40% { -webkit-transform: rotate(-10deg); }
	60% { -webkit-transform: rotate(5deg); }
	80% { -webkit-transform: rotate(-5deg); }
	100% { -webkit-transform: rotate(0deg); }
}

@-moz-keyframes swing {
	20% { -moz-transform: rotate(15deg); }
	40% { -moz-transform: rotate(-10deg); }
	60% { -moz-transform: rotate(5deg); }
	80% { -moz-transform: rotate(-5deg); }
	100% { -moz-transform: rotate(0deg); }
}

@-ms-keyframes swing {
	20% { -ms-transform: rotate(15deg); }
	40% { -ms-transform: rotate(-10deg); }
	60% { -ms-transform: rotate(5deg); }
	80% { -ms-transform: rotate(-5deg); }
	100% { -ms-transform: rotate(0deg); }
}

@-o-keyframes swing {
	20% { -o-transform: rotate(15deg); }
	40% { -o-transform: rotate(-10deg); }
	60% { -o-transform: rotate(5deg); }
	80% { -o-transform: rotate(-5deg); }
	100% { -o-transform: rotate(0deg); }
}

@keyframes swing {
	20% { transform: rotate(15deg); }
	40% { transform: rotate(-10deg); }
	60% { transform: rotate(5deg); }
	80% { transform: rotate(-5deg); }
	100% { transform: rotate(0deg); }
}

.swing {
	-webkit-transform-origin: top center;
	-moz-transform-origin: top center;
	-ms-transform-origin: top center;
	-o-transform-origin: top center;
	transform-origin: top center;
	-webkit-animation-name: swing;
	-moz-animation-name: swing;
	-ms-animation-name: swing;
	-o-animation-name: swing;
	animation-name: swing;
}

Demo CSS Swing

CSS Wobble Animation

Make the HTML element wobble with CSS animation.

@-webkit-keyframes wobble {
  0% { -webkit-transform: translateX(0%); }
  15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
  30% { -webkit-transform: translateX(20%) rotate(3deg); }
  45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
  60% { -webkit-transform: translateX(10%) rotate(2deg); }
  75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
  100% { -webkit-transform: translateX(0%); }
}

@-moz-keyframes wobble {
  0% { -moz-transform: translateX(0%); }
  15% { -moz-transform: translateX(-25%) rotate(-5deg); }
  30% { -moz-transform: translateX(20%) rotate(3deg); }
  45% { -moz-transform: translateX(-15%) rotate(-3deg); }
  60% { -moz-transform: translateX(10%) rotate(2deg); }
  75% { -moz-transform: translateX(-5%) rotate(-1deg); }
  100% { -moz-transform: translateX(0%); }
}

@-ms-keyframes wobble {
  0% { -ms-transform: translateX(0%); }
  15% { -ms-transform: translateX(-25%) rotate(-5deg); }
  30% { -ms-transform: translateX(20%) rotate(3deg); }
  45% { -ms-transform: translateX(-15%) rotate(-3deg); }
  60% { -ms-transform: translateX(10%) rotate(2deg); }
  75% { -ms-transform: translateX(-5%) rotate(-1deg); }
  100% { -ms-transform: translateX(0%); }
}

@-o-keyframes wobble {
  0% { -o-transform: translateX(0%); }
  15% { -o-transform: translateX(-25%) rotate(-5deg); }
  30% { -o-transform: translateX(20%) rotate(3deg); }
  45% { -o-transform: translateX(-15%) rotate(-3deg); }
  60% { -o-transform: translateX(10%) rotate(2deg); }
  75% { -o-transform: translateX(-5%) rotate(-1deg); }
  100% { -o-transform: translateX(0%); }
}

@keyframes wobble {
  0% { transform: translateX(0%); }
  15% { transform: translateX(-25%) rotate(-5deg); }
  30% { transform: translateX(20%) rotate(3deg); }
  45% { transform: translateX(-15%) rotate(-3deg); }
  60% { transform: translateX(10%) rotate(2deg); }
  75% { transform: translateX(-5%) rotate(-1deg); }
  100% { transform: translateX(0%); }
}

.wobble {
	-webkit-animation-name: wobble;
	-moz-animation-name: wobble;
	-ms-animation-name: wobble;
	-o-animation-name: wobble;
	animation-name: wobble;
}

Demo CSS Wobble

CSS Pulse Animation

Creates a pulse effect on the HTML element.

@-webkit-keyframes pulse {
    0% { -webkit-transform: scale(1); }
	50% { -webkit-transform: scale(1.1); }
    100% { -webkit-transform: scale(1); }
}
@-moz-keyframes pulse {
    0% { -moz-transform: scale(1); }
	50% { -moz-transform: scale(1.1); }
    100% { -moz-transform: scale(1); }
}
@-ms-keyframes pulse {
    0% { -ms-transform: scale(1); }
	50% { -ms-transform: scale(1.1); }
    100% { -ms-transform: scale(1); }
}
@-o-keyframes pulse {
    0% { -o-transform: scale(1); }
	50% { -o-transform: scale(1.1); }
    100% { -o-transform: scale(1); }
}
@keyframes pulse {
    0% { transform: scale(1); }
	50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.pulse {
	-webkit-animation-name: pulse;
	-moz-animation-name: pulse;
	-ms-animation-name: pulse;
	-o-animation-name: pulse;
	animation-name: pulse;
}

Demo CSS Pulse

CSS Flip Animation

Makes the HTML element flip, will use 3D transforms so will only work in the latest browsers.

@-webkit-keyframes flip {
	0% {
		-webkit-transform: perspective(400px) rotateY(0);
		-webkit-animation-timing-function: ease-out;
	}
	40% {
		-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
		-webkit-animation-timing-function: ease-out;
	}
	50% {
		-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
		-webkit-animation-timing-function: ease-in;
	}
	80% {
		-webkit-transform: perspective(400px) rotateY(360deg) scale(.95);
		-webkit-animation-timing-function: ease-in;
	}
	100% {
		-webkit-transform: perspective(400px) scale(1);
		-webkit-animation-timing-function: ease-in;
	}
}
@-moz-keyframes flip {
	0% {
		-moz-transform: perspective(400px) rotateY(0);
		-moz-animation-timing-function: ease-out;
	}
	40% {
		-moz-transform: perspective(400px) translateZ(150px) rotateY(170deg);
		-moz-animation-timing-function: ease-out;
	}
	50% {
		-moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
		-moz-animation-timing-function: ease-in;
	}
	80% {
		-moz-transform: perspective(400px) rotateY(360deg) scale(.95);
		-moz-animation-timing-function: ease-in;
	}
	100% {
		-moz-transform: perspective(400px) scale(1);
		-moz-animation-timing-function: ease-in;
	}
}
@-ms-keyframes flip {
	0% {
		-ms-transform: perspective(400px) rotateY(0);
		-ms-animation-timing-function: ease-out;
	}
	40% {
		-ms-transform: perspective(400px) translateZ(150px) rotateY(170deg);
		-ms-animation-timing-function: ease-out;
	}
	50% {
		-ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
		-ms-animation-timing-function: ease-in;
	}
	80% {
		-ms-transform: perspective(400px) rotateY(360deg) scale(.95);
		-ms-animation-timing-function: ease-in;
	}
	100% {
		-ms-transform: perspective(400px) scale(1);
		-ms-animation-timing-function: ease-in;
	}
}
@-o-keyframes flip {
	0% {
		-o-transform: perspective(400px) rotateY(0);
		-o-animation-timing-function: ease-out;
	}
	40% {
		-o-transform: perspective(400px) translateZ(150px) rotateY(170deg);
		-o-animation-timing-function: ease-out;
	}
	50% {
		-o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
		-o-animation-timing-function: ease-in;
	}
	80% {
		-o-transform: perspective(400px) rotateY(360deg) scale(.95);
		-o-animation-timing-function: ease-in;
	}
	100% {
		-o-transform: perspective(400px) scale(1);
		-o-animation-timing-function: ease-in;
	}
}
@keyframes flip {
	0% {
		transform: perspective(400px) rotateY(0);
		animation-timing-function: ease-out;
	}
	40% {
		transform: perspective(400px) translateZ(150px) rotateY(170deg);
		animation-timing-function: ease-out;
	}
	50% {
		transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
		animation-timing-function: ease-in;
	}
	80% {
		transform: perspective(400px) rotateY(360deg) scale(.95);
		animation-timing-function: ease-in;
	}
	100% {
		transform: perspective(400px) scale(1);
		animation-timing-function: ease-in;
	}
}

.flip {
	-webkit-backface-visibility: visible !important;
	-webkit-animation-name: flip;
	-moz-backface-visibility: visible !important;
	-moz-animation-name: flip;
	-ms-backface-visibility: visible !important;
	-ms-animation-name: flip;
	-o-backface-visibility: visible !important;
	-o-animation-name: flip;
	backface-visibility: visible !important;
	animation-name: flip;
}

Demo CSS Flip

CSS Fade In Down Animation

Make the HTML element fade down with this CSS animation.

@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInDown {
	0% {
		opacity: 0;
		-moz-transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-ms-keyframes fadeInDown {
	0% {
		opacity: 0;
		-ms-transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-ms-transform: translateY(0);
	}
}

@-o-keyframes fadeInDown {
	0% {
		opacity: 0;
		-ms-transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-ms-transform: translateY(0);
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeInDown {
	-webkit-animation-name: fadeInDown;
	-moz-animation-name: fadeInDown;
	-ms-animation-name: fadeInDown;
	-o-animation-name: fadeInDown;
	animation-name: fadeInDown;
}

Demo CSS Fade In Down

CSS Fade In Left Animation

Makes the HTML element fade in from the left.

@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-20px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-moz-transform: translateX(-20px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@-ms-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-ms-transform: translateX(-20px);
	}

	100% {
		opacity: 1;
		-ms-transform: translateX(0);
	}
}

@-o-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-o-transform: translateX(-20px);
	}

	100% {
		opacity: 1;
		-o-transform: translateX(0);
	}
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-20px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.fadeInLeft {
	-webkit-animation-name: fadeInLeft;
	-moz-animation-name: fadeInLeft;
	-ms-animation-name: fadeInLeft;
	-o-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
}

Demo CSS Fade In Left

CSS Fade In Down Big Animation

This is similar to the fade in down animation, but it will fade the element in from the top of the page.

@-webkit-keyframes fadeInDownBig {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-2000px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInDownBig {
	0% {
		opacity: 0;
		-moz-transform: translateY(-2000px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-ms-keyframes fadeInDownBig {
	0% {
		opacity: 0;
		-ms-transform: translateY(-2000px);
	}

	100% {
		opacity: 1;
		-ms-transform: translateY(0);
	}
}

@-o-keyframes fadeInDownBig {
	0% {
		opacity: 0;
		-o-transform: translateY(-2000px);
	}

	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes fadeInDownBig {
	0% {
		opacity: 0;
		transform: translateY(-2000px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeInDownBig {
	-webkit-animation-name: fadeInDownBig;
	-moz-animation-name: fadeInDownBig;
	-ms-animation-name: fadeInDownBig;
	-o-animation-name: fadeInDownBig;
	animation-name: fadeInDownBig;
}

Demo CSS Fade In Down Big

CSS Fade In Left Big Animation

Makes the element fade in from the left of the page into the middle of the page.

@-webkit-keyframes fadeInLeftBig {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-2000px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}
@-moz-keyframes fadeInLeftBig {
	0% {
		opacity: 0;
		-moz-transform: translateX(-2000px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}
@-ms-keyframes fadeInLeftBig {
	0% {
		opacity: 0;
		-ms-transform: translateX(-2000px);
	}

	100% {
		opacity: 1;
		-ms-transform: translateX(0);
	}
}
@-o-keyframes fadeInLeftBig {
	0% {
		opacity: 0;
		-o-transform: translateX(-2000px);
	}

	100% {
		opacity: 1;
		-o-transform: translateX(0);
	}
}
@keyframes fadeInLeftBig {
	0% {
		opacity: 0;
		transform: translateX(-2000px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.fadeInLeftBig {
	-webkit-animation-name: fadeInLeftBig;
	-moz-animation-name: fadeInLeftBig;
	-ms-animation-name: fadeInLeftBig;
	-o-animation-name: fadeInLeftBig;
	animation-name: fadeInLeftBig;
}

Demo CSS Fade In Left Big

CSS Fade Out Animation

Makes the HTML element fade out.

@-webkit-keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@-moz-keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@-ms-keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@-o-keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

.fadeOut {
	-webkit-animation-name: fadeOut;
	-moz-animation-name: fadeOut;
	-ms-animation-name: fadeOut;
	-o-animation-name: fadeOut;
	animation-name: fadeOut;
}

Demo CSS Fade Out

CSS Fade Out Down Big Animation

Makes the HTML element fade out down the page.

@-webkit-keyframes fadeOutDownBig {
	0% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}

	100% {
		opacity: 0;
		-webkit-transform: translateY(2000px);
	}
}

@-moz-keyframes fadeOutDownBig {
	0% {
		opacity: 1;
		-moz-transform: translateY(0);
	}

	100% {
		opacity: 0;
		-moz-transform: translateY(2000px);
	}
}

@-ms-keyframes fadeOutDownBig {
	0% {
		opacity: 1;
		-ms-transform: translateY(0);
	}

	100% {
		opacity: 0;
		-ms-transform: translateY(2000px);
	}
}

@-o-keyframes fadeOutDownBig {
	0% {
		opacity: 1;
		-o-transform: translateY(0);
	}

	100% {
		opacity: 0;
		-o-transform: translateY(2000px);
	}
}

@keyframes fadeOutDownBig {
	0% {
		opacity: 1;
		transform: translateY(0);
	}

	100% {
		opacity: 0;
		transform: translateY(2000px);
	}
}

.fadeOutDownBig {
	-webkit-animation-name: fadeOutDownBig;
	-moz-animation-name: fadeOutDownBig;
	-ms-animation-name: fadeOutDownBig;
	-o-animation-name: fadeOutDownBig;
	animation-name: fadeOutDownBig;
}

Demo CSS Fade Out Down Big

CSS Fade Out Right Big Animation

Makes the HTML element slide off the page to the right.

@-webkit-keyframes fadeOutRightBig {
	0% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}

	100% {
		opacity: 0;
		-webkit-transform: translateX(2000px);
	}
}
@-moz-keyframes fadeOutRightBig {
	0% {
		opacity: 1;
		-moz-transform: translateX(0);
	}

	100% {
		opacity: 0;
		-moz-transform: translateX(2000px);
	}
}
@-ms-keyframes fadeOutRightBig {
	0% {
		opacity: 1;
		-ms-transform: translateX(0);
	}

	100% {
		opacity: 0;
		-ms-transform: translateX(2000px);
	}
}
@-o-keyframes fadeOutRightBig {
	0% {
		opacity: 1;
		-o-transform: translateX(0);
	}

	100% {
		opacity: 0;
		-o-transform: translateX(2000px);
	}
}
@keyframes fadeOutRightBig {
	0% {
		opacity: 1;
		transform: translateX(0);
	}

	100% {
		opacity: 0;
		transform: translateX(2000px);
	}
}

.fadeOutRightBig {
	-webkit-animation-name: fadeOutRightBig;
	-moz-animation-name: fadeOutRightBig;
	-ms-animation-name: fadeOutRightBig;
	-o-animation-name: fadeOutRightBig;
	animation-name: fadeOutRightBig;
}

Demo CSS Fade Out Right Big

CSS Bounce In Animation

Makes the HTML element bounce into view.

@-webkit-keyframes bounceIn {
	0% {
		opacity: 0;
		-webkit-transform: scale(.3);
	}

	50% {
		opacity: 1;
		-webkit-transform: scale(1.05);
	}

	70% {
		-webkit-transform: scale(.9);
	}

	100% {
		-webkit-transform: scale(1);
	}
}

@-moz-keyframes bounceIn {
	0% {
		opacity: 0;
		-moz-transform: scale(.3);
	}

	50% {
		opacity: 1;
		-moz-transform: scale(1.05);
	}

	70% {
		-moz-transform: scale(.9);
	}

	100% {
		-moz-transform: scale(1);
	}
}

@-ms-keyframes bounceIn {
	0% {
		opacity: 0;
		-ms-transform: scale(.3);
	}

	50% {
		opacity: 1;
		-ms-transform: scale(1.05);
	}

	70% {
		-ms-transform: scale(.9);
	}

	100% {
		-ms-transform: scale(1);
	}
}

@-o-keyframes bounceIn {
	0% {
		opacity: 0;
		-o-transform: scale(.3);
	}

	50% {
		opacity: 1;
		-o-transform: scale(1.05);
	}

	70% {
		-o-transform: scale(.9);
	}

	100% {
		-o-transform: scale(1);
	}
}

@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale(.3);
	}

	50% {
		opacity: 1;
		transform: scale(1.05);
	}

	70% {
		transform: scale(.9);
	}

	100% {
		transform: scale(1);
	}
}

.bounceIn {
	-webkit-animation-name: bounceIn;
	-moz-animation-name: bounceIn;
	-ms-animation-name: bounceIn;
	-o-animation-name: bounceIn;
	animation-name: bounceIn;
}

Demo CSS Bounce In

CSS Bounce In Right Animation

Makes the HTML element bounce in from the right of the page.

@-webkit-keyframes bounceInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(2000px);
	}

	60% {
		opacity: 1;
		-webkit-transform: translateX(-30px);
	}

	80% {
		-webkit-transform: translateX(10px);
	}

	100% {
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes bounceInRight {
	0% {
		opacity: 0;
		-moz-transform: translateX(2000px);
	}

	60% {
		opacity: 1;
		-moz-transform: translateX(-30px);
	}

	80% {
		-moz-transform: translateX(10px);
	}

	100% {
		-moz-transform: translateX(0);
	}
}

@-ms-keyframes bounceInRight {
	0% {
		opacity: 0;
		-ms-transform: translateX(2000px);
	}

	60% {
		opacity: 1;
		-ms-transform: translateX(-30px);
	}

	80% {
		-ms-transform: translateX(10px);
	}

	100% {
		-ms-transform: translateX(0);
	}
}

@-o-keyframes bounceInRight {
	0% {
		opacity: 0;
		-o-transform: translateX(2000px);
	}

	60% {
		opacity: 1;
		-o-transform: translateX(-30px);
	}

	80% {
		-o-transform: translateX(10px);
	}

	100% {
		-o-transform: translateX(0);
	}
}

@keyframes bounceInRight {
	0% {
		opacity: 0;
		transform: translateX(2000px);
	}

	60% {
		opacity: 1;
		transform: translateX(-30px);
	}

	80% {
		transform: translateX(10px);
	}

	100% {
		transform: translateX(0);
	}
}

.bounceInRight {
	-webkit-animation-name: bounceInRight;
	-moz-animation-name: bounceInRight;
	-ms-animation-name: bounceInRight;
	-o-animation-name: bounceInRight;
	animation-name: bounceInRight;
}

Demo CSS Bounce In Right

CSS Bounce Out Animation

Makes the element bounce out of the screen.

@-webkit-keyframes bounceOut {
	0% {
		-webkit-transform: scale(1);
	}

	25% {
		-webkit-transform: scale(.95);
	}

	50% {
		opacity: 1;
		-webkit-transform: scale(1.1);
	}

	100% {
		opacity: 0;
		-webkit-transform: scale(.3);
	}
}

@-moz-keyframes bounceOut {
	0% {
		-moz-transform: scale(1);
	}

	25% {
		-moz-transform: scale(.95);
	}

	50% {
		opacity: 1;
		-moz-transform: scale(1.1);
	}

	100% {
		opacity: 0;
		-moz-transform: scale(.3);
	}
}

@-ms-keyframes bounceOut {
	0% {
		-ms-transform: scale(1);
	}

	25% {
		-ms-transform: scale(.95);
	}

	50% {
		opacity: 1;
		-ms-transform: scale(1.1);
	}

	100% {
		opacity: 0;
		-ms-transform: scale(.3);
	}
}

@-o-keyframes bounceOut {
	0% {
		-o-transform: scale(1);
	}

	25% {
		-o-transform: scale(.95);
	}

	50% {
		opacity: 1;
		-o-transform: scale(1.1);
	}

	100% {
		opacity: 0;
		-o-transform: scale(.3);
	}
}

@keyframes bounceOut {
	0% {
		transform: scale(1);
	}

	25% {
		transform: scale(.95);
	}

	50% {
		opacity: 1;
		transform: scale(1.1);
	}

	100% {
		opacity: 0;
		transform: scale(.3);
	}
}

.bounceOut {
	-webkit-animation-name: bounceOut;
	-moz-animation-name: bounceOut;
	-ms-animation-name: bounceOut;
	-o-animation-name: bounceOut;
	animation-name: bounceOut;
}

Demo CSS Bounce Out

CSS Bounce Out Down Animation

Makes the HTML element bounce down off the page.

@-webkit-keyframes bounceOutDown {
	0% {
		-webkit-transform: translateY(0);
	}

	20% {
		opacity: 1;
		-webkit-transform: translateY(-20px);
	}

	100% {
		opacity: 0;
		-webkit-transform: translateY(2000px);
	}
}

@-moz-keyframes bounceOutDown {
	0% {
		-moz-transform: translateY(0);
	}

	20% {
		opacity: 1;
		-moz-transform: translateY(-20px);
	}

	100% {
		opacity: 0;
		-moz-transform: translateY(2000px);
	}
}

@-ms-keyframes bounceOutDown {
	0% {
		-ms-transform: translateY(0);
	}

	20% {
		opacity: 1;
		-ms-transform: translateY(-20px);
	}

	100% {
		opacity: 0;
		-ms-transform: translateY(2000px);
	}
}

@keyframes bounceOutDown {
	0% {
		transform: translateY(0);
	}

	20% {
		opacity: 1;
		transform: translateY(-20px);
	}

	100% {
		opacity: 0;
		transform: translateY(2000px);
	}
}

.bounceOutDown {
	-webkit-animation-name: bounceOutDown;
	-moz-animation-name: bounceOutDown;
	-ms-animation-name: bounceOutDown;
	animation-name: bounceOutDown;
}

Demo CSS Bounce Out Down

CSS Rotate In Down Left Animation

Makes the HTML element rotate in from the left.

@-webkit-keyframes rotateInDownLeft {
	0% {
		-webkit-transform-origin: left bottom;
		-webkit-transform: rotate(-90deg);
		opacity: 0;
	}

	100% {
		-webkit-transform-origin: left bottom;
		-webkit-transform: rotate(0);
		opacity: 1;
	}
}

@-moz-keyframes rotateInDownLeft {
	0% {
		-moz-transform-origin: left bottom;
		-moz-transform: rotate(-90deg);
		opacity: 0;
	}

	100% {
		-moz-transform-origin: left bottom;
		-moz-transform: rotate(0);
		opacity: 1;
	}
}

@-ms-keyframes rotateInDownLeft {
	0% {
		-ms-transform-origin: left bottom;
		-ms-transform: rotate(-90deg);
		opacity: 0;
	}

	100% {
		-ms-transform-origin: left bottom;
		-ms-transform: rotate(0);
		opacity: 1;
	}
}

@-o-keyframes rotateInDownLeft {
	0% {
		-o-transform-origin: left bottom;
		-o-transform: rotate(-90deg);
		opacity: 0;
	}

	100% {
		-o-transform-origin: left bottom;
		-o-transform: rotate(0);
		opacity: 1;
	}
}

@keyframes rotateInDownLeft {
	0% {
		transform-origin: left bottom;
		transform: rotate(-90deg);
		opacity: 0;
	}

	100% {
		transform-origin: left bottom;
		transform: rotate(0);
		opacity: 1;
	}
}

.rotateInDownLeft {
	-webkit-animation-name: rotateInDownLeft;
	-moz-animation-name: rotateInDownLeft;
	-ms-animation-name: rotateInDownLeft;
	-o-animation-name: rotateInDownLeft;
	animation-name: rotateInDownLeft;
}

Demo CSS Rotate In Down Left

CSS Rotate In Up Left Animation

Makes the HTML element rotate in up from the left.

@-webkit-keyframes rotateInUpLeft {
	0% {
		-webkit-transform-origin: left bottom;
		-webkit-transform: rotate(90deg);
		opacity: 0;
	}

	100% {
		-webkit-transform-origin: left bottom;
		-webkit-transform: rotate(0);
		opacity: 1;
	}
}

@-moz-keyframes rotateInUpLeft {
	0% {
		-moz-transform-origin: left bottom;
		-moz-transform: rotate(90deg);
		opacity: 0;
	}

	100% {
		-moz-transform-origin: left bottom;
		-moz-transform: rotate(0);
		opacity: 1;
	}
}

@-ms-keyframes rotateInUpLeft {
	0% {
		-ms-transform-origin: left bottom;
		-ms-transform: rotate(90deg);
		opacity: 0;
	}

	100% {
		-ms-transform-origin: left bottom;
		-ms-transform: rotate(0);
		opacity: 1;
	}
}

@-o-keyframes rotateInUpLeft {
	0% {
		-o-transform-origin: left bottom;
		-o-transform: rotate(90deg);
		opacity: 0;
	}

	100% {
		-o-transform-origin: left bottom;
		-o-transform: rotate(0);
		opacity: 1;
	}
}

@keyframes rotateInUpLeft {
	0% {
		transform-origin: left bottom;
		transform: rotate(90deg);
		opacity: 0;
	}

	100% {
		transform-origin: left bottom;
		transform: rotate(0);
		opacity: 1;
	}
}

.rotateInUpLeft {
	-webkit-animation-name: rotateInUpLeft;
	-moz-animation-name: rotateInUpLeft;
	-ms-animation-name: rotateInUpLeft;
	-o-animation-name: rotateInUpLeft;
	animation-name: rotateInUpLeft;
}

Demo CSS Rotate In Up Left

CSS Hinge Animation

Makes the HTML element hinge on the top left corner and fall off the screen.

@-webkit-keyframes hinge {
	0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
	20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
	40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
	80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
	100% { -webkit-transform: translateY(700px); opacity: 0; }
}

@-moz-keyframes hinge {
	0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
	20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
	40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
	80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
	100% { -moz-transform: translateY(700px); opacity: 0; }
}

@-ms-keyframes hinge {
	0% { -ms-transform: rotate(0); -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; }
	20%, 60% { -ms-transform: rotate(80deg); -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; }
	40% { -ms-transform: rotate(60deg); -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; }
	80% { -ms-transform: rotate(60deg) translateY(0); opacity: 1; -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; }
	100% { -ms-transform: translateY(700px); opacity: 0; }
}

@-o-keyframes hinge {
	0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
	20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
	40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
	80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; }
	100% { -o-transform: translateY(700px); opacity: 0; }
}

@keyframes hinge {
	0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }
	20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }
	40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }
	80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }
	100% { transform: translateY(700px); opacity: 0; }
}

.hinge {
	-webkit-animation-name: hinge;
	-moz-animation-name: hinge;
	-ms-animation-name: hinge;
	-o-animation-name: hinge;
	animation-name: hinge;
}

Demo CSS Hinge

CSS Roll In Animation

Makes the HTML element roll in.

@-webkit-keyframes rollIn {
	0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }
	100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }
}

@-moz-keyframes rollIn {
	0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); }
	100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); }
}

@-ms-keyframes rollIn {
	0% { opacity: 0; -ms-transform: translateX(-100%) rotate(-120deg); }
	100% { opacity: 1; -ms-transform: translateX(0px) rotate(0deg); }
}

@-o-keyframes rollIn {
	0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); }
	100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); }
}

@keyframes rollIn {
	0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
	100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
}

.rollIn {
	-webkit-animation-name: rollIn;
	-moz-animation-name: rollIn;
	-ms-animation-name: rollIn;
	-o-animation-name: rollIn;
	animation-name: rollIn;
}

Demo CSS Roll In Animation

CSS Roll Out Animation

Makes the HTML element roll out.

@-webkit-keyframes rollOut {
    0% {
		opacity: 1;
		-webkit-transform: translateX(0px) rotate(0deg);
	}

    100% {
		opacity: 0;
		-webkit-transform: translateX(100%) rotate(120deg);
	}
}

@-moz-keyframes rollOut {
    0% {
		opacity: 1;
		-moz-transform: translateX(0px) rotate(0deg);
	}

    100% {
		opacity: 0;
		-moz-transform: translateX(100%) rotate(120deg);
	}
}

@-ms-keyframes rollOut {
    0% {
		opacity: 1;
		-ms-transform: translateX(0px) rotate(0deg);
	}

    100% {
		opacity: 0;
		-ms-transform: translateX(100%) rotate(120deg);
	}
}

@-o-keyframes rollOut {
    0% {
		opacity: 1;
		-o-transform: translateX(0px) rotate(0deg);
	}

    100% {
		opacity: 0;
		-o-transform: translateX(100%) rotate(120deg);
	}
}

@keyframes rollOut {
    0% {
		opacity: 1;
		transform: translateX(0px) rotate(0deg);
	}

    100% {
		opacity: 0;
		transform: translateX(100%) rotate(120deg);
	}
}

.rollOut {
	-webkit-animation-name: rollOut;
	-moz-animation-name: rollOut;
	-ms-animation-name: rollOut;
	-o-animation-name: rollOut;
	animation-name: rollOut;
}

Demo CSS Roll Out Animation

Download Animate.css

I recommend you download the project from Github even if it’s just to look at the source code and learn all the different things you can do with CSS animations.

You can get it right now from Github.

Download Animation.css

This moves the text off the page out of the view of the visitor, you will hear that this can be harmful to your SEO as you are trying to hide content from the visitor of the site.

But if you are using an image as your logo on your website you would need to add an image to the page by using the image tag.

<img src="logo.png" />

The problem with this is that you don’t have the keywords of your website title on the page, you can add your website title to the alt attribute but it doesn’t add as much weight to having your website title in a h1 tag on the page.

But if you use a h1 tag you can’t add an image as your website logo, the only way to achieve this is to add your image as a background image to your h1 tag and have your text inside the h1 tag. This brings another problem that now you will have both your logo and text of your website title.

This is where the text-indent:-9999px technique came in, if you add this to your CSS file then you can have both your website logo and text inside the h1.

<h1>Website Title</h1>

h1 {
    text-indent:-9999px;
    margin:0 auto;
    width:300px;
    height:100px;
    background:transparent url("images/logo.jpg") no-repeat scroll;
}

This technique worked fine, but the downside to this technique is that it has a performance hit as the browser will draw a giant 9999px box offscreen.

New Technique Hide Text Off Page

There is a article on Zeldman which explains a new technique of hiding text off the page.

.hide-text {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

This places the text off the page, it doesn’t matter on the size of page. We add the nowrap so the text will always continue to flow off the page and we make sure that any overflow of the text will continue to be hidden from the page.

The best part about this technique is that performance is increased because there is less things for the browser to do.

Has anyone used this new technique? Have you found any drawbacks to using it?

The default image sizes are setup on the settings -> media screen.

But WordPress will only allow you to use 3 image sizes, thumbnail, medium and large which you can choose from when you add the image to your post.

If you want more options for options then you need to add a bit of code into your functions.php file, use the below snippet to add additional images sizes to your media files.

This uses the WordPress function add_image_size to add a new image size to your WordPress theme.

<?php
     if ( function_exists( 'add_image_size' ) ) {
	add_image_size( 'custom-image-size1', 300, 9999 ); //300 pixels wide (and unlimited height)
	add_image_size( 'custom-image-size2', 220, 180, true ); //(cropped)
     }
?>

If you want to change the design depending on the mobile device you will use media queries. But if you want to change functionality such as Javascript then you can use the below snippet to do something different for mobile devices.

<script>
if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) {
	alert('You are using an iPhone, ipod or an ipad');
}
</script>

I’ve added this script to this page so if you visit this page on a iPhone, ipod or an ipad then you will see an alert box.

The value of the background-size property can either be:

• Contains – This specifies that the image should be scaled to as large as possible while being less or equal to the background of the element.
• Covers – This specifies that the image should be scaled to as small as possible while being greater or equal to the background of the element.
• Percentage
• Length
• Auto

Therefore to make the image cover the entire background of the HTML element you will need to use the cover value just like the snippet below.

html {
  background: url(img/background.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

But WordPress doesn’t change the default Enter Title Here text, so if you create a new product custom post type then you can change the Enter Title Here to Enter New Product Here.

Add this to your functions.php file to change the Enter Title Here text.

function change_default_title( $title ){
     $screen = get_current_screen();

     if  ( $screen->post_type == 'product' ) {
          return 'Enter New Product Here';
     }
}

add_filter( 'enter_title_here', 'change_default_title' );

In WordPress you start off with 2 default types of posts you have the standard posts and you also have pages.

For these types of posts WordPress will use different PHP files to display the content, the standard posts will use the single.php file and the pages will use the page.php file.

But the problem with this is that you can only use one file for your pages so you can’t have different page layouts or styles. This is why WordPress created the ability to create custom page templates, which allows developers to create as many different page templates as they want.

Create A Custom Page Template

To create a custom page template all you have to do is add a new blank php file to your theme directory and save this as custom_page_template.php. Within this new file all you have to do is add comments to the top of the file.

<?php
/*
Template Name: Custom Page Template
*/
?>

Adding this to the top will automatically add this file to a drop down when adding a new page, from the drop down you will see the default template (page.php) and Custom Page Template.

If you select the new page to use the Custom Page Template then this will override the page.php and your page will use your custom page template.

Examples Of Custom Page Template

Some of the common examples of custom page templates are contact pages, full width pages and archive pages.

Create A Contact Page Template

The contact page will make it easy for your website visitors to send an email to the admin email address of your WordPress blog.

Below is an example to use for a contact us page, you can copy and paste this code into a new PHP file to easily add contact pages to your WordPress theme.

<?php
/*
Template Name: Contact
*/
?>
<?php 

$nameError = '';
$emailError = '';
$commentError = '';
$sumError = '';

if(isset($_POST['submitted'])) {
		if(trim($_POST['contactName']) === '') {
			$nameError = 'Please enter your name.';
			$hasError = true;
		} else {
			$name = trim($_POST['contactName']);
		}

		if(trim($_POST['email']) === '')  {
			$emailError = 'Please enter your email address.';
			$hasError = true;
		} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
			$emailError = 'You entered an invalid email address.';
			$hasError = true;
		} else {
			$email = trim($_POST['email']);
		}

		if(trim($_POST['comments']) === '') {
			$commentError = 'Please enter a message.';
			$hasError = true;
		} else {
			if(function_exists('stripslashes')) {
				$comments = stripslashes(trim($_POST['comments']));
			} else {
				$comments = trim($_POST['comments']);
			}
		}

		if(trim($_POST['sum']) === '' || trim($_POST['sum']) != '11' ){
			$sumError = "Please enter what's 7 + 4";
			$hasError = true;
		}

		if(!isset($hasError)) {
			$emailTo = get_option('pu_email');
			if (!isset($emailTo) || ($emailTo == '') ){
				$emailTo = get_option('admin_email');
			}
			$subject = '[Contact Form] From '.$name;
			$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
			$headers = 'From: '.$name.' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $emailTo;

			mail($emailTo, $subject, $body, $headers);
			$emailSent = true;
		}

} ?>

<?php get_header(); ?>

<section class="box grid_9 list_posts">
  		<div class="inner">

				<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

					<div <?php post_class() ?> id="post-<?php the_ID(); ?>">

						<h1 class="entry-title"><?php the_title(); ?></h1>

						<div class="entry-content">

							<div class="contact-form clearfix">

							<?php if(isset($emailSent) && $emailSent == true) { ?>

                                <div class="thanks">
                                    <p><?php _e('Thanks, your email was sent successfully.', 'framework') ?></p>
                                </div>

                            <?php } else { ?>

                                <?php the_content(); ?>

                                <?php if(isset($hasError) || isset($captchaError)) { ?>
                                    <p class="error"><?php _e('Sorry, an error occured.', 'framework') ?><p>
                                <?php } ?>

                                <form action="<?php the_permalink(); ?>" id="contactForm" method="post">
                                    <ul class="contactform">
                                        <li><label for="contactName"><?php _e('Name:', 'framework') ?></label>
                                            <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="required requiredField" />
                                            <?php if($nameError != '') { ?>
                                                <span class="error"><?php echo $nameError; ?></span>
                                            <?php } ?>
                                        </li>

                                        <li><label for="email"><?php _e('Email:', 'framework') ?></label>
                                            <input type="text" name="email" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" class="required requiredField email" />
                                            <?php if($emailError != '') { ?>
                                                <span class="error"><?php echo $emailError; ?></span>
                                            <?php } ?>
                                        </li>

                                        <li class="textarea"><label for="commentsText"><?php _e('Message:', 'framework') ?></label>
                                            <textarea name="comments" id="commentsText" rows="20" cols="30" class="required requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
                                            <?php if($commentError != '') { ?>
                                                <span class="error"><?php echo $commentError; ?></span>
                                            <?php } ?>
                                        </li>

                                        <li><label for="sum"><?php _e('7 + 4:', 'framework') ?></label>
                                            <input type="text" name="sum" id="sum" value="<?php if(isset($_POST['sum'])) echo $_POST['sum'];?>" class="required requiredField" />
                                            <?php if($sumError != '') { ?>
                                                <br/><span class="error"><?php echo $sumError; ?></span>
                                            <?php } ?>
                                        </li>

                                        <li class="buttons">
                                            <input type="hidden" name="submitted" id="submitted" value="true" />
                                            <label></label><button class="button-message" type="submit"><?php _e('Send Email', 'framework') ?></button>
                                        </li>
                                    </ul>
                                </form>
                            <?php } ?>

							</div>
						</div>
					</div>

					<?php endwhile; else: ?>

					<div id="post-0" <?php post_class() ?>>

						<h1 class="entry-title"><?php _e('Error 404 - Not Found', 'framework') ?></h1>

						<div class="entry-content">
							<p><?php _e("Sorry, but you are looking for something that isn't here.", "framework") ?></p>
							<?php get_search_form(); ?>
						</div>
					</div>

				<?php endif; ?>

			</div>
    </section>

    <?php get_sidebar(); ?>

<?php get_footer(); ?>

Full Width Page Template

The full width page template is a template I use which the main difference is that the sidebar has been removed and makes the content area stretch across the width of the page.

<?php
/*
Template Name: Fullwidth
*/
?>

<?php get_header(); ?>

<section class="box grid_12 list_posts">
  		<div class="inner">

			<article id="primary" class="hfeed">
			<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

				<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
					<h1 class="entry-title"><?php the_title(); ?></h1>

					<div class="entry-content">
						<?php the_content(); ?>
						<?php wp_link_pages(array('before' => '<p><strong>'.__('Pages:', 'framework').'</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

					</div>
				</div>

				<?php comments_template('', true); ?>

				<?php endwhile; endif; ?>
			</article>
			</div>
		</section>

<?php get_footer(); ?>

Create An Archives Page Template

The archive page template will display a list of all your old post. In this template it will list all the posts from the previous 30 days, list the posts by month and list the posts by category.

Copy the following in a new PHP page template.

<?php
/*
Template Name: Archives
*/
?>

<?php get_header(); ?>

<section class="box grid_9 list_posts">
  		<div class="inner">

				<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

					<div <?php post_class() ?> id="post-<?php the_ID(); ?>">

						<h1 class="entry-title"><?php the_title(); ?></h1>

						<div class="entry-content">

                            <div class="archive-lists">

                                <h4><?php _e('Last 30 Posts', 'framework') ?></h4>

                                <ul>
                                <?php $archive_30 = get_posts('numberposts=30');
                                foreach($archive_30 as $post) : ?>
                                    <li><a href="<?php the_permalink(); ?>"><?php the_title();?></a></li>
                                <?php endforeach; ?>
                                </ul>

                                <h4><?php _e('Archives by Month:', 'framework') ?></h4>

                                <ul>
                                    <?php wp_get_archives('type=monthly'); ?>
                                </ul>

                                <h4><?php _e('Archives by Subject:', 'framework') ?></h4>

                                <ul>
                                    <?php wp_list_categories( 'title_li=' ); ?>
                                </ul>

                            </div>
			</div>
		</div>

					<?php endwhile; else: ?>

					<div id="post-0" <?php post_class() ?>>

						<h1 class="entry-title"><?php _e('Error 404 - Not Found', 'framework') ?></h1>

						<div class="entry-content">
							<p><?php _e("Sorry, but you are looking for something that isn't here.", "framework") ?></p>
							<?php get_search_form(); ?>
						</div>
					</div>

				<?php endif; ?>
    	</div>
    </section>

    <?php get_sidebar(); ?>

<?php get_footer(); ?>

Which custom page templates do you use?