What is 2D transform in CSS3?

CSS3 has 2D and 3D transform properties that allows to transform the elements. Transforming the elements means translating, rotating, scaling or skewing it. This will result in change of shape, size, and position of the element. Following are the properties that help you achieve 2D or 3D effects:

Translate: 
It will take two values, one for x-axis and other for y-axis. It is specified as follows: translate(10px, 50px). In this case, it will move 10px on x-axis and 50px on y-axis. For ex:

div {
 transform: translate(100px, 75px);
}

Rotate: 
It will rotate the element clockwise or anticlockwise. The values are degrees. It is specified as rotate(20deg) or rotate(-20deg). It will rotate the element by 20 degrees in clockwise or anticlockwise direction For ex:

div {
 transform: rotate(50deg);
}

Scale: 
It will increase the size of the element. It is specified as scale(x, y). The first value will increase the width of the element, and second value will increase its height. If scale(10,20) is specified, then width will be increase by 10 times and height will be increase by 20 times. For ex:

div {
 transform: scale(9, 7);
}

SkewX: 
It will skew the element along the X-axis. The value of skew is specified in degrees. If skewX(20deg) is specified then it will be skewed on X axis by 20 degrees. The value can be negative too. For ex:

div {
 transform: skewX(50deg);
}

SkewY: 
It is similar to SkewX with only difference of element being skewed along Y-axis. For ex:

div {
 transform: skewY(50deg);
}

Skew: 
It is similar to SkewX or SkewY with only difference that two values are specified X and Y. First specified value being X and second specified value being Y. For ex:

div {
 transform: skew(50deg, 50 deg);
}

Explain transition property of CSS3?

Transition allows you to smoothly update the property values. You specify the time period and the property to the changed. The property update will happen during the specified time period. It is specified as follow: transition: width 2s. This means that width will change to its new value in 2 seconds. For ex:

div {
 width: 10px;
 height: 20px
 transition: width 2s, height 4s;
}

div:hover {
 width: 20px;
 height: 40px;

 transition: width 2s, height 4s
}

In the above example, upon hover over div width will change from 10px to 20px within 2s. And height will change from 20px to 40px within 4s.



Timing:
 You can specify the transition timing function as linear, ease, ease-in, ease-out, ease-in-out for the effect to take place.

• Ease will make transition effect with a slow start then fast, then slow in the end. 
• Ease-in makes transition effect to remain at same speed from start to end. 
• Ease-out starts out the transition effect as slow then it moves at normal speed. 
• Ease-in-out starts out the transition as slow and ends it as slow. For ex:

div {
 transition-timing-function: ease;
}

Delay: 
Since transition is all about timing an effect on a specific element, we can delay our timing as well. It can be specified by transition-delay: 1s.

div {
 transition-delay: 2s;
 }

Explain animation in CSS3

One of the coolest property of CSS3 is animations. You can create an animation with only a CSS to your file. Since animation is like a series of frames, you will have to specify properties of different frames at different times. For each frame, you will have to specify the animation name, duration. Then in the animation name you will have to specify the from and to values of each property that you want to change. For ex:

div {
 width: 50px;
 height: 50px;
 background-color: #d8d8d8;
 animation-name: animateDiv;
 animation-duration: 4s;
}

@keyframes animateDiv {
 from {background-color: #d8d8d8; }
 to {background-color: #d0d0d0; }
 from {width: 50px; }
 to {width: 150px; }
 from {height: 50px; }
 to {height: 100px; }
}

In the above example, we specified animation-name & animation-duration in the div section. Animation-name is animateDiv, for which we specify from and to values of different properties. All the from to to values will take effect for the properties within 4s. If you don't want to change the animation from just one value to second value, you can specify the change to take place at specific percent. If you specify 10%{height: 10px;}, 20%(height: 20px} then height will change to 10px at 10% of animation-duration, 20px at 20% of animation-duration. For ex:

@keyframes animateDev {
 0% {height: 10px}
 20% {height: 20px}
 40% {height: 30px}
 60% {height: 40px}
 80% {height: 50px}
 100% {height: 60px}
}

In the above example, the height changes to 10px at 0% of animation-duration, to 20px at 20%, and so on


Animation Delay:
It will start the animation at a specified delay. It is specified as animation-delay: value; For ex:

div {
 animation-delay: 2s;
}

Animation Iteration:
Sometimes you don't want to run an animation only once, you might want to run it a lot of times. In that case, you can specify the iteration-count. And if you want to run an animation forever, you just need to specify the value to infinite. You specify the property and value as animation-iteration-count: infinite For ex:

div {
 animation-iteration-count: 3;
}

OR 

div {
 animation-iteration-count: infinite;
}

Animation Direction:
You can run the animation in reverse or alternate cycle manner. You specify it as animation-direction: reverse; or animation-direction: alternate. If you specify alternate direction, then the animation will run in clockwise and anti-clockwise direction on alternate iterations. For ex:

div {
 animation-direction: reverse;
}