onlyWebPro » HTML & CSS

Create Facebook App Style Slide-Out Navigation

admin — Sat, 18 May 2013 07:58:47 +0000

Introduction to Slide-Out Navigation (a.k.a left-hand navigation)

Back to October 2011, Facebook introduced its new navigation pattern – “slide-out” navigation” which available on Facebook for iPad & iPhone application. The slide-out navigation consists of a panel that slide out from left of the main content area, revealing a list of clickable items that serves as a primary navigation for the application. This navigation pattern lets developers to add permanent navigation to their application without taking up valuable screen real estate. Users can choose to reveal the navigation anytime when they need it.

Facebook navigation pattern – Slide-Out Navigation

This tutorial will show you how to build a Facebook app-like slide-out navigation for your web app using CSS & JQuery.

View Demo

HTML Markup

Here is the basic HTML structure of the slide-out navigation.




Untitled Document




	Welcome Peter Yee
    Home
    Profile
    Games
    Message
    Settings
    Logout



	
    	
            Show/Hide Left Push Menu
        
        
        
        Introducing Facebook Home
        Facebook Home is software for your phone designed to put your friends above everything else. You can download Facebook Home for free or purchase it pre-installed on a phone. Facebook Home works together with the Facebook for Android and Facebook Messenger apps to enable its main features:
        
        	Cover feed: Glance at your phone for photos and posts from your Facebook News Feed.
            Chat heads: Send and receive texts and Facebook messages in one place. Open, close and drag chat heads around your screen to keep chatting while you’re using other apps.
            Notifications: See news as it happens with bigger, bolder notifications on your home screen.
            App launcher: Get right to your favorite apps and post to Facebook from the same place.

The body of HTML document contains a class for us to animate it. We’ve divide the document into 2 main regions – navigation panel & info container.

The CSS

The CSS styles that we implemented is quite simple and straightforward. Basically, we just need to concentrate on these 6 styles – .pushmenu, .pushmenu-left, .pushmenu-left.pushmenu-open, .pushmenu-push, #nav_list & #nav_list.active.

.pushmenu & .pushmenu-left

The navigation panel should always be accessible for the users, even if they scroll down the page. So the position of navigation panel should be fixed. That’s y we set the “position:fixed”. The “left:-240px” is set to hide the navigation panel from screen.

.pushmenu-left.pushmenu-open

Here we change the value of “left” property to 0, to reveal the navigation panel.

.pushmenu-push

We want the entire page included info container move to right when revealing the navigation panel. Here is how we apply the CSS transition property – “transition: all 0.3s ease”.

#nav_list & #nav_list.active

This is the style for the button (3 lines button on top left). The 3 lines button icon will be changed to back arrow icon when the navigation panel revealed.

JavaScript

Using JavaScript to toggle class of the navigation panel, document body & the 3 lines button (top left).

Save your document and preview on your browse. You will a list of clickable items when press on top left 3 lines button and hide it when press on the back arrow button.

View Demo

Build Intelligent Layout Using CSS Calc() Property

admin — Fri, 12 Apr 2013 06:43:25 +0000

Introduction of CSS calc()

Dynamically counting the dimension of an element is really hard for web developers. We have no way of doing any kind of dynamic unit calculations using CSS. For example, it’d be nice to be able to reserve 30% of an area plus a fixed amount of space, say 300px. Well thanks to CSS calc() property, we can do that right now using CSS.

The CSS calc() property allows us to calculate a length value using arithmetic expression, which means we can use it to define the sizes of div, the values of padding, the widths of margin, and so forth.

Using CSS calc()

The CSS calc() can be used in anywhere of CSS style-sheet. The 2 main features of CSS calc() are:

Mixing percentages and absolute values.
Mixing sizing units.

Let’s take a look at the first one, ‘Mixing percentages and absolute values‘. Let’s say, we want to create something like picture shown below:

Then we could write our CSS as this:

.child {
	background: #feebe8;
	margin: 0 auto;
	position: relative;
	width: -moz-calc(100% - (80px * 2));
	width: -webkit-calc(100% - (80px * 2));
	width: calc(100% - (80px *2));
}

The CSS calc() property will takes care of the proper width calculation based on .child’s parent width and minus a defined 80px padding for each sides.

