CSS3 Transitions | Transforms | Animations

Webbing Wednesdays Week #11

CSS3 Transforms

With the help of CSS3 transform, one can move, scale, turn, spin, and stretch elements easily. We can also change shape, size and position of an element.

On the other hand, we can transform our elements using 2D or 3D transformation.

Numbers followed by -ms-, -webkit-, -moz-, or -o- specifies the first version that worked with prefix.

CSS3 2D Transforms

2D transform methods

1. translate() : -ms-transform: translate(50px,100px);

With translate() method, the element moves from its current position, depending on the parameters given for the left (X-axis) and the top (Y-axis) position:

2. rotate() : -ms-transform: rotate(30deg);

With the rotate() method, elements rotate clockwise at a given degree. Negative values are allowed and rotate the element counter-clockwise.

3.scale() : -ms-transform: scale(2,4);

With the scale() method, element increases or decreases the size, depending on the parameters given for the width (X-axis) and the height (Y-axis):

4. skew() : -ms-transform: skew(30deg,20deg);

With skew() method, the element turns in a given angle, depending on the parameters given for the horizontal (X-axis) and the vertical (Y-axis) lines:

5. matrix() : -ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0);

The matrix method takes six parameters, containing mathematic functions, which allows you to: rotate, scale, move (translate) and skew elements.

CSS3 Transform Properties are transform, transform-origin

CSS3 3D Transforms

3D Transform Methods

1. matrix3d: Defines 3D transformation, using a 4×4 matrix of 16 values
2. translate3d: Defines 3D translation
3. scale3d: Defines 3D scale transformation
4. rotate3d: Defines 3D rotation
5. perspective: Defines a perspective view for a 3D transformed element

CSS3 Transform Properties are transform, transform-origin, transform-style, perspective, perspective-origin, backface-visibility

CSS3 Transitions

With the help of CSS3, we can add an effect while changing from one style to another.
For the Transitions, Flash or JavaScripts are not required.

Numbers followed by -webkit-, -moz-, or -o- specifies the first version that worked with a prefix.

Two things are necessary for the transitions:

1. The CSS property which we want to add an effect into and
2. The duration of the effect

div {
-webkit-transition: border 2s;
transition: width 2s;
}
div:hover {
width: 500px;
}

Note:

For transitions, duration is necessary to specify because the default value is 0. If there is no defined duration, transitions will not happen.

Transition effect will start when the specified CSS property changes its value. CSS property will change when a user mouse-over on an element:

Multiple Changes

div {
-webkit-transition: width 2s, height 2s,-webkit-transform 2s; transition: width 2s, height 2s, transform 2s;
}

More Transition Examples

div {
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-in;
-webkit-transition-delay: 2s;
transition-property: width;
transition-duration: 1s;
transition-timing-function: ease-in;
transition-delay: 2s;
}

CSS3 Transition Properties are transition, transition-delay, transition-duration, transition-property, transition-timing-function

CSS3 Animations

With CSS3, we can create animations that can replace Flash animations, animated images and JavaScripts in existing web pages.

Numbers followed by -webkit-, -moz-, or -o- specifies first version that worked with a prefix.

Two properties are important for Animation:

• name of the animation
• duration of the animation

Note:

For animation, duration is necessary to be specified because the default value is 0. If there is no defined duration, animation will not happen.
You can change as many properties you want, as many times you want.
You can specify when the change will happen in percent, or you can use the keywords ‘from’ and ‘to’ (which represents 0% and 100%).
0% represents the start of the animation, 100% is when the animation is complete.

div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: myfirst 5s linear 2s infinite alternate;
animation: myfirst 5s linear 2s infinite alternate;
}
@-webkit-keyframes myfirst {
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@keyframes myfirst {
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

CSS3 Animation Properties are @keyframes, animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function.

Abhishek Singh

Abhishek, Heading design department is one of the most innovative UI/UX experts for web with over 9 years of experience. He remains updated with the changing web trends and share his knowledge for performance improvements.

Join over 10,000 people who
love best articles, and tips.

Email Subscribe