Loading...

AtoZ CSS Quick Tip: Keyframe Animations using HTML&CSS

View: 568    Dowload: 0   Comment: 0   Post by: hanhga   Category: HTML-CSS template   Fields: Other

This article is a part of our AtoZ CSS Series. You can find other entries to the series here. View the full screencast and transcript on Keyframe Animations here.

Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, in this article I’ve added a new quick tip/lesson about keyframe animations for you.

K is for @keyframes

In this week’s tip, we look at ways to handle vendor prefixes and a quick tip for refactoring your @keyframes into a more condensed format.

We talked a lot about @keyframes in the video about the letter K. Here are some extra tips that you might find useful when working with CSS animations (and any current or future experimental properties).

Tip 1

When setting up your keyframes for an animation, it’s quite common for certain points of the animation to share the same values for particular properties. Instead of having a long list of keyframes, you can combine them into a comma separated list, just like you would with selectors that share the same properties and values.

@keyframes pulse {
  0%, 50% {font-size: 10px;}
  25%, 100% {font-size: 20px;}
}

/* just like */
h1, h2, h3 {
  font-family: 'Avenir', sans-serif;
}

Tip 2

Support for CSS animations is very good — at the time of writing the global support is 89.5% and all supporting browsers have both @keyframes and animation unprefixed.

However, to ensure backwards compatibility with Safari 8 and iOS 8.4 and below, you’ll need -webkit vendor prefixes to ensure your animations actually play. Adding these manually can make your code bloated and hard to maintain as every tiny change will need to be replicated in multiple places. This can be prone to human error which is never a good thing.

There are two ways that you can keep your code nice and clean, and also avoid the manual task of duplication.

You could use the -prefix-free JavaScript library by Lea Verou. This takes care of all the prefixing for you, so you just write the unprefixed code, and the script runs in the browser and injects all the necessary prefixes for you based on support for features in the browser currently being used.

Another option is to use Autoprefixer. This is a CSS post-processer that you run after you’ve finished writing your unprefixed code – usually as part of an automated task runner like Grunt or Gulp. Autoprefixer uses info from Caniuse to determine what prefixes are required.

I personally use Autoprefixer with a Gulp task and haven’t written a vendor prefix for months. It’s a great tip to speed up your workflow and works for all CSS properties, not just @keyframes!

AtoZ CSS Quick Tip: Keyframe Animations using HTML&CSS

This article is a part of our AtoZ CSS Series. You can find other entries to the series here. View the full screencast and transcript on Keyframe Animations here.

Posted on 01-10-2016 

Comment:

To comment you must be logged in members.

Files with category

  • Business/Consulting HTML & CSS Template

    Business/Consulting HTML & CSS Template

    View: 18    Download: 1   Comment: 0

    Category: HTML-CSS template     Fields: none

    It's elegant Business HTML Template. You can use it for creating Business, Finance, Corporate, Consulting websites or promoting your services. Looks perfect in all major browsers, tablets, and phones. Clean and commented code lets you customize it...

  • Photography Portfolio HTML/CSS Template

    Photography Portfolio HTML/CSS Template

    View: 22    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    Portfolio and Photography HTML5/CSS template build with latest bootstrap framework , best suited for photographers. Features 3 HTML5/CSS3 Templates Video background for the homepage (YouTube Only) Supersized slideshow for the homepage Built on...

  • Creative Login Form with Validation

    Creative Login Form with Validation

    View: 30    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    Upturn customized LOGIN FORM & INPUT STYLES is ready for Desktop, tablet and mobile devices. Simple to implement. Just copy the HTML and link to the CSS,JS file. You can easily edit, change and customize them for yourself. For students or anyone else...

  • Login Form Like Facebook

    Login Form Like Facebook

    View: 28    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    This is a simple Facebook form that can be imported to your site with ease. Please don't forget to give credit to original developer because I really worked hard to develop this project and please don't forget to like and share it if you found it...

  • Custom-able Invoice: Easy to Use

    Custom-able Invoice: Easy to Use

    View: 22    Download: 1   Comment: 0

    Category: HTML-CSS template     Fields: none

    Make billing easy with Free Invoice Template. Professional invoices for your business: Proforma, Service, Sales, Freelance. Please don't forget to give credit to original developer because I really worked hard to develop this project and please don't...

  • Awsome Responsive HTML Pages

    Awsome Responsive HTML Pages

    View: 18    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    A responsive html pages. The site have self sliding images on the index page. There are drop down menu with icons on them. The site have bootstrap that makes it responsive to different devices .

  • How To Create an Animated Search Form

    How To Create an Animated Search Form

    View: 259    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    How To Create an Animated Search Form, Learn how to create an animated search form with CSS.

  • How to reset / remove chrome's input highlighting / focus border? used CSS

    How to reset / remove chrome's input highlighting / focus border? used CSS

    View: 212    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    You have seen that chrome puts a thicker border on :focus but it kind of looks off in my case where I've used border-radius also. Is there anyway to remove that?

 
File suggestion for you
Loading...
File top downloads
Loading...
Loading...
Codetitle - library source code to share, download the file to the community
Copyright © 2018. All rights reserved. codetitle Develope by Vinagon .Ltd