How To Make Divi Blog Grid Posts The Same Height

The Divi blog grid layout does have a limitation, when you have featured images of different sizes, and post titles/excerpts which are different lengths, it can cause the grid to look uneven – even with the ‘Equalize Column Heights’ option checked.

Go to Blog Module Settings > Custom CSS and give the module the new CSS Class “new_grid_blog”. “et_pb_blog_grid”.

Add the following code to your Custom CSS box:


@media only screen and (min-width: 768px) {
.et_new_grid_blog .et_pb_post {
min-height: 520px;
max-height:520px;
}
}

Hide blog content in DIVI blog grid mode

With the Divi theme blog module, there are two display option, grid or full post. Both of these allow for a short amount of blog content to be shown, or the full blog post content.

There is not an option to not show the content in the Divi blog module.

If you wish to have the blog post just show featured image or may be just the the title, you can configure that in the module itself. To remove the content of the blog posts from showing in the grid view, login the WordPress admin area and under Divi >> Theme Settings, enter the following custom CSS:

.et_pb_post .post-content {
display: none;
}

Remove WooCommerce cart icon from DIVI header

To remove the WooCommerce cart icon from the DIVI header on your WordPress site.

Login the WordPress admin area and under Divi >> Theme Settings, enter the following custom CSS:

.et-cart-info { display:none; }

Add a transparent overlay to Fable theme featured image

If you are running the Fable theme for WordPress by Elegant Themes, then you may notice this little bug when you use features images. The text or post title of the WordPress post is usually hidden because it cannot be seen over the featured image.

To add the transparent overlay please add the following code to the Custom CSS box in the ePanel options:

.category .post.entry.et-background-image:before {
content:'';
display:block;
width:100%;
height:100%;
z-index:999;
position:absolute;
top:0;
background:rgba(0,0,0,0.5);
}
.category .post.entry .container.clearfix {
z-index: 9999999;
}

Hide the Email icon in Divi theme header

To hide the email icon in the DIVI theme header, just enter the below custom CSS:

/* Hide Mail Icon in Header */
#et-info-email {
    display: none;

}

The icon appears if you only wish to have the phone number appear. You can disable them in theme customizer if you do not wish to display the phone and email icons.

Remove bullet points on DIVI footer menu and left align

If you add a custom navigation menu to the DIVI theme, you will notice that these bullet points appear before the text of each menu item.

These can easily be removed by adding the below CSS to your custom CSS box in the WordPress admin area:

 .footer-widget li:before { 
display: none; 
}

If you add this, you will notice that there is still space for the bullet point although it is no longer visible. To have the menu items left aligned with the title you will need to add the follow CSS:

#footer-widgets .footer-widget li {
padding-left: 0px;
}

Aligning Gravity Forms survey responses side by side

The Gravity Forms plugin has a nice Survey add-on that can be installed. You can align the answers of the survey side by side if you wish so they are not stacked.

They are stacked on top of each other by default and the picture below will give you an idea of that.

 

If you wish to have the Gravity Forms survey form slightly more condensed as per the 1st question in the above example then all you need to do is a add a ready made CSS style. 

The custom CSS class to add is: gf_list_inline

You can add this by editing form and adding the text to the Custom CSS class as pictured below.





Custom CSS to use with Gravity Forms on dark background

Using the Gravity Forms plugin for WordPress is a great way to build some awesome forms. I recently added some forms to a page with a dark background. I found some text hard to read. I was able to fix this by adding the below custom CSS code...

body .gfield_description {
    color:#fff;
}

body .gf_step_label {
    color:#fff;
    font-size:20px;
font-weight:500;
line-height:1.4em;
}

body .validation_error {
    color:#fff!important;
}

body .gfield_label {
    color:#fff!important;
}

body .gfield gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_below field_description_below gfield_visibility_visible {
    color:#fff!important;
}

Fixing the field text color in Divi Email Optin Module

Finding that the text is white in the Divi email opt-in? Add this custom and edit with the colors you wish to use.

.et_pb_newsletter_form .et_pb_signup_custom_field_0 .input[type="checkbox"] + label {
font-family: 'Verdana',Helvetica,Arial,Lucida,sans-serif;
font-size: 10px;
color: #ffffff !important;
text-align: left;
text-shadow: 0em 0.1em 0.1em #ffffff;
}

