Learning CSS with Less - Effects and animations
Learning CSS with Less - Effects and animations
"Learning CSS with Less" technical tutorial series gets better and better with each article. Each part of this series comes as a new puzzle piece from a whole - and we really feel that the passion and dedication with which Andrei formed this course are the keys that will make this puzzle a successful one in the end.
We created the Technical Blog section out of a desire to share the knowledge gathered over the years of hard work by senior developers from our community - helping you become one of the top 1% of software developers in the world.
Now... Let's discover the next part of "Learning CSS with Less". Enjoy!
- Topics of discussion
- CSS effects
- CSS animations
1. Topics of discussion
In this tutorial, we are going to discuss some ways in which you can use CSS to create some cool effects and animations. So, let's have some fun.
2. CSS effects
To try and tell you about all the possible effects you can create with CSS would be a disservice to all the people who have created CSS effects libraries for anyone to use.
However, it's important to talk about them for a bit because this way, we can learn about some new CSS properties that can be used to create some effects.
One of the most common effects used on elements is adding a shadow to them. This can be obtained by using the box-shadow CSS property. Let's take a look at the values for this property, since it requires at least 3:
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]Let's take a look at what those values mean:
- horizontal offset - a required value, which determines the horizontal position of the shadow; if the value is positive, the shadow will be on the right and if the value is negative, the shadow will be on the left
- vertical offset - a required value, which determines the vertical position of the shadow; if the value is positive, the shadow will be below the element and if the value is negative, the shadow will be above the element
- blur radius - a required value, which has a default value of 0; this value determines the sharpness of the shadow; the higher the value, the more blurred it will be and the more the shadow will extend; this is because the shadow size is computed by adding the offsets with the radius;
- spread radius - an optional value, which by default is 0 and is used to increase or decrease the shadow size
- color - a required value, which determines the color of the shadow
Here is a code example:
And here is the CSS:
.shadow-container {
width: 100px;
height: 100px;
padding: 20px;
box-shadow: 5px 5px 5px 0 rgb(100, 100, 100);
border: 1px solid black;
}Make sure you play around with the values to see the different behaviors for this property. Also worth noting is that you can have an inner shadow by adding the inset keyword as the first value:
box-shadow: inset [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]Another cool effect you can create is a gradient background. This can be done by using the linear-gradient CSS function, like so:
.linear-container {
background: linear-gradient(red 10%, 30%, blue 90%);
width: 100px;
height: 100px;
}By default, the gradient is going to go from top to bottom, but that can be changed, by adding a direction, which can be specified by giving it an actual direction keyword (e.g. to right, to left etc.) or an angle (e.g. 135deg, 45deg etc.).
Color-wise, you can specify any color and some percentage values. When you have a group of color percentages, the percentage determines the point where the color starts changing. When you add an extra unlabeled percentage like in the example above, that changes the midpoint of the transition.
The idea is that colors transition from one another in a smooth fashion. In our example above, the midpoint of the transition, which would be the place where red and blue are found in an equal amount, would be 50%. However, since we added that extra percentage value, that changed the midpoint to 30%.
Of course, you can have as many colors in there as you like. Here is a more complex example:
.linear-container {
background: linear-gradient(to right, red 10%, green 30%, blue 50%, yellow 70%, brown 90%);
width: 100px;
height: 100px;
}3. CSS animations
Aside from effects, you can also create animations in CSS. Creating animations is fairly easy. You make use of the animation CSS property, which is a shorthand for abunch of other animation related properties which we will go through shortly.
Note that for each animation you are creating, you have to create a corresponding @keyframes block in which you define what happens at certain points of the animation. This will become clear with an example, so don't worry.
Let's go through the animation-related properties now:
- animation-name - used to define the name of the animation, which will be used in the @keyframes block
- animation-duration - defines how long one cycle of the animation lasts; can be set in seconds or milliseconds
- animation-timing-function - used to establish the acceleration curvethe possible values for this are: ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2)
- animation-delay - used to set a delay between the element being loaded and when the animation actually starts; can be set in seconds or milliseconds
- animation-direction - the direction of the animation, after the cycle; possible values are normal or alternate
- animation-iteration-count - set the number of times the animation should be performed
- animation-fill-mode - sets the values to be applied before or after the animation; it basically allows you to determine what frame of the animation is to be used at the beginning or the end of the animationpossible values are forwards, backwards, both, none
- animation-play-state - the state of the animation; possible values are paused and running
- animation - shorthand property that can be used to set the values for the properties above, in the order in which I have gone through them in the list
Here is some very basic CSS animation example:
@keyframes test {
from {background-color: blue;}
to {background-color: red;}
}
.animation-container {
width: 100px;
height: 100px;
animation: test 3s ease-in normal infinite forwards running;
}Of course, you can animate just about anything from width to height, to background, you name it. There are plenty of examples out there should you look for inspiration.
And that about covers it for this tutorial. In the next one, we are going to conclude this course and take a look at everything we have learned. See you then.