The Coding Express

In the last article, we learned about animations in CSS. We learned about the important  @keyframes rule and also seen one example to use it in which we changed the background-color property of div using rules defined in keyframes. Now let's dive deep to learn more about it. Changing Two Properties Simultaneously In the example of the previous article, we just changed background-color using keyframes rule. Let's see the example in which we are changing background-color as well as the position of the div element. To work this properly we are going to position property of div value relative so that we can change it using keyframes. @keyframes myAnimation { 0 % { background-color : blue ; left : 0px ; top : 0px ;} 25 % { background-color : red ; left : 200px ; top : 0px ;} 50 % { background-color : yellow ; left : 200px ; top : 200px ;} 75 % { background-color : green ; left : 0px ; top : 200px ;} 100 % { background...

In the last two articles, we learned about CSS transitions and created some pretty cool elements with transitions and transformations. Now in today's class, we are going to learn animations in CSS which creates animations without the use of javascript or flash. CSS Animations A CSS animation lets us change an element's style from one to another. We can change as many properties as we want. To use this CSS animations, we have to first specify some keyframe rules which include how and which properties are we changing. The @keyframes Rule When we specify CSS styles inside the  @keyframes rule, the animations will gradually change from current style to new style at certain times. To get these working, we must bind animations to an element. Let's understand more by an example... @keyframes myAnimation { from { background-color : blue ;} to { background-color : red ;} } div { width : 100px ; height : 100px ; background-color : b...

In the last article, we learned the basics of CSS transitions and also implemented them in one example, where we changed the width of div slowly when we hover over it. We also have seen how to change two properties simultaneously. Now let's move forward to see some more ways to customize the transitions in CSS. Speed Curve of the Transition The transition-timing-function property in CSS helps to specify the speed curve of the transition effect. This speed curves decide how speed varies in given duration. This property can have one of the following values: ease - This is the default value. In this transition starts effect starts slowly, then fast and ends with slow again. linear - In this transition maintains same speed though start to end. ease-in - Transition with slow start ease-out - Transition with slow end ease-in-out - Transition with slow start and slow end cubic-bezier(n,n,n,n) - This transition let us define our own values for cubic bezier function Let...

In the last few articles, we were learning about transformations CSS which includes some 2D as well as 3D transformations. Although transformations are good for changing some properties of the element, in many cases we want the user to see some spectacular changes on the webpage. We can make it possible using CSS transitions. Let's see how... CSS Transitions CSS transitions allow us to change property values smoothly from one value to other with specified time interval by us. For example, you can change the width of div from 10px to 20px in the time of 3 seconds when the user hovers over it which will give visual effects to it. How to implement the CSS Transitions? To create a transition effect, we have to specify two things: The CSS property we want to add effect to The duration of effect It is important to mention the duration, else there will have no effect as default duration is 0 seconds. Let's have a simple example: See the Pen WDS81-1 by blackbird ...

In the last two articles, we learned about 2D transforms in CSS which includes skewing, rotating, scaling and translating of elements with just a few lines of code. Now it's time to learn some cool 3D transformations in CSS. Let's begin... The rotateX() method The rotateX() method rotates an element about X-axis with given input value of the angle. div { -webkit-transform: rotateX( 30 deg); /* Safari */ transform: rotateX( 30 deg); } The rotateY() method The  rotateY() method rotates an element about Y-axis with given input value of the angle. div { -webkit-transform: rotateY( 30 deg); /* Safari */ transform: rotateY( 30 deg); } The rotateZ() method The  rotateZ() method rotates an element about Z-axis with given input value of the angle. div { -webkit-transform: rotateZ( 30 deg); /* Safari */ transform: rotateZ( 30 deg); } There are some other methods of 3D transformations but they ar...

In the last article, we learned what the CSS transforms are and also started learning 2D transforms. Following are some of the commonly used 2D transformations: translate() rotate() scale() skewX() skewY() matrix() Previously we learned about first 3 of them. Let's complete remaining today. The skewX() method The skewX() method allows skewing an element along the X-axis by the given angle input. The given code will skew the  element 30 degrees along X-axis: See the Pen WDS79-1 by blackbird ( @blackbird98 ) on CodePen . The skewY() method The skewY() method allows skewing an element along the Y-axis by the given angle input. The given code will skew the  element 30 degrees along Y-axis: See the Pen wds79-2 by blackbird ( @blackbird98 ) on CodePen . The skew() method Although I didn't mention it in a list, it is just combination of above two methods. It takes two arguments and skews the element in X and Y directions according to each ...