Add a background and change the font of your WordPress blockquote

In a previous post, I demonstrated how to center align your WordPress blockquote, if you are looking for some additional styling, take a look at this custom CSS:

blockquote {
max-width: 500px;
text-align: center;
margin: 15px;
padding: 15px;
font-family: Helvetica Neue,Helvetica,sans-serif;
font-size: 22px;
color: #95a5a6;
background: #ccc;
}

How to center align your WordPress blockquote

With most of the content on your WordPress page or post being left aligned. Center aligning a blockquote is a great way to have them stand out.

To center align your WordPress blockquote, all you need to do is add this custom CSS code to the additional CSS box in your WordPress theme:

blockquote {
max-width: 500px;
text-align: center;
margin: 15px;
padding: 15px;
}

Centering the DIVI menu on mobile only

If you would like to make menu centered on mobile only, add this css code in the custom css field of the theme options:

.et_mobile_menu li a {
text-align: center;
}

How to Disable All Animations in DIVI

Looking to disable all animations within a Divi WordPress site, Globally?

There is an easy way to disable the animations with DIVI, just add this code to the Custom CSS area from Theme Options:

.et_pb_section, .et_pb_section *{
animation:none !important;
}


Thanks to the people that left comments below, I have updated the below code with this one above which should work much better with more recent versions of DIVI. If there is any trouble, please let me know by leaving a comment.

.et_pb_section .et_pb_module {
animation-name: none!important;
-webkit-animation-name: none!important;
-moz-animation-name: none!important;
-ms-animation-name: none!important;
-o-animation-name: none!important;
opacity: 1!important;
transform: translate3d(0px, 0px, 0px)!important;
}

Add second telephone number to DIVI header

Using the DIV theme by Elegant Themes and you may already have the email address and telephone number in the top header, but what if you also want to add whatapp number with the whatsapp icon. This post will explain how to add an extra number with an icon to the top header?

You need to edit the header.php in your theme. please go to your theme folder then edit header.php.

Please fine the line:

<span id="et-info-phone"><?php echo et_sanitize_html_input_text( $et_phone_number ); ?></span>

And paste this line right after it:
(replace "123123123" with your number)

<span class='additional_number'>123123123</span>
 
 Then go to custom css option and add this code in your css option:

.additional_number:before {
font-family:'ETModules';
content : '\e090';
}

Remove the mobile menu icon from DIVI theme

To remove this completely, add this CSS code:

#mobile_menu_bar{
display:none;
}

Or to adjust the size at which is it displayed you can use something like this CSS code:

@media (max-width:480px){
#mobile_menu_bar{
display:none;
}}



How to center secondary header elements with Divi

To center the telephone number and email address in the secondary header of Divi. Add the following code in custom css of Divi theme's option:


#et-info {
float: none !important;
text-align: center;
}

Remove Description text in WooCommerce with Divi Theme

To remove the word "Description" from all product listing pages in WooCommerce with Divi.

Add this css code to Divi >> Theme Options >> General Panel >> Custom Css
 
.woocommerce-page div.product .woocommerce-tabs #tab-description h2:nth-child(1) {
display: none;
}

Adding a link to Divi featured image posts slider

To link to the post both in the title and in the featured image in posts slider module. Add this custom CSS to to DIVI Custom CSS window.

.et_pb_post_slider .et_pb_slide_title a::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1;
}

Creating a custom DIVI style button with CSS

To create a custom DIVI button you can use this CSS on any site and edit it to suit:

.custom-button a:hover {
color: #ffffff!important;
background: #000000!important;
border-color: #000000!important;
border-radius: 2px;
letter-spacing: 1px;
transition-delay:0s;
transition-duration:0.2s;
transition-property:all;
transition-timing-function:ease;
}

Hide date from related posts in Extra theme

To remove the date from the related posts, add this css code in WordPress admin to Theme Options >> General Panel >> Custom Css.

.related-posts-content .date {
display: none;
}

Change the background color of the Divi mobile menu

If you want to change the background color of the mobile menu, then please add this css code in the custom css field of theme options:

ul#mobile_menu {
background-color: red !important;
}
#main-header .et_mobile_menu li {
background: none;
}

Captcha answer text color white text on white background

