☄ EXPOLORE MIND ⚜ Tutorial ? JIQA Biography News
PRV MENU NEXT

CSS3 ANIMATION

Course- HTML5 >

As mentioned earlier, websites nowadays are complex and complicated. By complex and complicated, we are referring to the development of these websites and not the web pages themselves. We see animations and complex features. Prior to HTML5 and CSS3, JavaScript was used extensively for this purpose. HTML was incorrectly used for styling, when it was expected to design the structural markup of the page. However, with the advent of CSS, it is a good practice to use HTML for markup, and CSS for styling. CSS3 brings along transforms, transition elements, and animation features that make it easier to develop awesome features.

Moreover, the need for JavaScript has reduced considerably, as we can achieve the same with CSS3 in tandem with HTML5. In this section, we are going to discuss the following features:

  • CSS3 transitions
  • CSS3 transforms
  • CSS3 animation

 

CSS3 transitions

Transitions enable us to determine the speed of animation as well as introduce delays, as and when required. They also enable the web designers to alter the state and the behavior of the elements in use. Transitions assist developers to achieve a smooth low of animation and display the same accordingly, so that we can observe the change of state.

The transition-property is used in conjunction with the properties that are defined to alter the state. When we define the transition-property along with the state altering properties, only those properties will be undergoing transition. We also need to remember that the vendor prefixes have to be used, as it is still in the development stage and not compatible with all the browser versions. For example, we use –moz for Mozilla, and so on.

EXAMPLE:

<html>
<head>
<style>
#flex-container { display: -webkit-flex; display: flex;
width: 500px; height: 500px;
background-color: Silver;
}

#flex-item {
background-color: lime; transition-property: background;
-webkit-transition-property: background; transition-duration: 3s;
-webkit-transition-duration: 3s; transition-timing-function: linear;
-webkit-transition-timing-function: linear;
width: 200px; height: 200px; margin: 20px;
}
#flex-item:hover { background: red;
}
</style>
</head>
<body>
<div id = "flex-container">
<div id = "flex-item">ASP.NET</div>
<div id = "flex-item">PHP</div>
</div>
</body>
</html>

 

We have defined the background property to undergo transition (transition-property: background ;), as seen in the following screenshot:

TRANSITION CSS3

Once we hover over the PHP rectangular item, the color will change to red eventually, as displayed in the following screenshot:

While we hover over PHP, we can observe the transition from green to red. We have introduced a transition duration of three seconds, and the change in color can be seen gradually spanning over three seconds.

In the preceding code, we have applied transition to the background. However, there are lots of properties to which we can apply the transition-property. We have listed some of the properties as follows:

  • background-color
  • border-spacing
  • font-size
  • border-radius
  • color
  • margin
  • max-width
  • max-height
  • right
  • top
  • vertical-align
  • padding

Let's look at the other properties that can be applied along with the

transition-property as follows:

  • transition-duration
  • transition-timing-function
  • transition-delay

 

PRV MENU NEXT