DEV Community: Peter

CSS Animation: the basic concept and more..

Peter — Mon, 15 Jun 2020 19:49:09 +0000

Css Animation is a great way to improve user experience, add personality to a website. Sensing the movements of objects appears to be a fundamental job for our visual system. We can capitalize on that to build an engaging website. But always remember, animations should enhance the user experience and not be distracting.

In this post, we'll walk through the basic concept of creating animation with css. We're going to discuss css properties, pseudo-classes, the @keyframes(pronounced at-keyframes) rule and how browsers render css.

This post is beginner inclined. So if you're new to css, do follow along, there's a lot you can learn. Enough of the intro, let's get to it.

css properties, pseudo-classes and css transition property

A basic example of css animation could be the use of pseudo-classes to change the state of an element. What are pseudo-classes?

Pseudo-classes: They are keywords combined with a CSS selector to add an effect to existing elements based on their states. An element will remain in a fixed position unless it is acted upon, which is where pseudo-class comes in. It adds trigger to elements.

Basic css	Css with pseudo class

Pseudo-classes includes :hover, :visited, :focus, :active, :checked, :not(). There are over 40 pseudo-classes, you can check them out on MDN.

With pseudo-classes, we can create simple to advance interface ranging from "changing width of element" to "form validation". Yes form validation, the :valid pseudo-class can be used to validate forms. We wouldn't be going there though.

In the pen above, hover, active, focus pseudo-classes were used to change the width, border and color/background of their respective elements. Notice the abrupt change in the state of the element, we will use the transitions properties to create better transformation.

CSS Transitions: CSS transition allows us to change property values smoothly, over a given duration. It is a shorthand syntax for transition-property, transition-duration, transition-timing-function(optional), and transition-delay(optional).

Note transition shorthand:

  div {
  transition: [property] [duration] [timing-function] [delay];
}

Transition-property: This is used to specify the css property we want to change or transform. e.g transition-property: width;, transition-property: background-color; or better still transition-property: all; which will apply to all possible property.

Transition-duration: This is the duration it takes for the transition to occur.

Before we get to transition-timing-function, let's apply transitions to our previous code.

Now our animation looks much better.

The transition-timing-function: This is used to define the acceleration curve. The values are grouped into keyword and function values.

The keyword values include ease (default), ease-out, ease-in, linear, ease-in-out, step-start, step-end.

The function values are steps(n, jumpterm) and cubic-bezier(p1, p2, p3, p4).

steps(n, jumpterm): This is more like an extension from the step-start and step-end keyword value. It takes two parameter 'n', 'jumpterm'. The n is the number of times we want the jumpterm to occur. Jumpterm refers to how the jump should take place. Apparently step-start and step-end means steps(1, jump-start) steps(1, jump-end) respectively. There's also jump-both and jump-none;

cubic-bezier(p1, p2, p3, p4): This is used to create advance acceleration curve. We can create our own dynamic acceleration curve with this value. Where the p1 and p3 values must be in the range of 0 to 1. There are tonnes of cubic-bezier generator online to manipulate our acceleration.

How does browsers render CSS

Okay sorry for the intermission, you might be wondering why we have to talk about this. Understanding how web browsers render CSS is important in creating a smooth and better animation.

This is a visual example of why this is important. On hover, the red box transition affected the other element on the page while the blue one does not. The blue box which obviously has a better animation uses the css transform property(full details later).

When a webpage is loaded, the browser goes through four steps to render css.

Style: After the browser figures where our CSS file is located in the HTML file, it scans through the CSS and figures out which rules to apply to which element. This is done through the CSS Object Model (CSSOM), it is much like the DOM tree but for CSS rather than HTML. The CSSOM, together with the DOM then builds the render tree, which is in turn used by the browser to layout and paint the web page.
Layout: With the render tree created, the browser creates the layout of each element in the render tree. The browser figures out the size and position of each element on the page. Properties such as width and height are applied during the layout stage
Paint: With the information about the size and position known, the browser brings on it artistic prowess. It shows the information to the users by applying paints and colours to the screen. Css properties such as border, color, box-shadow, text are applied during the Paint stage.
Composite: This is where the elements are combined together and rendered to the screen.

In summary, this means that if you animate a css property in the layout stage, the browser needs to recreate the entire layout, repaint and composite the element for each calculation. Same goes for properties in the paint stage. This ends up creating a poor quality of animation and webpage.

