CSS is a fun tool to work & play. Its full name is Cascading Style Sheets. If you are interested in front-end development and design, you would like to learn CSS. The most fun part of CSS is animation, in which you can make your web pages more dynamic. Make them move!
First, we have to create a button in the HTML file,<button> Button </button>. The button without any CSS looks a bit like an exhibit in a history museum.
Adding the class “button1” to the button tag is a way to link and access CSS. Next, we go to the CSS file and edit the button1 class we just created.
In .button1 we need to add some attributes, such as background-color, width, font-size, color, font-weight…etc. These attributes can be accessed and edited through class with dot (.button1), id with # (#button1), and element tag (div, h1,h2..etc). The usage and definition of each attribute shown in the figure below. 👇👇
When we move the cursor to the button, the attribute in .button:hover will be triggered. It turns out that these attributes in .button1 will be overwritten by the attributes in .button1: hover, resulting in animation and changes.
Let’s upgrade the challenge and do some more complex and interesting animations.
We creatively create a new button and class named .button2. Most of the code is very similar to .button1, there is only one change we made. In the transform attribute in .button2:hover, we add rotate(720deg). It means to create a rotation of 720 degrees. Yes, different animations can be stacked up in one transform, such as Scale, rotate, translate.. .etc.
When we move the cursor to button2, button2 starts to spin 720deg (two circles).
Automation
You must be aware of animation now. But each of our animation needs user intervention to trigger. Is there a way to make it move by itself? Absolutely!
As long as we add a new class based on the previous one, we can make our webpage move by itself! First, create a new class .letsmove and add it next to .button1.
Let’s go back to the css file, and this time is a bit different from the previous one, we need to use more attributes to complete a series of animations. From the number of times the animation is played back, the way it moves, and the process of moving the animation. As shown below. 👇👇
Animation can add some vitality to our website. However, too many animation will definitely cause some confusion and headache to users. For example, when the internet speed is slow and the extra animation will increase the loading time of the webpage and harmful to the smoothness of the webpage.
Suggestion: 3 to 5 simple animations can be a bonus point for your website.
Resources:
My portfolio website: www.zhengjianliu.com
Code for this demo: Animation Demo