Besides that the CSS calc() property allows us to: – ‘Mix sizing units‘. Back in the old days, we have no way to combine two different measurements into one to get a resulting size. But now with the CSS calc() we can set the size of child element relative to, say the current font size by mixing ‘em’ and ‘px’ units. Example:

.child {
	width: calc(1em + 5px); 	
}

Conclusion

The CSS calc() is another example of CSS taking over the role of JavaScript. It’s extremely useful when you are working on responsive layout. The calc() property is now available in Google Chrome 19, Firefox 8 or above and IE9 as well.

Design Your Own Responsive Web Template

admin — Mon, 18 Mar 2013 16:56:24 +0000

2012 has been a unusual year in PC market. Pc sales are lower than they were in the previous years. Accoding to the global market research company, Tablets and Smartphones sales are expected to exceed notebook in this year.

Nowadays, users no longer just use desktop to view websites. They now use a variety of different mobile devices such as iPhone, iPad, Tablets and much more. A responsive website can automatically adjust its page layout to suit the users devices. Thus giving them a best seamless experience.

This tutorial will shows you how to create a cross-browser responsive website with HTML5 & CSS3 media queries. To newbies, responsive web design might sounds complicated, but it is actually simpler than you think.

Here is the screenshot of what we are going to create in this tutorial:

View Responsive Design Demo

Step 1: The HTML Strucutre

Here is the HTML structure for the responsive website. In this example, we have a basic HTML5 page layout with a header, page content container, sidebar and a footer.





HTML5 Responsive Demo Web Design | onlyWebPro.com




	
    	
        	Demo: HTML5 Responsive Web Design | onlyWebPro.com
            A blog for web designers & web developers
        
        
        	
                HTML5 Showcase
                HTML & CSS Tutorial
                JavaScript Tutorial
                Mobile Content Tutorial
                PHP Tutorial
                SEO Tutorial
            
        
    

    
    
    	
        	
                HTML5 Responsive Web Design Tutorial
                Nowadays, users no longer just browse web on their desktop. Users now use mobile devices such as iPhone, iPad or Samsung Galaxy Tab to view the website. So as a web designer or web developer, we shouldn't designed the web page in fixed width anymore. This tutorial will show you how to create a cross-browser responsive design with HTML5 & CSS3 media queries. Read tutorial
                
            
        

    

    
    
    	Follow Us
        
        	Facebook
            Twitter
            Google Plus
        
    

    
    
		Copyright 2013 onlyWebPro.com

Step 2: Adding Meta Tag

We need a viewport meta tag to tells the browser to use the device width as viewport width and disable the initial scale.

Step 3: Provide Fallback Support For IE

HTML5 tag such as <header>, <nav>, <section>, <article>, <aside>, <footer> are not supported in Internet Explorer 8 or older, so we have to provide fallback support for users using IE.

Step 4: The CSS

The CSS for the website is simple. Note that we have divided the CSS into 3 parts: – Borwser Settings, Base Structure & Navigation. I’m not going to get into the details of Browser Settings, instead we will focus on the Base Structure & Navigation sections.

Responsive design is percentage based layout, instead of using fixed pixel value, we used percentage value for the width of all base structures.

We aligned the main navigation button to left by specifying ‘display:inline-block‘.

Step5: The Responsive

Now here is the magic that turns our website into responsive. The CSS media queries is the key component for responsive web design, it tells the browser how to render the page for specified viewport width. If you are not familar with media queries, please be sure to read previous article on media queries.






	Right Element
    Left Element

As you can see the :before and :after pseudo-elements has been used to address the problem. These pseudo-elements does exactly what the word implies. It creates a phoney element and inserts it before and after the content of the element that we’ve specified.

In this case, we insert a blank space before and after the parent div; and clear any float elements at the end of parent div.

Pretty simple right? Share this if you found this information helpful.

*Update

We need extra declaration to fix the CSS float’s problem in IE6 & IE7:

.clearfix{ *zoom:1; }

*Thank you for this tips Michael Shen!

Develop A jQuery Parallax Scrolling Framework

admin — Mon, 28 Jan 2013 02:15:50 +0000

Introduction to Parallax Scrolling

The Parallax Scrolling effect is one of the popular design trend in web industry. It is a technique to create an illusion of depth by using multiple background images that move at different speeds as the user scrolls down or up a website.