If you are looking to change the color of the Captcha answer text because you may currently have white text on a white background.

Add the following code in custom CSS of the theme option:


.custom_contact.et_pb_contact_form_0.et_pb_contact_form_container .input {
color:#686867 !important;
}

Hide the dates from DIVI projects on home page

Looking to delete the dates from my projects on home page?

Add the css code below in Theme Options > Custom CSS box:

html .et_pb_portfolio_item .post-meta {
display: none;
}

Parent items in DIVI menu not clickable

To make the main menu items or 'parents' in the menu non clickable. You can link them to a # as many people do as a work-a-around. You can also add this custom CSS.

#top-menu .menu-item-has-children>a:first-child {
pointer-events: none;
}

Resize and Restyle the DIVI comments

Here is some custom css to style the comment thread on the Elegant Themes DIVI theme.

.single-post .comment-body {padding-left: 0; padding-right: 0;}
.single-post .et_pb_button::after, .single-post .et_pb_button::before{content: none;}
.single-post #comment-wrap .comment-reply-link.et_pb_button {position: absolute; top: 100%;}
.single-post #commentform .form-submit .et_pb_button:hover {color: #000 !important; background-color: #fff !important; border: 2px solid #000 !important;}

Custom Slider Style for Blog Post in DIVI

Here is a custom CSS snippet to re-style a blog post in slider module:

.my_new_slider .et_pb_slides .et_pb_slider_container_inner{
width: 50% !important;

vertical-align:top !impoartant;

How to make DIVI blog featured images the same height

Unless you upload your DIVI images the same size or proportions, then they may appear to have mixed sizes. This code is not perfect but does help tidy them up a bit.

.et_pb_post img {
max-height: 400px!important;
}

Change the height of DIVI blog grid layout

To make this more of a square, just add this css code to Theme Options > General Panel > Custom Css 

.et_pb_blog_grid .et_pb_image_container img {
height: 230px;
}


https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=15469&url=44904
 

DIVI Mobile Menu Custom Style

This will increase the size of DIVI mobile menu (hamburger icon) and make the bars white.

Add this custom CSS code to your DIVI theme menu:

@media (min-width: 980px) {
.et-fixed-header#main-header {
background-color: #000 !important;
}
}

@media (max-width: 980px) {
.et-fixed-header#main-header {
background-color: transparent;
}
}
@media (max-width: 980px) {
.et-fixed-header .logo_container {
display: none;
}
}

Make the DIVI mobile menu icon Sticky

 To make the DIVI mobile menu icon Sticky add this custom CSS:


.et_header_style_left .mobile_menu_bar {
padding-bottom: 0px !important;
background: #000 !important;
}

.mobile_menu_bar {
position: fixed;
}

DIVI Theme Accent color over-rides WooCommerce buttons

If you use the WordPress DIVI theme with WooCommerce, then perhaps you have noticed the style of the buttons have changed.

This CSS snippet is all you need to fix the issue.

.woocommerce .button {
background:red !important;
color: #fff !important;
}

How to change your subreddit name to an image with CSS

To changes your reddit's name (at the top) to an image. You must include the dimentions
you want your image to be.
 
.redditname a{
background:url(IMAGE);
height: ??px;
width: ??px;}

#header-bottom-left{
height: ??px;}

.redditname a{
text-indent:-9001px;
}

#header-img-a,
.redditname a,
.tabmenu {
display: inline;
float: left;}

.tabmenu{
position:relative;
top:100%;
margin-top:-16px!important;}


You can view an example of the Reddit CSS Stylesheet here.

Hide the downvote arrow on Reddit subreddit

You can customize your sub-reddit page with CSS. To hide the downvote arrow, simply enter this CSS code:

.arrow.down {
visibility: hidden;
display: none
}


You can view an example of the Reddit CSS Stylesheet here.

Increase padding of WooCommerce image

You may find you need to increase the padding on a WooCommerce products pages with the DIVI theme. You can try this CSS code here here:

.single-product section.related.products {
    clear: both;
    padding-top: 20px;
}

How to hide the DIVI secondary menu before scroll

You can remove the secondary menubar before scrolling with this CSS snippet below. This will make the primary menu bar visible before scrolling, but the secondary bar only available when scrolled.

The custom CSS code is:

