background preloader

CSS3 - Animation

Facebook Twitter

CSS3 Loading Animation. Hello guys, this time i wanted to create 3 simple CSS3 Loading Animations.

CSS3 Loading Animation

I remember that CSS3 Loading Animations are only visible in Firefox, Safari and Chrome. What do you wait, start reading! First Example CSS3 Loading Animation In this first example, the markup is very simple, where we will create an unordered list and we will create inside the div to create the effect and to control the total animation. Nothing difficult, just create the graphics for the unordered list, take special care to animation, thanks to the delay and control layers we can create this effects!

Second Example CSS3 Loading Animation In this second example, we will see how to create a loading bar that fits any resolution. It looks like the style, much simpler than the previous, this is the basic setting, you can modify at your convenience. Third Example CSS3 Loading Animation As you can see the process is the same as the first example, you just know a little CSS to create wonderful effects. Conclusion. How To Create CSS-Based Content Accordion.

In today’s tutorial we are going to learn how we can create a horizontal and vertical content accordion by just using CSS3.

How To Create CSS-Based Content Accordion

There are many jQuery plugins out that can do this job for you but what do you do if the visitor has Javascript turned off, then the accordion won’t work correctly. If your accordion is purely in CSS then it will work for all your visitors. We are going to create a horizontal and vertical content accordion. On clicking the headline text the slide will open displaying the full content, and here’s a quick preview (screenshots) how they look like. Like what you see? 1. To start with we are going to create the HTML for the accordion. The structure needs a container div and then have a section for each slide in the accordion. <div class="accordion horizontal"> <section> <h2>About Us</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="accordion horizontal"><section><h2>About Us</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 2. CSS3 Menu Navigation Effect. Hi guys been a long time since i write on my blog and then i inaugurate this day with a new tutorial that will treat apply CSS3 properties to menu navigation.

CSS3 Menu Navigation Effect

We are going to see how to play nice effects without the use of jQuery. I remember this tutorial works perfectly on all browsers except Internet Explorer for the first two examples, while the last example will only be visible in Firefox, Safari and Chrome because it uses the CSS3 Animation Property. Let’s start! First Example – CSS3 Menu Navigation Effect only CSS3 Transition Now look carefully … this markup is really easy, just create an unordered list and insert inside the links that we need, apply an .animation class every li that has a link and we will see later how the animation will apply to our links!

In addition to the graphics menu, we simply set transition property and apply to the translateX property the value that should animate every time the mouse passes over the link. Conclusion.