CSS3 Introduction

What is CSS3?

CSS stands for Cascading Style Sheets. CSS3 is the latest standard for CSS.

CSS3 is completely backwards-compatible with earlier versions of CSS. It brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.

CSS3 Modules

CSS3 has been split into "modules". It contains the "old CSS specification" (which has been split into smaller pieces). In addition, new modules are added.

Some of the most important CSS3 modules are:

  • Selectors
  • Box Model
  • Backgrounds and Borders
  • Image Values and Replaced Content
  • Text Effects
  • 2D/3D Transformations
  • Animations
  • Multiple Column Layout
  • User Interface

Example:-

<!DOCTYPE html>
<html>
<head>
<title>Example of the CSS3 animation-name Property</title>
<style>
.springy-text{color: darkslateblue;

animation-name: springy-text;
animation-duration: 1s;
animation-timing-function: ease-in;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
animation-play-state: running;
animation-fill-mode: backwards;

-webkit-animation-name: springy-text;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate-reverse;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: backwards;

-moz-animation-name: springy-text;
-moz-animation-duration: 1s;
-moz-animation-timing-function: ease-in;
-moz-animation-delay: 0s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate-reverse;
-moz-animation-play-state: running;
-moz-animation-fill-mode: backwards;

-ms-animation-name: springy-text;
-ms-animation-duration: 1s;
-ms-animation-timing-function: ease-in;
-ms-animation-delay: 0s;
-ms-animation-iteration-count: infinite;
-ms-animation-direction: alternate-reverse;
-ms-animation-play-state: running;
-ms-animation-fill-mode: backwards;

-o-animation-name: springy-text;
-o-animation-duration: 1s;
-o-animation-timing-function: ease-in;
-o-animation-delay: 0s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate-reverse;
-o-animation-play-state: running;
-o-animation-fill-mode: backwards;

}
@keyframes springy-text /* W3C CSS3 */
{
0%   {letter-spacing:1.2em;color: thistle;}
100%   {letter-spacing:0.1em;color: darkslateblue;}
}
@-webkit-keyframes springy-text /* Safari and Chrome */
{
0%   {letter-spacing:1.2em;color: thistle;}
100%   {letter-spacing:0.1em;color: darkslateblue;}
}
@-moz-keyframes springy-text /* Firefox */
{
0%   {letter-spacing:1.2em;color: thistle;}
100%   {letter-spacing:0.1em;color: darkslateblue;}
}
@-ms-keyframes springy-text /* Internet Explorer */
{
0%   {letter-spacing:1.2em;color: thistle;}
100%   {letter-spacing:0.1em;color: darkslateblue;}
}
@-o-keyframes springy-text /* Opera */
{
0%   {letter-spacing:1.2em;color: thistle;}
100%   {letter-spacing:0.1em;color: darkslateblue;}
}

</style>
<!-- Script to pause/start the animation -->
<script type="text/javascript">
function togglePlayState(newState) {
	document.getElementById("springy").style.animationPlayState=newState;
	document.getElementById("springy").style.WebkitAnimationPlayState=newState;
	document.getElementById("springy").style.MozAnimationPlayState=newState;
	document.getElementById("springy").style.MsAnimationPlayState=newState;
	document.getElementById("springy").style.OAnimationPlayState=newState;
}
</script>
</head>
<body>
<h3 class="springy-text" id="springy">Animations!</h3>
<button onClick="JavaScript:togglePlayState('Paused');">Pause Animation</button>
<button onClick="JavaScript:togglePlayState('Running');">Continue Animation</button>
</body>
</html>

Above markup will result like below in your browser .

Animations!


Try it now