In other words, it is advisable to try as much to animate properties in the composite stage. Example of that are the transform and opacity properties. Properties in the composite stage do not have to recreate layout and repaint which means less calculation and better animation experience.

Basically, all our previous code has been bad practise since we can just use the transform property that has lot of perks to it. You can check out which stage css properties are triggered in browser on css trigger.

Transforming and Transitioning

A better way to move or change the position of an element is using the transform property. Just like in previous practises, we need to apply transition property to avoid abrupt change. This helps us create nice animation and better user interaction.

The transform property applies a 2D or 3D transformation to an element but we're only focusing on 2D in this post.

This property allows us to rotate, scale, move, skew elements. The property has values which takes one or two parameter. They include:

Scale(x,y): The scale value allows us to increase or decrease the size of an element. It has two parameters which is x and y e.g transform: scale(2,4) which means it will scale two times on the x-axis and four times on the y-axis. Apart from scaling on the x and y axis, we can also scale on the x or y axis individually. e.g. transform: scaleX(2), transform: scaleY(0.5). x is horizontal, y is vertical
Rotate(x,y): The rotate value provides the ability to rotate an element from 0 to 360 degrees. Using a positive value will rotate an element clockwise, and using a negative value will rotate the element counterclockwise. You can rotate more than a full rotation with numbers greater than 360, such as 720deg, for two full rotations. Rotation can also be done individually on the X-axis and Y-axis. e.g. transform: rotate(360deg), transform: rotate(1turn), transform: rotateX(20deg), transform: rotateY(30deg)
Translate(x,y): The translate value moves an element through the x and y axis. Using translateX value will change the position of an element on the horizontal axis while the translateY value will change the position of an element on the vertical axis. e.g. transform: translate(20px, 40px), transform: translateX(50%), transform: translateY(10em).
Skew(x,y): The skew value gives a slant shape to the element based on the values for the x and y axis. e.g. transform: skew(20px, 40px), transform: skewX(50%), transform: skewY(5em).

Note: When using the properties, always take note of the units.

The transform properties can be manipulated together to create shapes.

Transform-origin: With transform origin, transformation even gets better. The transform-origin property allows us to change the origin of transformation. By default, transformation starts from the center which translate as transform-orign: 50% 50%; or transform-origin: center;. 0% 0% is the same value as top left, 0% 100% is the same as left bottom, and 100% 100% is the same value as bottom right.

@Keyframes rule and the animation property

So far we've created some animation that requires pseudo-classes. With the keyframes function and animations property, we don't have to specify the state of an element. All we have to do is apply the animation properties on our element, then define @keyframes rules that specify our css style at different stage. Alright let's start with the animation properties.

The animation property just like transform and transition has sub-properties. The animation properties are added to the CSS selectors (or elements) we want to animate.

animation-name: The name of the animation. This is used as the @keyframes name when we define it.
animation-duration: The duration of the animation, in seconds (e.g. 3s) or milliseconds (e.g. 500ms).
animation-timing-function: specifies the speed curve of an animation. It works just the same as the transition-timing-function.
animation-delay: It specifies a delay before an animation starts, in seconds or milliseconds.
animation-iteration-count: This specifies the number of times an animation should repeat. e.g animation-iteration-count: 2;, animation-iteration-count: infinite;.
animation-direction: This property defines whether the animation should play forward, backward, or in alternate cycles. e.g animation-direction: reverse;, animation-direction: normal; (the default value which is forward direction), animation-direction: alternate (it alternates between the forward and reverse direction).
animation-fill-mode: This property is used to specify the state or mode of the element after animating. e.g animation-fill-mode: forwards; which means the element should remain in the final stage or state.
animation-play-state: This property allows us to pause and resume the animation sequence. e.g animation-play-state: pause;, animation-play-state: play;. This property is defined on a pseudo-class or in javascript.

/*Shorthand syntax*/
div{
animation: [animation-name] [animation-duration] [animation-timing-function]
           [animation-delay] [animation-iteration-count] [animation-direction]

/*Individual syntax*/
animation-name: myAnimation;
animation-duration: 2s;
animation-timing-function: ease /*options: linear, ease-in, ease-out, 
ease-in-out, cubic-bezier */
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: normal; /*options: alternate, reverse, alternate-reverse */
animation-fill-mode: forwards; /*options: none, backwards */
}