Still not understand how it works? Let’s check out the demo!

View Demo

The Concept

As you viewed the demo above, the page contains 4 main content layers, which is text, bg1, bg2 and bg3. Each of these layers are given an z-index, so that the foreground layers appear above the background layers. Let’s sorting all layers in this way:

bg1: The background layer.
bg2: The secondary background layer appears above bg1.
bg3: This layer appear above bg2. We use it to store the main object / image.
text: This is the foreground layer that contains the text.

As user scrolls down the page, the 4 main layers are animated independently of one another to create an illusion of depth.

The HTML Markup

Following is the HTML structure of our page:






jQuery Parallax Scrolling Effects | onlyWebPro.com




	
    	
            The Demo of jQuery Parallax Scrolling
            This is a demo page that shows you the simplest parallax scrolling technique you've ever came across!
        

        
            What is Parallax Scrolling?
            Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion. The technique grew out of the multiplane camera technique used in traditional animation since the 1940s, and was popularized in the 1982 arcade game Moon Patrol.
        

        
            Example of Parallax Scrolling?
            As you scroll up / scroll down the page, all the objects are animated independently of one another to create an illusion of depth.

The CSS

There are 2 important CSS properties that we are going to use for creating illusion of depth for our page, which is position and z-index. Following is how our CSS code looks like:

As you see above, we use z-index to control the parallax effect.

Within each individual main layers elements are absolutely positioned. We can arrange the content in different ways according to the topic of the section.

The JavaScript

Ok, here is the section for us to apply some magic to our page.

First of all, what we need to do is to bind a scroll event to the window object. Next, we tell the browser to run a function with named “parallaxScroll” when user scrolls down or up. Then inside the parallaxScroll function, we get the current vertical position of the scroll bar by using .scrollTop() API, and use it for the calculation of layer’s position. So that, the foreground layer is always aligned to the top of the document, while the movement of other layers is adjusted according to their depth.

Save your document and view it on web browser.

View Demo

Creating Interactive Fictional UI With CSS3

admin — Sun, 26 Aug 2012 03:11:35 +0000

In today’s article we will create an interactive fiction user interface (UI) coded with CSS transforms and transition properties. The idea is to have a button and reveal more information when mouse over on it. You can check out the demo before you proceed to the next section.

View Demo

Cool right? Let’s get started!

HTML Structure

We will have a simple HTML structure with several division where each one contains title and description.




Creating Interactive Fictional UI Using CSS3 | onlyWebPro




  
    Home
    Read more
  


  
    Profile
    Read more
  


  
    Contact
    Read more

As you can see above, each menu object “menu_obj” division contains extra classes such as “home”, “profile” and “contact” that gives us freedom to define background image with CSS later. You can either create the images by yourself or use the following images:

Home Button

Profile Button

Contact Button

Hover State

Ok. That’s all for the HTML structure, now, let’s take a look at the CSS styles.

CSS Style

Let’s define the style for each buttons and its child.

First of all, we have given the width, height for each “menu_obj”; apply inner and outer drop shadows; and define the transition type and its duration. Besides, we have given a value of 50% for “border-radius” to turn the “menu_obj” into circle. In order to make sure your code works well on every browsers, you should include vendor prefixes such as “-moz-”, “-webkit” into your code.

The content division of the “menu_obj” will be positioned absolutely; opacity and scale is going to be 0 for us to apply the transition later when user mouse over it.

The title element has scale up 5 times, and 0 opacity. We will scale it down later when user mouse over on the “menu_obj”. Same goes to the paragraph element, it has 0 opacity and a transition. Please take note on the paragraph element’s transition property, we have given 1.6 seconds to the element, to make sure the paragraph element appear after the title element.

Save your document now and preview it on your browser, you should get the something same like the following image.

Ok, now is the interesting part, which turn our boring button into a lively and attractive one!

.menu_obj:hover {
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.1),  0 0px 30px rgba(7, 48, 74, 1);
}

When user mouse over on the button / “menu_obj”, the button will animate its inner drop shadow’s color from blue to white with only 0.1 opacity. Meanwhile, animte its outer shadow from 2px to 30 px width.

