CSS animation Examples tutorials

CSSanimation-examples
CSS-animation-examples-1

CSS-animation-examples-new

CSS animation Examples Tutorial – Part 1

Hi guys! In this tutorial we are going to see an example of using the power of CSS3 and CSS animation examples. First of all, we will create a very cool and realistic 3D ball with pure CSS3 properties.

Click for Css Animation Examples Demo

CSS animation examples is a small effort to clear basic concepts, read further…

NOTE: This CSS animation examples is fully browser dependent, may not work on a browser that doesn’t support respective CSS properties.

HTML

Start with very basic HTML:

<div id=”ballWrapper”>

<div id=”ball”></div>

<div id=”ballShadow”></div>

</div>

In this CSS animation examples, We have here been 3 simple DIV elements. “#ballWrapper” is the main DIV which will wrap the ball. This DIV will determine the ball’s position and height on the screen. Next, we have the “#ball” element which is the ball markup, and finally there is the “#ballShadow” which holds the ball’s shadow which is separated from the ball when the ball moves up and down direction.

CSS

Now, in CSS we’ll set a basic width and height of our ‘#ballWrapper’ DIV. To put the ball at the center point of the screen:

#ballWrapper {

height: 300px;

width: 140px;

position: fixed;

top: 50%;

left: 50%;

margin: -150px 0 0 -70px;

}

Note that we have given the DIV both top and left position properties of ‘50%’, and a negative top and left margin, which is calculated to be exactly half of the original height and width of the DIV. Through this we can place the ball in the center position of a respective screen.

Doesn’t ball so simple guys, can we apply some style to it??? What are you thinking off??

Ok, here (css animation examples tutorial) we move on with some creativeness. We will give our ball some styles (grow up, it’s not that funny… :])

#ball {

border-radius: 70px;

width: 140px;

height: 140px;

box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4),

background: linear-gradient(top,  rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);

inset -2px -1px 40px rgba(0,0,0,0.4),

0 0 1px #000;

}

In this CSS animation examples , We are setting the ball equal width and height and a ‘border-radius’ property with a value of ’70px’ (which is half of the original width and height that we’ve set) so it will be a ball and not an oval (egg) shape.

Now, it’s looks something better than a simple ball (css animation examples). What you say?
Another thing we have noticed right now is the background. I have tried to give the 3D effect, the ball’s element with a linear background and 3 different box shadow levels so it would get the 3D effect. And I hope through this you can also use these properties of CSS for applying 3D effects to any object.

Is everything going on well? Hope your answer is YES.

Let’s move further with the ball in this CSS animation examples. If you take a look at the ball you’ll notice that there is another small oval shape on top of the ball that gives it a reflection effect. Here is how I have tried to create it by using simple CSS properties:

#ball::after {

content: “”;

width: 80px;

height: 40px;

border-radius: 40px / 20px;

position: absolute;

left: 30px;

top: 10px;

background: linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);

 

}

I have used the CSS pseudo element “::after” in this CSS animation examples because we have to give effect when the ball is in motion and also we have to use it with a linear gradient with an opacity. Apart from that,we also have to set the border radius to ’40px / 20px’ so it has an oval shape.

Next, it’s time to handle the ball’s shadow:

#ballShadow {

width: 60px;

height: 75px;

left: 50%;

margin-left: -30px;

position: absolute;

z-index: 0;

bottom: 0;

background: rgba(20, 20, 20, .1);

box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);

border-radius: 30px / 40px;

}

Guys Again, we have used the same properties for centering the shadow, but this time we attached it to the bottom of ‘#ballWrapper. I also added a semi-transparent background to it, a fitting box shadow and a border radius.

Hope you guys are doing well with everything till now in this CSS animation examples. Let’s move further with the bouncing animation.

Bouncing Animation

Now the fun stuff…

Start by adding the animation property to ball (CSS animation examples):

#ball {

animation: jump 1s infinite;

}

All we did was to define the animation’s name (JUMP), the animation’s duration (1 sec.) and how many times the animation will happen – in our case we use ‘infinite’ which means that it will keep on running position as well.

HTML5 Beginners

HTML5 Beginners

 

 

 

 

 

Animation itself:

@keyframes jump {

0% {

top: 0;

}

50% {

top: 140px;

height: 140px;

}

55% {

top: 160px;

height: 120px;

border-radius: 70px / 60px;

}

65% {

top: 120px;

height: 140px;

border-radius: 70px;

}

95% {

top: 0;

}

100% {

top: 0;

}

}

So, basically in this CSS animation examples is to play with the ‘top’ position using the CSS property of the ball. Starting from 0, through 160 and back to 0. We notice that in the middle of the animation we are also playing with the ‘border-radius’ property – that way we shall handle the “impact” of the ball when it touches the ground.

And now they have a look at the ball’s shadow; first, let’s add the shadow’s relevant animation property:

#ballShadow {

animation: shrink 1s infinite;

}

Also, in this CSS animation examples we have to used the same values that we have used with the ball, but being a smart guy we have used it with a different keyframes animation called SHRINK which looks as follows:

@-keyframes shrink {

0% {

bottom: 0;

margin-left: -30px;

width: 60px;

height: 75px;

background: rgba(20, 20, 20, .1);

box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);

border-radius: 30px / 40px;

}

50% {

bottom: 30px;

margin-left: -10px;

width: 20px;

height: 5px;

background: rgba(20, 20, 20, .3);

box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);

border-radius: 20px / 20px;

}

100% {

bottom: 0;

margin-left: -30px;

width: 60px;

height: 75px;

background: rgba(20, 20, 20, .1);

box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);

border-radius: 30px / 40px;

}

}

At the time of shadow’s animation in this CSS animation examples, we also had to play with different properties than the ball’s animation. In order to give it a realistic effect when it comes to the ball’s distance from the ground, we have to animate the shadow width, height and opacity. While the ball is near to the floor, the shadow needs to be darker as well as broader and smaller. When the ball jumps up, the shadow should be lighter and bigger.
Guys Last, but not least to make it more creative, let’s add the “click effect” to the ball which makes it appear as if it moves away from us when we click and hold. To achieve this effect, all we have to use is the ‘:active‘ pseudo-class, add a transition and play with the CSS3 transform ‘scale’ property like this:

#ballWrapper {

transform: scale(1);

transition: all 5s linear 0s;

}

#ballWrapper:active {

transform: scale(0);

}

The transition from a transform value of scale(1) to scale(0) will make it look as if the element is moving away from you.

Click for Css Animation Examples Demo

WOOHOOOO finally done with this CSS animation examples. Hope you enjoyed this CSS animation examples.

Find out more CSS animation examples below:

Source:

If you like our css animation examples rate us below.

You Might Also Like

85 Comments

  1. 1
  2. 2

Comments are closed.