Now that we've specified our animation properties, we'll have to define the stages and css to complement the animation. This is done with the @keyframes rule.

@Keyframes rule: The @keyframes defines the css of the animation at different stages. Each stages can be specified with percentage(%) or using "from" and "to" which represent 0% and 100% respectively. The @keyframes rule is also given a name which is the value of the animation-name property specified on the element we want to animate.

@keyframes myAnimation {
0% { 
 css property: value 
 }
50% {
 css property: value 
 }
100% {
 css property: value
 }
}

@keyframes anotherAnimation {
from { 
 css property: value
 }
to {
 css property: value
 }
}

div{
 animation: bounceAnimation 1s ease-out infinite alternate;

/*animation: [animation-name] [animation duration] [animation-timing-function]
 [animation-iteration-count] [animation-direction]*/
}

@keyframes bounceAnimation{
  0%{
    transform: translateX(0px) scale(1);
  } 
  100%{
    transform: translateX(300px) scale(2);
  } 
}

With the @keyframes rule and animation properties, we can create simple to complex animation without javascript or pseudo-class.

Project

In this section, we're going to apply the @keyframes and animation property to build a simple animated website. Just to illustrate "how-to apply animation to a website".

.paragraph1 {
  animation: paragraph1 2s ease-out;
}
.paragraph2 {
  animation: paragraph2 2s ease-out forwards;
}
a{
  opacity: 0;
  animation: anchor 2s linear 2s forwards;
}

