CSS3-Animation

Css3 Keyframe Animation

The CSS3 animations take it a step further with keyframe-based animations that allow you to specify the changes in CSS properties over time as a set of keyframes, like flash animations. CSS animations are made up of two basic building blocks.shown in the example below:

Keyframes — define the stages and styles of the animation.

Animation Properties — assign the @keyframes to a specific CSS element and define how it is animated.

1: Keyframes

Keyframes are the foundation of CSS animations. They define what the animation looks like at each stage of the animation timeline.

Name of the animation: A name that describes the animation, for example, bounceIn.

Stages of the animation: Each stage of the animation is represented as a percentage. 0% represents the beginning state of the animation. 100% represents the ending state of the animation. Multiple intermediate states can be added in between like 0%,10%,20%……100%.

CSS Properties: animation properties to control the animation’s behavior.

Example-

/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
/* Standard syntax */
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
// calling Animation function 
.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation-name: moveit;
-webkit-animation-duration: 2s;
/* Standard syntax */
animation-name: moveit;
animation-duration: 2s;
}

You must specify at least two properties animation-name and the animation-duration (greater than 0), to make the animation occur. However, all the other animation properties are optional, as their default values don’t prevent an animation from happening.

Note: Not all CSS properties are animatable. In general, any CSS property that accepts values that are numbers, lengths, percentages, or colors is animatable.

Example-02

CSS3 Keyframes BOUNCH-IN Animation

Lets see the another example animation for “bounceIn”

@keyframes I’ve named “bounceIn”. This @keyframes has three stages. At the first stage (0%), the element is at opacity 0 and scaled down to 10 percent of its default size, using CSS transform scale. At the second stage (60%) the element fades in to full opacity and grows to 120 percent of its default size. At the final stage (100%), it scales down slightly and returns to its default size.

The @keyframes are added to your main CSS file.

@keyframes bounceIn {
0% {
transform: scale(0.1);
opacity: 0;
}
60% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
}
}

Animation Calling on DIV Tag….

div {
animation-duration: 2s;
animation-name: bounceIn;
}
//Shorthand syntax:
div {
animation: bounceIn 2s;
}

Animation Property Shorthand

animation: [animation-name] [animation-duration] [animation-timing-function][animation-delay] [animation-iteration-count] [animation-direction][animation-fill-mode] [animation-play-state];

Just remember for the animation to function correctly, you need to follow the proper shorthand order AND specify at least the first two values.

Animation Prefixes

Keyframes and animations with WebKit prefixes for apple device

div {
-webkit-animation-duration: 2s;   
animation-duration: 2s;
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}