.et_fixed_nav #top-header {
visibility: hidden;
}

.et_fixed_nav #top-header.et-fixed-header {
visibility: visible;
}

Increase the font size in ProtonMail

You can increase the font size in ProtonMail by adding this custom CSS. Just remeber to edit the number values with your desired sizes.

h1 {
font-size:24px;
}

h2 {
font-size:22px;
}

h3 {
font-size:20px;
}

h4 {
font-size:16px;
}

h5 {
font-size:14px;
}

h5,h6 {
font-weight:700;
}

h6 {
font-size:12px;
}

Hide only the email icon in DIVI

If you are using DIVI and only need a number displayed. You may notice an email icon appear even though there is no email added.

Enter this CSS code to custom CSS to remove it:

#et-info-phone { display:none !important }

Remove the think line below DIVI header

The thin line below the DIVI header is actually a shadow. To remove the line, add the below to your custom CSS:


header#main-header.et-fixed-header, #main-header{
    -webkit-box-shadow:none !important;
    -moz-box-shadow:none !important;
    box-shadow:none !important;
}

How to fix the overlapping logo on mobile with DIVI

If you are using the DIVI theme with a square shaped logo instead of the standard landscape size. You might find a few overlap issues.

Try to add this css code to Divi - Theme Options - General - Custom Css and change the highlighted value:

@media only screen and (max-width: 980px){
#logo {
min-height: 80px;
}
}

Make DIVI Blog Category pages have 2 columns by default

Add this custom CSS code to your DIVI Custom CSS box and you will have blog posts split into 2 columns.

.archive .et_pb_post {
float: left;
width: 45%;
margin-right: 5%;
}
.archive .et_pb_post:nth-child(2n+1) {
clear:both;
}

CSS Loading Animations