@keyframes header {
  0% {
    transform: translateY(-100px);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes paragraph1 {
  0% {
    opacity: 0;
    transform: translateX(-200px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes paragraph2 {
  0% {
    transform: translateX(200px);
  }

  100% {
    transform: translateX(0px);
  }
}

On the page, there are four animated element, two paragraphs, a header and a button. At 0% and 100%, transform property was added to the paragraph's @keyframes to slide them to their original position. The button also faded in with opacity property.

Conclusion

Yeah that's it, the basics of css animation. The animation property and @keyframes is very resourceful, the possible animations you can create are endless but always remember to put the users interest at heart.

If you will be having a lot or complex animation on your website, you can check out animate.style which is a css library for building efficient animation.

You can check out all the css on my codepen collection

Thank you for taking the time to read this post. If you've found this useful, please give it a ❤️ or 🦄, share and comment.

Learn about the command line.

Peter — Mon, 16 Mar 2020 00:24:09 +0000

If you've ever been intimidated by the command line or curious about it and how to use the command line, this article will help you get started and comfortable.

What you will learn.

What is the command line?
Why is the command line important?
Basic command and navigation.
Integration with git and github.

What is the command line?

The command line (commonly also referred to as CLI, Terminal, bash, or shell) is an application for typing commands directly to a computer's operating system.It lets you interact and give instructions to your computer

According to wikipedia:

A command-line interface processes commands to a computer program in the form of lines of text

It is basically a tool that takes a command in form of normal text and processes the instruction. You can use it in place of GUI(the normal interface we use everyday on our computer). Don't worry, you will understand more when will get to its basic command. Every operating system comes with a pre-install command line.
You can navigate or open the command line on your PC by:
-Using the search bar on Windows, input "cmd" then open the command prompt app
-On Mac PC, click on the spotlight icon(looks like a search bar) then search for terminal
-If on Linux then you will probably find it in Applications -> System or Applications -> Utilities.

However, the command line i personally use is Git Bash which i prefer to the pre-installed ones.

Why is the command line important?

You probably thinking right now!

The command line is one of the most important applications on your computer, It helps us automate our tasks very easily. If you ever want to be a coder or work in a tech team as a designer, product manager, or other tech role, you'll have a big advantage if you're already comfortable with basic commands. But anyone who uses a computer will benefit from becoming comfortable with this essential tool!
It helps us to perform many tasks quicker and can be much easier to automate and do remotely.
Now let's get to the work!.

Basic command

You don't need to know all the commands to start using the command line. Let's get started with some basic ones.

print working directory

$ pwd

print working directory represented by 'pwd' returns the directory or folder or current path you're working on.

$ pwd
/c/Users/petrepan

This shows that i'm currently in petrepan folder which also is in the Users folder on my computer.

make directory

Make directory is used to create a new folder. So you make use of mkdir coupled with the 'name of the folder'.

$ mkdir terminaltips

So i just created a folder called terminaltips

change directory

Change directory is used to switch into a directory, you can use the “cd” command (where "cd" stands for "change directory"). So, i created (mkdir) a directory called terminaltips. I can navigate into the directory by using 'cd'

$ cd terminaltips

cd ..

$ cd ..

To move up one directory or to go to a previous one, use cd ... make sure there's a space between the keyword cd and the two dots.

touch

$ touch project.txt

touch creates a new file inside a folder. It takes in a file name as an argument, and then creates a new empty file in the current working directory. Here we used touch to create a new file named index.html.

Move files

This is used to move a file into another folder, use mv with the name of the file and then the name of the folder. Here we move the file 'project.txt' into another folder called project.

$ mv project.txt project

Copy files

You might want to copy your file instead of moving it, you can follow the same process with the mv command. But this time, you make use of the cp command.

$ cp project.txt project

RM -R

rm -r is used to delete a folder, rm(remove). To delete a folder, you need to be in its parent directory, not inside the folder itself. Here we deleted a folder called terminaltips.

$ rm -r terminaltips

RM

rm(remove) command deletes files. Here we remove the file project.txt. The above one is used for deleting folders while this one is used for deleting files.

$ rm project.txt

List

The command ls lists all files and folders in the working directory. working directory means your current directory. You can check your current with the command pwd we learnt above.

$ ls
projects   terminaltips   index.html   words.txt

ls -a command can be used to list all contents including hidden files and directory.

echo

This command is used to add a text to a file. By using the echo command followed by the text(in quotation) and then >, followed by the filename.

$ echo "This is a text. We're adding it to a file." > project.txt

We added the quotated text to the text file called project.txt

grep

Most times this is used in big project cos it lets you look for a certain text within a file. The usage for this is less obvious when you're not working on a big code project.

$ grep adding project.txt

We just searched for where the word 'adding' exist in terminaltip.txt. It will return the lines that contain the content you seek for.

$ grep adding project.txt
We're adding it to a file.

With this commands, you can easily navigate between files and folders in your computer.

Integration with git and github

So this is just going to be a little project on how we can use the command line in conjunction with git and github.
Git is a version control system that helps us keep track of our files on our computer. This can help us to monitor and manage different changes made on our files.whereas
Github is a website that helps us to host our folders or repositories online.
Both git and github are useful tools for developers.
Here we are going to create a folder on github and clone it to our computer. Make sure you install and configure Git. And also sign up on github if you don't have an account.

*Step one: Create a folder on your computer.
*Step two: Navigate into the folder
*Step three: Create a repository on github.
*Step four: Clone your repository.
*Step five: Create a file

Step one: Create a folder on your computer.

Open your command line and make a folder with the mkdir command. Here we created a folder called 'project'.

$ mkdir project

Step two: Navigate into the folder

Let's navigate into the 'project' folder with cd.

$ cd project

Step three: Create a repository on github

Step four: Clone your repository

Click the green button at the right hand side that says "Clone or download" and copy the link.
Now go back to your terminal and clone the github repository to your computer with git clone

$ git clone https://github.com/petrepan/git-testing.git

Step five: Create a file

Now that you have the 'git-testing' folder on your computer, we can create a file with the touch command. Let's create two files.

$ touch index.html

$ touch app.css

Voila!! That's the basics of using the command line. We can even go further to check the list of files in the 'git-testing' folder with the ls command.
Lastly, use the clear command to clean up your command line when the command gets too much.

Conclusion

There's a lot more we can do with the command line especially when the project gets overwhelming. It makes our life easier.

So feel free to explore and learn more about the command line, git and github.

Thanks for reading! Don't forget to leave a comment and a like.

DEV Community: Peter

CSS Animation: the basic concept and more..

css properties, pseudo-classes and css transition property

How does browsers render CSS

Transforming and Transitioning

@Keyframes rule and the animation property

Project

Conclusion

Further reading resources

Learn about the command line.

What you will learn.

What is the command line?

Why is the command line important?

Basic command

print working directory

make directory

change directory

cd ..

touch

Move files

Copy files

RM -R

RM

List

echo

grep

Integration with git and github

Step one: Create a folder on your computer.

Step two: Navigate into the folder

Step three: Create a repository on github

Step four: Clone your repository

Step five: Create a file

Conclusion