I don’t know if you read our Scalable Vector Graphics Tutorial. If you have not read it, I encourage you to read it. That tutorial shows you how to learn to draw SVG graphics in HTML. In this tutorial we are going to learn how to transform and animate graphics using CSS. We are also going to show you how to animate text. Even though we recalled the SVG tutorial, we are not going to draw graphics at this time. All the graphics that we are going to use are from “Pixabay.” Let us start learning how to transform, and animate HTML Elements.
CSS Transforms
Firstly we are going to start with CSS Transforms. We can apply transform to most. HTML elements. CSS Transforms let rotate, skew, scale, or translate HTML elements. CSS Transforms also use the same cartesian system of SVG graphics. We mentioned above the most useful CSS transforms. We are also going to show you how to apply them to your code. Below we show you a description for all CSS transform properties.
Translate
As its name implies, translations move HTML items to a different position in the browser. It's very easy to apply translations in CSS. The only thing we need to do is to declare the transform, and them call the translate function. This function can contain one or two parameters. The first parameter is the translation for the X axis. The second one is for the Y axis. We can also work with the function translate 3d. That function contains a third parameter.
#selector{
transform: translate(50px); /* One parameter only translate the x value */
}
#selector2{
transform: translate(20px, 30px);
}
#selector3{
transform: translate3d(15px, 30px 45px); /*transform 3d function */
}
/******************************************************************************/
Rotate
We can also rotate any HTML item using CSS transforms. It's very easy to rotate items. We only need to declare the transform property, then we call the rotate function. Once we call the rotate function, we set its only parameter that is the angle of rotation. We can use our preferred unit for angles. Most times we use degrees; but we can also use radians, turns etc.
#selector{
transform: rotate(35deg);
}
/**********************************************************************/
Scale
The scale function is another CSS transform function. This function serves to resize HTML elements. This function also contains two parameters. These parameters don't specify any styling or angle; they are numbers. As you may already know, the first parameter indicates the X value as the second the Y value. We can also have a third parameter if we apply the function scale 3d.
#selector{
transform: scale(0.5, 1);
}
#selector2{
transform: scale3d( 0.2, 0.5, 2.1); /*scale 3d function */
}
/********************************************************************************/
Skew
Another CSS transform function is the skew function. This function distorts each point of any element with an angle. This function can contain one or two parameters. These parameters are the angles for the X values and the Y values. In the case it only contains one parameter that is the parameter for the X value. The effect this function causes is very nice. Once we get the correct angles we are going to see the result.
#selector{
transform: skew( 70deg, 15deg);
}
#selector2{
transform: skew(0.3turn, 0.7turn) /* We can use turns rads degrees and many angle units */
}
Using more than one transform function
It's possible to use more than one transform function in only one property. The only thing we need to do is to declare a function and then declare the other. We can use as many functions as we want. We show you an example below with all the transform functions we explained. Although it's not necessary, we added some JavaScript to the transforms. After we click on buttons we can see the transforms. As you can see in the example below, transforms are made using CSS classes.
CSS Transitions
CSS transitions define transition between two states of any HTML element. There are four basic properties for CSS Transitions. They are the "delay", "duration", "timing-function" and the "transition property". Their syntax is as we show you below.
#selector{
transition-property: margin-right;
transition-delay: 0.5s;
transition-timing-function: linear;
transition-duration: 3s;
}
| transition-property | This is the property where transition would apply |
| transition-delay | This is the time that transition waits to start |
| transition-timing-function | Let us establish acceleration curve. (depends on duration) |
| transition-duration | This is the time the transition lasts |
Transition shorthand
We can use all these properties at once with only one line of code. We can use the transition keyword and then specify all the other properties.
#sample{
transition: property duration timing-function delay;
}
#selector{
transition: margin-right 5s linear 0.5s;
}
/**********************************************************/
Using Transitions with transforms
We can use transitions with transforms. Even though we are not diving too deep into transitions, we can see their effect in transforms. The only two properties we are using in the following example are the transition delay and duration. The example below is similar too the example we previously saw. Its only difference is that we applied transitions. In the results you can see the how the transitions occurs. It's a nicer effect.
CSS Basic Animations
We can see that CSS transforms along with transitions works as regular CSS animations. Besides transforms and transitions we can use animation properties. They serve to animate elements from one style to another. There are many CSS Animation properties. The most used ones are "animation-name", "animation-duration", "animation-iteration-count", and "animation-delay". There are many others that we don't mention here. They can be found at the CSS Animations MDN We are going to see how some of these properties work along with CSS keyframes.
| animation-name | This is the name of the animation specified by a keyframe |
| animation-duration | This property specifies the time the animation is going to last |
| animation-delay | This property specifies the time to start the animation |
| animation-iteration-count | This property specifies how many times the animation runs |
CSS Keyframes
CSS keyframes specify the name, the starting, and the end of CSS Animations. Using keyframes we set the style that elements need to apply for animation. There are two types of keyframes. The first type is the one that set two functions. One of them is the function "from", and the other is the function "to". The other type of keyframe is the one that works with percentages. In that type of keyframe we can set as many functions as we want. We increase the percentage and apply the new style to the element.
@keyframes my-keyframe{
from{
/*code here
}
to {
/*code here*/
}
}
@keyframes percentages{
0%{
/*code here*/
}
50% {
/*code here */
}
100%{
/*code here */
}
}
Animation Examples
Here we are going to show you some animation examples. They show how CSS keyframes work. They have really nice effects on HTML elements.
Animating Text
The first example we are going to see is animating text with keyframes. In this example we set the iteration count property to infinite. For that reason the animation won't stop. All these examples are only for showing the effect purposes. If you need some animations in your professional work you can apply properties differently.
Another Text Animation
There are endless possibilities to animate text using keyframes. The following example shows how to increase text size. It also shows how to bring a box to its place with some effect.
Appearing Text
Appearing text is somewhat more useful in animations. Here we show you how to make text appear with CSS animations. That is really nice.
Animating Graphics
Here we show you another example about how to animate graphics. In the following example you can see that we apply some rotation and translation to a graphic. We get a wonderful result.
From top to Bottom
The example below is similar to the one above. We use some rotation for the ball, and also use the translate "y" property. That property translates the Y axis while the translate "x" translates the X axis. See how the basketball dribble. This is wonderful!
Animating an SVG Graphic
We can create an animate SVG graphics. Most HTML elements can become animated elements. The following example shows a crazy ellipse. That ellipse moves all the way around changing its form.
Conclusion
This tutorial shows CSS transforms, transitions, and animations. It also shows how to deal. with them. They could be very useful depending on the task you want to perform You can find a lot more of information in the MDN Animations section. We hope you enjoyed and learn a lot with this tutorial
More at Moe's Link
Top comments (1)
so cuteeeeeeeeeeeeee