.menu_obj:hover .content {
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

The content division will fade in and scale up to 1.

.menu_obj:hover .content h3, .menu_obj:hover .content p {
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

Lastly, the title element will fade in and scale down from 5 to 1; the paragraph element will fade in right after the appearance of title element.

That’s it! Save your work and check it out on your browser. You should have an animated button when mouse over on it!

View Demo

Conclusion

You have just learned to create an interactive UI with CSS3 properties:- transform and transition. With transform and transition properties, you can have many different animation and effects, just try it out and play with it!

Handling Long Page Title of Mobile Web With Little-Known CSS Tricks

admin — Tue, 24 Jul 2012 02:40:34 +0000

The Problem

Sometimes, we may have a page of our mobile website or mobile app with a long title fit in the header bar as shown in the picture below. This would be make our website or app looks ugly with such 3 lines of text.

Problem: The title of the page is too long.

Instead, we can overcome this problem by applying some little-known CSS tricks.

The Solution

Here is the solution to solve the long page title. We could write the header h1 tag’s CSS as following:

#header h1 {
	width: 320px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

The “text-overflow: ellipsis” declaration allows us to append 3 dots to the text that doesn’t fit into the header bar. Please take note that the “text-overflow: ellipsis” only works well when you have specified the “width“, “white-space: nowrap” and “overflow:hidden” to the header h1 tag.

The “white-space: nowrap” here is to instruct the browser NOT to break the long text into 2 lines. Without this, the h1 will just accomodate the long text in the defined width of header bar.

Here is the output with the solution:

Solution: 3 dots appended to the end of chopped-off title.

Pretty simple right? Share this little-known trick to your colleagues, friends and other web workers!

Do you have any you CSS tricks? Please do share it with us on the comment section!

Create Banner Using CSS Animation & Keyframe

admin — Sun, 27 May 2012 09:04:42 +0000

Have you ever think about creating an animated web banner using CSS3 Animation & Keyframe?

Since the gradual disappearance of Flash in the market, currently most of the web designers & web developers are using JavaScript, HTML5 and CSS technologies as an alternative for that. The HTML5 Canvas & SVG allow web developer to create animation and manipulate using JavaScript; The CSS allow web designer to create animation using just only CSS syntax and the designer doesn’t need to have any programming knowledge for that.

In this lesson, we will talk about how to create an animated web banner using CSS3 Animation & Keyframe. Please take a look on the demo, to get the overview of how does the banner will look like.

View Demo

If you haven’t already, please be sure to read the beginner article – “Create Stunning Animation Using CSS3 Animation & Keyframe”.

Preparing Resources

The animated web banner that we are going to create is about a Flying Super Boy that will fly into the screen from left, then the banner’s title and content fade-in. So following images are required for us to create the banner, please save all images into your local drive for later use.

Static Bottom Cloud

Moving Cloud (140×65)

Moving Cloud (86×40)

Moving Cloud (120×55)

Flying Super Boy

The HTML Structure

Once we have all the resources ready in our local drive, we will start to create the HTML document. Following is how our HTML document will look like:



CSS3 Animated Web Banner | onlyWebPro.com




    
        Need Help From Super Boy?
        Learn More

Description:

First of all, we have to create a div with id – “banner_wrapper” as a container to hold the entire banner.
Place all banner title, description / content into the div with id – “content“.
Create a “moving-clouds” div that contain “group-1” & “group-2“. We will animate the “moving-clouds” div later using CSS syntax.
The “group-1” & “group-2” UL elements used to hold all cloud images.
A UL element with id “flying-man”, hold the animated GIF – Flying Super Boy.
We need another UL element “bottom-cloud” to hold the Static Bottom Cloud as a background for the banner.

The Basic CSS Syntax

Please copy & paste the following CSS and place it in the head section of HTML document.

Above is the pre-setting that used to assign the images, set the position, width, height, and etc to all the HTML elements that we defined just now. I’m not going to explain it one by one, instead will just only focus on these 5 styles, which we will apply CSS Animation & Keyframe syntax later: –

#banner_wrapper #content h2: This is the CSS style that control the appearance of the title. We have apply fade-in animation – “delayed-fade-animation” to this element.
#banner_wrapper #content p: This style is controlling the appearance of the content. We have apply the same fade-in animation to it as well, but with longer duration. So the content will appear after the title.
#banner_wrapper ul#flying-man: This style contain an animation “flying-man-animation” that animate the Flying Super Boy to fly into the screen from left.
#banner_wrapper ul#flying-man li: Another styling for Flying Super Boy that contain the floating animation “floating-animation“. This animation is repeating until the page tab / browser is close.
#banner_wrapper #moving-clouds: The style contain the animation “cloud-animation” for the group of clouds.

The CSS Keyframe Syntax

Finally, we have to create the animation using CSS Keyframe syntax. Please add the following code into the CSS section:

/*****************
Animation Settings
******************/
/*CSS Standard*/
@keyframes flying-man-animation {
    0%   {left: -200px;}
    100% {left: 20px;}
}

@keyframes floating-animation {
	0% { bottom: 0px; }	
	50% { bottom: 3px; }
	100% { bottom: 0px; }
}

@keyframes delayed-fade-animation {
    0%   {opacity: 0;}
    80%  {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes cloud-animation {
    0%       {left: 0px;}
    99.9999%   {left: -500px;}
    100%     {left: 0px;}
}

/*Mozilla Browser*/
@-moz-keyframes flying-man-animation {
    0%   {left: -200px;}
    100% {left: 20px;}
}

@-moz-keyframes floating-animation {
	0% { bottom: 0px; }	
	50% { bottom: 3px; }
	100% { bottom: 0px; }
}

@-moz-keyframes delayed-fade-animation {
    0%   {opacity: 0;}
    80%  {opacity: 0;}
    100% {opacity: 1;}
}

@-moz-keyframes cloud-animation {
    0%       {left: 0px;}
    99.9999%   {left: -500px;}
    100%     {left: 0px;}
}

/*Webkit Browser*/
@-webkit-keyframes flying-man-animation {
    0%   {left: -200px;}
    100% {left: 20px;}
}

@-webkit-keyframes floating-animation {
	0% { bottom: 0px; }	
	50% { bottom: 3px; }
	100% { bottom: 0px; }
}

@-webkit-keyframes delayed-fade-animation {
    0%   {opacity: 0;}
    80%  {opacity: 0;}
    100% {opacity: 1;}
}

@-webkit-keyframes cloud-animation {
    0%       {left: 0px;}
    99.9999%   {left: -500px;}
    100%     {left: 0px;}
}

Description:

“flying-man-animation“: We have specified the keyframe to move the Flying Super Boy to fly into the screen from left by changing the value of “left” property.
“floating-animation“: We have specified 3 condition for the floating animation. We want the Flying Super Boy to float from bottom to top when the animation reach 50% and move down when animation is reach 100%.
“delayed-fade-animation“: We have specified the opacity to 1 when the animation reach 100%. This fade-in animation is applied to the title and the content of the banner.
“cloud-animation“: 3 condition has been specified for this animation. Since the “group-1” cloud & “group-2” clouds is in same formation and width (500px), if we want the seamlessly looping animation, we must make sure the position of the “moving-clouds” is at -500px when the animation reach 99.999%.

Save your document and view it in supported browser, such as Firefox, Chrome and Safari!

Conclusion

The CSS Animation & Keyframe syntax allow us to create web animation without requires any programming knowledge such as JavaScript or Flash Action Script.

View Demo

Create Stunning Animation Using CSS3 Animation & Keyframe

admin — Sat, 07 Apr 2012 00:01:02 +0000

Usually, web designer will create animation using language like JavaScript, but now, web designer can create smooth, maintainable animation more easily using CSS3 Animation & Keyframe. The syntax of CSS3 Animation & Keyframe is extremely easy to understand, and don’t requires any programming knowledge. In this tutorial, we will cover the syntax of CSS3 Animation & Keyframe; and we will create a simple spinning newspaper using the syntax that we have learned. Please check out the demo, before we start the tutorial.

View Demo

The Syntax of CSS3 Animation

There are six properties available for the CSS3 Animation properties.

animation-name - This property is used to specify name of the keyframe that you are going to use. You can put any name as you like.
animation-duration – Specifies the time (in milliseconds format) an animation takes to complete.
animation-timing-function – Specifies the speed curve of the animation
animation-delay – Specifies the time for before an animation will start.
animation-iteration-count – Specifies how many times an animation should be played.
animation-direction - Specifies whether or not the animation should play in reverse.

Setup Essential Elements

Let’s setup the environment by creating a div that contain an image of newspaper:





Create Stunning Animation Using CSS3 Animation And Keyframe | onlyWebPro

There are 3 elements here – viewport, box1 and an image file. Viewport is used to set visibility area of our animation; box1 is the div that hold the newspaper image; image file is the image source of newspaper. Note: You are free to use the following image created by onlyWebPro.com for this tutorial.

Next, let’s style all the elements using CSS.

Description:

viewport - We have set the visibility area to width: 468px, height: 330px and align it to the center of the browser.
box1 img – We have also set the height and width of the image that same to the viewport. We will animate the newspaper later using these 2 properties.

Creating Animation

It’s time to make the newspaper spinning using the syntax of CSS3 Animation that we have just learned. Specifies the properties of the animation name, duration, timing function, delay, iteration and direction. Note: Firefox requires the prefix -moz-, while Chrome and Safari require the prefix -webkit-.





Create Stunning Animation Using CSS3 Animation And Keyframe | onlyWebPro

As you can seen from above, we have define an animation called “spinning” with 1 second duration, easing function, no delay, no reverse direction and it won’t repeat. Now, although we already have defined all these animation properties, our animation cannot work yet. We have to apply it using the keyframe rule.

Keyframe Rule

With keyframe rule, we can create animation based on the animation properties that we have just defined. The syntax of keyframe is:

@keyframes yourAnimationName {keyframes-selector {css-styles;}}

yourAnimationName – The name of the animation that defined in the animation property.
keyframes-selector – Percentage of the animtion duration. Such as 0%, 25%, 50%, 75%, 100%.
css-styles – The styles properties.

Ok, let’s apply the animation on our newspaper object:

At 0% of animation duration, we want the newspaper stay far from us, so we have set its width to 10px, height to 7px and no rotation; When the animation is complete at 100%, then we want the newspaper to stay close to us, so we make it more bigger size and with 1440 degrees of rotation. (Note: we want the newspaper has 4 times of 360 degrees of rotation)

Save your document and view it in supported browser, such as Firefox, Chrome and Safari!

Final Code





Untitled Document

View Demo

CSS3: Spinner Animation

admin — Fri, 26 Aug 2011 01:19:01 +0000

Tutorial Details

Difficulty: Beginner
Technology: CSS3
Supported Browser: Chrome 5+, Safari 4+, iOS Safari 2.0

In this tutorial, we are going to create an animated spinner fully with CSS3. Yeah, no need to include JavaScript at all, what we need is just CSS3 already enough! Ok, let’s start our tutorial. First of all prepare a PNG image with transparent background, you can draw yourself or use the following image and save it as “spinner.png“:

HTML Structure

Well, the HTML structure of the spinner is very simple and easy! What you need to do is just to write a

tag and assign an id called “spinner” to it as shown below:




CSS3: Spinner Animation | onlyWebPro.com

That’s all for the HTML structure. Let’s move on to the CSS section.

CSS

Let’s define the style of our spinner with the following css:

As you can see above, we have define several properties that with prefix “-webkit“.

-webkit-mask-image: Link the PNG image we created earlier to “#spinner”.
-webkit-animation-name: The name of the animation. The name is used to select the -webkit-keyframe at-rule that provides the keyframes and property values for the animation.
-webkit-animation-duration: The duration of the animation. In this case, we set it for 2 seconds.
-webkit-animation-iteration-count: Specifies the number of times an animation iterates. We set “infinite” for this case.
-webkit-animation-timing-function: Defines animation progresses between key frames. Values available are linear, ease-in, ease-out and ease-in-out.

Cool, you have link the spinner PNG image to the div with id “#spinner“, but now we don’t see any animation on our page yet, let’s define the “spinnerRotate” that we have declares in “-webkit-animation-name”:

@-webkit-keyframes spinnerRotate {
	from {
		-webkit-transform:rotate(0deg);
	}
	to {
		-webkit-transform:rotate(360deg);
	}
}

As you can see from above, our spinner will start rotate at 0 degrees, and end at 360 degrees, over a time span of 2 seconds and the animation will keep repeating until user close the page.

Final Code




CSS3: Spinner Animation | onlyWebPro.com

That’s all, save your document and preview it on webkit browser (Safari 4.0, iOS Safari 2.0 or Chrome), you should see an animated spinner!