Here are 8 full CSS3 Loading Animations by Matt Gentile that you can use in place of .gif and .svg animations (SVG's SMIL animations will be removed soon according to Google and other browsers).

The HTML:

<div class="loader_content loader_1">
</div>
<div class="loader_content loader_2">
</div>
<div class="loader_content loader_3">
</div>
<div class="loader_content loader_4">
</div>
<div class="loader_content loader_5">
</div>
<div class="loader_content loader_6">
</div>
<div class="loader_content loader_7">
</div>
<div class="loader_content loader_8">
</div>

The CSS:

.loader_content {
    display: inline-block;
    position: relative;
    max-width: 2em;
    max-height: 2em;
    min-width: 0em;
    min-height: 0em;
    background: none;
    float: left;
    padding: 0;
    margin: 2em
}
/* end loader_content */
/* loader_content.loader_1 below: */
.loader_content.loader_1 {
    height: 2em;
    width: 2em;
    top: 0;
    left: 0;
    background: #ccc;
    border-radius: 2em;
    -webkit-animation: spin 1.5s infinite linear;
    -moz-animation: spin 1.5s infinite linear;
    animation: spin 1.5s infinite linear;
    overflow: hidden
}
.loader_content.loader_1::before {
    display: inline-block;
    position: absolute;
    content: '|';
    margin: 0;
    width: 15%;
    height: 2em;
    top: 0;
    left: 41.5%;
    text-indent: -9999px;
    background: #666;
    border-radius: 0
}
.loader_content.loader_1::after {
    display: inline-block;
    position: absolute;
    content: '0';
    margin: 0;
    width: 1.75em;
    height: 1.75em;
    top: .13em;
    left: .13em;
    text-indent: -9999px;
    background: #666;
    border-radius: 2em
}
/* end loader_content.loader_1 */
/* loader_content.loader_2 below: */
.loader_content.loader_2 {
    height: 2em;
    width: .25em;
    top: 0;
    left: .75em;
    background: #ccc;
    border-radius: .5em;
    -webkit-animation: scale_2 1s infinite ease-out;
    -moz-animation: scale_2 1s infinite ease-out;
    animation: scale_2 1s infinite ease-out
}
.loader_content.loader_2::before {
    display: inline-block;
    position: relative;
    content: '|';
    height: 2em;
    width: .25em;
    top: 0;
    left: .75em;
    background: #ccc;
    border-radius: .5em;
    text-indent: -9999px;
    -webkit-animation: scale_3 1s infinite ease-in !important;
    -moz-animation: scale_3 1s infinite ease-in !important;
    animation: scale_3 1s infinite ease-in !important
}
.loader_content.loader_2::after {
    display: inline-block;
    position: absolute;
    content: '|';
    height: 2em;
    width: .25em;
    top: 0;
    left: -.75em;
    background: #ccc;
    border-radius: .5em;
    text-indent: -9999px;
    -webkit-animation: scale_1 1s infinite ease-in !important;
    -moz-animation: scale_1 1s infinite ease-in !important;
    animation: scale_1 1s infinite ease-in !important
}
/* end loader_content.loader_2 */
/* loader_content.loader_3 below: */
.loader_content.loader_3 {
    position: relative;
    display: inline-block;
    height: .5em;
    width: .5em;
    top: .75em;
    left: 0;
    margin-right: 3em;
    border-radius: 1em;
    -webkit-animation: flash_1 1s infinite ease;
    -moz-animation: flash_1 1s infinite ease;
    animation: flash_1 1s infinite ease
}
.loader_content.loader_3::before {
    position: absolute;
    display: inline-block;
    height: .5em;
    width: .5em;
    top: 0;
    left: 1.8em;
    border-radius: 1em;
    content: '0';
    text-indent: -9999px;
    -webkit-animation: flash_2 1s infinite ease-in-out !important;
    -moz-animation: flash_2 1s infinite ease-in-out !important;
    animation: flash_2 1s infinite ease-in-out !important;
    -webkit-animation-delay: 1.5s !important;
    -moz-animation-delay: 1.5s !important;
    animation-delay: 1.5s !important
}
.loader_content.loader_3::after {
    position: absolute;
    display: inline-block;
    height: .5em;
    width: .5em;
    top: 0;
    left: .9em;
    border-radius: .9em;
    content: '0';
    text-indent: -9999px;
    -webkit-animation: flash_2 1s infinite ease-in-out !important;
    -moz-animation: flash_2 1s infinite ease-in-out !important;
    animation: flash_2 1s infinite ease-in-out !important;
    -webkit-animation-delay: 2.1s !important;
    -moz-animation-delay: 2.1s !important;
    animation-delay: 2.1s !important
}
/* end loader_content.loader_3 */
/* loader_content.loader_4 below: */
.loader_content.loader_4 {
    position: relative;
    display: block;
    background: #ccc;
    height: 2em;
    width: 2em;
    top: 0em;
    left: 0;
    border-radius: 2em;
    overflow: hidden !important
}
.loader_content.loader_4::before { /* minute */
    position: relative;
    display: inline-block;
    background: linear-gradient(to right, #666 60%, transparent 40%);
    height: .25em;
    width: 1.75em;
    top: .87em;
    left: .13em;
    content: '|';
    text-indent: -9999px;
    border-radius: 100%;
    -webkit-animation: tick_tock 60s infinite ease-out;
    -moz-animation: tick_tock 60s infinite ease-out;
    animation: tick_tock 60s infinite ease-out
}
.loader_content.loader_4::after { /* hour */
    position: absolute;
    display: inline-block;
    background: linear-gradient(to bottom, #666 70%, transparent 30%);
    height: 1.75em;
    width: .25em;
    top: .13em;
    left: .9em;
    content: '|';
    text-indent: -9999px;
    border-radius: 100%;
    -webkit-animation: tick_tock 5s infinite ease-out;
    -moz-animation: tick_tock 5s infinite ease-out;
    animation: tick_tock 5s infinite ease-out
}
/* end loader_content.loader_4 */
/* loader_content.loader_5:below */
.loader_content.loader_5 {
    position: relative;
    display: block;
    background: #666;
    height: 2em;
    width: 2em;
    top: 0em;
    left: 0;
    border-radius: 0;
    -webkit-animation: spin 1s infinite linear;
    -moz-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
    overflow: hidden !important
}
.loader_content.loader_5::before { /* minute */
    position: absolute;
    display: inline-block;
    background: #ccc;
    height: .5em;
    width: .5em;
    right: 0em;
    top: 1em;
    content: '0';
    text-indent: -9999px;
    border-radius: .5em
}
.loader_content.loader_5::after { /* hour */
    position: absolute;
    display: inline-block;
    background: #ccc;
    height: .5em;
    width: .5em;
    top: .5em;
    left: 0em;
    content: '0';
    text-indent: -9999px;
    border-radius: .5em
}
/* end loader_content.loader_5 */
/* loader_content.loader_6:below */
.loader_content.loader_6 {
    position: relative;
    display: block;
    background: #666;
    height: 2em;
    width: 2em;
    top: 0em;
    left: 0;
    border-radius: 0;
    overflow: hidden !important
}
.loader_content.loader_6::before { /* minute */
    position: absolute;
    display: inline-block;
    background: #ccc;
    height: .75em;
    width: .75em;
    right: 0em;
    bottom: 0em;
    content: '0';
    text-indent: -9999px;
    border-radius: .5em;
    -webkit-animation: bounce_1 .6s infinite ease-in-out;
    -moz-animation: bounce_1 .6s infinite ease-in-out;
    animation: bounce_1 .6s infinite ease-in-out
}
.loader_content.loader_6::after { /* hour */
    position: absolute;
    display: inline-block;
    background: #ccc;
    height: .75em;
    width: .75em;
    bottom: 0em;
    left: 0em;
    content: '0';
    text-indent: -9999px;
    border-radius: .5em;
    -webkit-animation: bounce_2 .6s infinite ease-in-out;
    -moz-animation: bounce_2 .6s infinite ease-in-out;
    animation: bounce_2 .6s infinite ease-in-out
}
/* end loader_content.loader_6 */
/* loader_content.loader_7:below */
.loader_content.loader_7 {
    position: relative;
    display: block;
    background: #666;
    height: 2em;
    width: 2em;
    top: 0em;
    left: 0;
    border-radius: 0;
    overflow: hidden !important
}
.loader_content.loader_7::before { /* minute */
    position: absolute;
    display: inline-block;
    background: #ccc;
    height: .75em;
    width: .75em;
    right: 0em;
    top: .5em;
    content: '0';
    text-indent: -9999px;
    border-radius: .5em;
    -webkit-animation: fade_1 1s infinite ease;
    -moz-animation: fade_1 1s infinite ease;
    animation: fade_1 1s infinite ease
}
.loader_content.loader_7::after { /* hour */
    position: absolute;
    display: inline-block;
    background: #ccc;
    height: .75em;
    width: .75em;
    top: .5em;
    left: 0em;
    content: '0';
    text-indent: -9999px;
    border-radius: .5em;
    -webkit-animation: fade_2 1s infinite ease;
    -moz-animation: fade_2 1s infinite ease;
    animation: fade_2 1s infinite ease
}
/* end loader_content.loader_7 */
/* loader_content.loader_8:below */
.loader_content.loader_8 {
    position: relative;
    display: inline-block;
    height: 2em;
    width: 2em;
    top: 0;
    left: 0;
    border-radius: 2em;
    overflow: hidden !important;
    -webkit-animation: pulse 1s infinite linear;
    -moz-animation: pulse 1s infinite linear;
    animation: pulse 1s infinite linear
}
/* end loader_content.loader_8 */
/* @keyframes animations below: */
@keyframes spin {
    0%{transform:rotateZ(0deg)}
    100%{transform:rotateZ(360deg)}
}
@keyframes scale_1 {
    0%{transform:scale(1)}
    50%{transform:scale(.25)}
    100%{transform:scale(1)}
}
@keyframes scale_2 {
    0%{transform:scale(1)}
    50%{transform:scale(.25)}
    100%{transform:scale(1)}
}
@keyframes scale_3 {
    0%{transform:scale(.25)}
    50%{transform:scale(1.5)}
    100%{transform:scale(.25)}
}
@keyframes flash_1 {
    0%{background:#ccc}
    50%{background:#888}
    100%{background:#ccc}
}
@keyframes flash_2 {
    0%{background:#ccc}
    50%{background:#888}
    100%{background:#ccc}
}
@keyframes tick_tock {
    0%{transform:rotateZ(0deg)}
    12.5%{transform:rotateZ(45deg)}
    25%{transform:rotateZ(90deg)}
    37.5%{transform:rotateZ(135deg)}
    50%{transform:rotateZ(180deg)}
    62.5%{transform:rotateZ(225deg)}
    75%{transform:rotateZ(270deg)}
    87.5%{transform:rotateZ(315deg)}
    100%{transform:rotateZ(360deg)}
}
@keyframes bounce_1 {
    0%{bottom:1.25em}
    50%{bottom:0;height:.6em}
    100%{bottom:1.25em}
}
@keyframes bounce_2 {
    0%{bottom:0;height:.6em}
    50%{bottom:1.25em}
    100%{bottom:0;height:.725em}
}
@keyframes fade_1 {
    0%{background:#ccc}
    50%{background:#888}
    100%{background:#ccc}
}
@keyframes fade_2 {
    0%{background:#888}
    50%{background:#ccc}
    100%{background:#888}
}
@keyframes pulse {
    0%{background:radial-gradient(#ccc, #3c3c3c);opacity:.05}
    10%{background:radial-gradient(#ccc, #3c3c3c);opacity:.25}
    20%{background:radial-gradient(#ccc, #3c3c3c);opacity:.5}
    30%{background:radial-gradient(#ccc, #3c3c3c);opacity:.75}
    40%{background:radial-gradient(#ccc, #3c3c3c);opacity:1}
    50%{background:radial-gradient(#ccc, #3c3c3c);opacity:1}
    60%{background:radial-gradient(#ccc, #3c3c3c);opacity:.75}
    70%{background:radial-gradient(#ccc, #3c3c3c);opacity:.5}
    80%{background:radial-gradient(#ccc, #3c3c3c);opacity:.25}
    90%{background:radial-gradient(#ccc, #3c3c3c);opacity:.05}
    100%{background:#666;opacity:0}
}
@-webkit-keyframes spin {
    0%{-webkit-transform:rotateZ(0deg);transform:rotateZ(0deg)}
    100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}
}
@-webkit-keyframes scale_1 {
    0%{-webkit-transform:scale(1);transform:scale(1)}
    50%{-webkit-transform:scale(.25);transform:scale(.25)}
    100%{-webkit-transform:scale(1);transform:scale(1)}
}
@-webkit-keyframes scale_2 {
    0%{-webkit-transform:scale(1);transform:scale(1)}
    50%{-webkit-transform:scale(.25);transform:scale(.25)}
    100%{-webkit-transform:scale(1);transform:scale(1)}
}
@-webkit-keyframes scale_3 {
    0%{-webkit-transform:scale(.25);transform:scale(.25)}
    50%{-webkit-transform:scale(1.5);transform:scale(1.5)}
    100%{-webkit-transform:scale(.25);transform:scale(.25)}
}
@-webkit-keyframes flash_1 {
    0%{background:#ccc}
    50%{background:#888}
    100%{background:#ccc}
}
@-webkit-keyframes flash_2 {
    0%{background:#ccc}
    50%{background:#888}
    100%{background:#ccc}
}
@-webkit-keyframes tick_tock {
    0%{-webkit-transform:rotateZ(0deg);transform:rotateZ(0deg)}
    12.5%{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}
    25%{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}
    37.5%{-webkit-transform:rotateZ(135deg);transform:rotateZ(135deg)}
    50%{-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg)}
    62.5%{-webkit-transform:rotateZ(225deg);transform:rotateZ(225deg)}
    75%{-webkit-transform:rotateZ(270deg);transform:rotateZ(270deg)}
    87.5%{-webkit-transform:rotateZ(315deg);transform:rotateZ(315deg)}
    100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}
}
@-webkit-keyframes bounce_1 {
    0%{bottom:1.25em}
    50%{bottom:0;height:.6em}
    100%{bottom:1.25em}
}
@-webkit-keyframes bounce_2 {
    0%{bottom:0;height:.6em}
    50%{bottom:1.25em}
    100%{bottom:0;height:.725em}
}
@-webkit-keyframes fade_1 {
    0%{background:#ccc}
    50%{background:#888}
    100%{background:#ccc}
}
@-webkit-keyframes fade_2 {
    0%{background:#888}
    50%{background:#ccc}
    100%{background:#888}
}
@-webkit-keyframes pulse {
    0%{background:radial-gradient(#ccc, #3c3c3c);opacity:.05}
    10%{background:radial-gradient(#ccc, #3c3c3c);opacity:.25}
    20%{background:radial-gradient(#ccc, #3c3c3c);opacity:.5}
    30%{background:radial-gradient(#ccc, #3c3c3c);opacity:.75}
    40%{background:radial-gradient(#ccc, #3c3c3c);opacity:1}
    50%{background:radial-gradient(#ccc, #3c3c3c);opacity:1}
    60%{background:radial-gradient(#ccc, #3c3c3c);opacity:.75}
    70%{background:radial-gradient(#ccc, #3c3c3c);opacity:.5}
    80%{background:radial-gradient(#ccc, #3c3c3c);opacity:.25}
    90%{background:radial-gradient(#ccc, #3c3c3c);opacity:.05}
    100%{background:#666;opacity:0}
}
@-moz-keyframes spin {
    0%{-moz-transform:rotateZ(0deg);transform:rotateZ(0deg)}
    100%{-moz-transform:rotateZ(360deg);transform:rotateZ(360deg)}
}
@-moz-keyframes scale_1 {
    0%{-moz-transform:scale(1);transform:scale(1)}
    50%{-moz-transform:scale(.25);transform:scale(.25)}
    100%{-moz-transform:scale(1);transform:scale(1)}
}
@-moz-keyframes scale_2 {
    0%{-moz-transform:scale(1);transform:scale(1)}
    50%{-moz-transform:scale(.25);transform:scale(.25)}
    100%{-moz-transform:scale(1);transform:scale(1)}
}
@-moz-keyframes scale_3 {
    0%{-moz-transform:scale(.25);transform:scale(.25)}
    50%{-moz-transform:scale(1.5);transform:scale(1.5)}
    100%{-moz-transform:scale(.25);transform:scale(.25)}
}
@-moz-keyframes flash_1 {
    0%{background:#ccc}
    50%{background:#888}
    100%{background:#ccc}
}
@-moz-keyframes flash_2 {
    0%{background:#ccc}
    50%{background:#888}
    100%{background:#ccc}
}
@-moz-keyframes tick_tock {
    0%{-moz-transform:rotateZ(0deg);transform:rotateZ(0deg)}
    12.5%{-moz-transform:rotateZ(45deg);transform:rotateZ(45deg)}
    25%{-moz-transform:rotateZ(90deg);transform:rotateZ(90deg)}
    37.5%{-moz-transform:rotateZ(135deg);transform:rotateZ(135deg)}
    50%{-moz-transform:rotateZ(180deg);transform:rotateZ(180deg)}
    62.5%{-moz-transform:rotateZ(225deg);transform:rotateZ(225deg)}
    75%{-moz-transform:rotateZ(270deg);transform:rotateZ(270deg)}
    87.5%{-moz-transform:rotateZ(315deg);transform:rotateZ(315deg)}
    100%{-moz-transform:rotateZ(360deg);transform:rotateZ(360deg)}
}
@-moz-keyframes bounce_1 {
    0%{bottom:1.25em}
    50%{bottom:0;height:.6em}
    100%{bottom:1.25em}
}
@-moz-keyframes bounce_2 {
    0%{bottom:0;height:.6em}
    50%{bottom:1.25em}
    100%{bottom:0;height:.725em}
}
@-moz-keyframes fade_1 {
    0%{background:#ccc}
    50%{background:#888}
    100%{background:#ccc}
}
@-moz-keyframes fade_2 {
    0%{background:#888}
    50%{background:#ccc}
    100%{background:#888}
}
@-moz-keyframes pulse {
    0%{background:radial-gradient(#ccc, #3c3c3c);opacity:.05}
    10%{background:radial-gradient(#ccc, #3c3c3c);opacity:.25}
    20%{background:radial-gradient(#ccc, #3c3c3c);opacity:.5}
    30%{background:radial-gradient(#ccc, #3c3c3c);opacity:.75}
    40%{background:radial-gradient(#ccc, #3c3c3c);opacity:1}
    50%{background:radial-gradient(#ccc, #3c3c3c);opacity:1}
    60%{background:radial-gradient(#ccc, #3c3c3c);opacity:.75}
    70%{background:radial-gradient(#ccc, #3c3c3c);opacity:.5}
    80%{background:radial-gradient(#ccc, #3c3c3c);opacity:.25}
    90%{background:radial-gradient(#ccc, #3c3c3c);opacity:.05}
    100%{background:#666;opacity:0}
}
/* end @keyframes animations */

Posted in