Introduciton
Animations allow an author to modify CSS property values over time.Using CSS3 we can create animations. We need to use @keyframes rule in CSS3.Keyframes are specified using a specialized CSS at-rule. CSS3 gives some great new features relating to resizing elements, cursors, outlining, box layout and more.In CSS3, outline has been expanded to include outline-offset property.
Animations in CSS3.0
Animations is an effect which happens when element changes from one style to another.
Css3 has new ways for manipulate user interface features in CSS3.
- We need to give CSS style inside the @keyframes rule and the animations will change from current style to a new style.
- Till Date Only Chrome and Safari support this property with prefix -webkit-.
- Once we write the key frame rule we need to bind it to a selector other wise there will be no effect.Syntax:@keyframes { animationname keyframes-selector {css-styles;} }
- Animationsname: it’s the name given to the animations
- Keyframes: duration of animations in percentage value from 0% to 100%. It includes from(0%) and to(100%)
- CSS-styles: 1 or more CSS style properties.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <style type="text/css">
div
{
width:200px;
height:200px;
background:Green;
animation: AniDemo 4s;
-webkit-animation: AniDemo 4s; /* Safari and Chrome */
<!--border:2px solid #000000;-->
}
@keyframes AniDemo
{
from {background: yellow;}
to {background: orange;}
}
@-webkit-keyframes AniDemo /* Safari and Chrome */
{
from {background: Yellow;}
to {background: Orange;}
}
</style>
Example2: Animation
<style type="text/css">
div
{
width:200px;
height:200px;
background:green;
animation: Anidemo 8s;
-webkit-animation: Anidemo 8s; /* Safari and Chrome */
}
@keyframes Anidemo
{
0% {background: cyan;}
30% {background: blue;}
45% {background: yellow;}
65% {background: orange;}
100% {background: red;}
}
@-webkit-keyframes Anidemo /*Safari and Chrome */
{
0% {background: cyan;}
30% {background: blue;}
40% {background: yellow;}
60% {background: orange;}
100% {background: red;}
}
</style> |
CSS3 User Interface
New features are box sizing , resizing and outlining.
Note:
- resize is only supported Chrome and Safari.
- Box sizing is supported in IE and Opera.
- We need to use prefix -moz- for firefox, -webkit- for chrome and safari. Outlining is not supported only by IE.
-
Resizing:
It specify whether a user can resize the element or not.
Syntax: resize: none|both|horizontal|vertical:
- None: user cannot resize the element
- Both: user can adjust both the height and weight of the element.
- Horizontal: user can adjust the width.
- Vertical : user can adjust the height.
1 2 3 4 5 6 7 8 9 10 | <style type="text/css">
div
{
border:3px solid;
padding:20px 50px;
width:500px;
resize:both;
overflow:auto;
}
</style> |
-
Box Sizing:
we can define certain elements to fit in certain way.
Syntax: box-sizing: content-box|border-box|inherit:
- Content box: you can specify the width and height of the content box of the element.
- Border box: you can specify the width and height of the border box of the element.
- Inherit: box sizing property which should be inherited from parent element.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <style type="text/css">
div.container
{
width:40em;
border:1em solid cyan;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari and Chrome */
width:60%;
border:1em solid blue;
float:right;
}
</style> |
Multiple Columns in CSS3
We can create multiple columns for laying the text.
-
Column count:
This specifies the no column the element should be divided into.
Syntax:column-count: number;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <style type="text/css">
.column1
{
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari and Chrome */
column-count:4;
}
.column2
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
</style> |
-
Column gap
This is used to specify the gap between the columns.
Syntax: column-count: length|normal;
- Length: specified length between the columns.
- Normal: default space is 1em as specified by W3C.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <style type="text/css">
.column1
{
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari and Chrome */
column-count:4;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:60px; /* Safari and Chrome */
column-gap:40px;
}
.column2
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:85px; /* Safari and Chrome */
}
</style> |
-
Column rules:
We can add some properties like width, style and color to the rule between columns.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <style type="text/css">
.column1
{
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari and Chrome */
column-count:4;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:60px; /* Safari and Chrome */
column-gap:40px;
-moz-column-rule:5px outset red; /* Firefox */
-webkit-column-rule:5px outset red; /* Safari and Chrome */
column-rule:5px outset red;
}
.column2
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:85px; /* Safari and Chrome */
-moz-column-rule:5px outset blue; /* Firefox */
-webkit-column-rule:5px outset blue; /* Safari and Chrome */
column-rule:5px outset blue;
}
</style> |
Note: Most of the features work with latest version of Opera, Chrome, Firefox, IE and Safari.
Summary:
Css3 is the present trend in the web design right now,
allowing developers to implement lot of features like animations,
user interface, text effects, background properties,
transition and transforms etc… There is lot of scope for exploring the the specification of CSS3
