{"id":25620,"date":"2016-02-16T21:01:07","date_gmt":"2016-02-16T13:01:07","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=25620"},"modified":"2023-04-06T19:14:15","modified_gmt":"2023-04-06T11:14:15","slug":"visualizing-change-css-transitions-animations","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/visualizing-change-css-transitions-animations\/","title":{"rendered":"How to Use CSS Transitions & Animations to Highlight Changes"},"content":{"rendered":"

Designers and artists have a long history of experimenting with motion, effects, and different kinds of illusions with the aim of adding an extra layer to their work. The op art<\/a> movement began to use optical illusions in the 1960s to give the impression of motion.<\/p>\n

Since then newer and newer approaches have popped up, such as the recently popular kinetic art<\/a> that extends the viewer\u2019s perspective by using multidimensional movement. Motion also appeared in computer science with the invention<\/a> of the first blinking cursor in 1967.<\/p>\n

In front-end development DOM elements were usually animated by JavaScript<\/a> before CSS3 was released, and it\u2019s a method that still works, but the new properties introduced by CSS3 allows us to enhance our designs<\/strong> with different effects and motion in a more intuitive way<\/strong>.<\/p>\n

The two main techniques CSS3 offers are transitions and animations. In this post we will take a look at what they are, what is the difference between them, and how you can make use of them.<\/p>\n

Transitions<\/h2>\n

Transitions<\/a> and animations<\/a> are both used to visualize changes in the state<\/strong> of an HTML element by modifying one or more of its CSS properties<\/strong>.<\/p>\n

The simplest form of state change visualization is altering the colour of a button or a link when it\u2019s hovered on. When it happens, the element gets a slightly different style, which is usually noticed by the viewer as if something have moved on the screen.<\/p>\n

Changing CSS properties of a link on hover (or focus, or click) is the oldest and simplest form of transitions, and it existed well before the CSS3 era.<\/p>\n

\r\na {\r\n\tcolor: orange;\r\n}\r\na:hover {\r\n\tcolor: red;\r\n}\r\na:focus {\r\n\tcolor: blue;\r\n}\r\na:visited {\r\n\tcolor: green;\r\n}<\/pre>\n
Transitions are used when an HTML element changes from one predefined state to another. CSS3 introduced new properties that allow more sophisticated visualizations than before, such as timing functions<\/a> or duration control<\/a>.<\/p>\n
We will take a look at the new CSS properties in the next section, after understanding how animations differ. For now, let\u2019s see the most important things you need to know about transitions.<\/p>\n
    \n
  1. They always have a beginning and an end state.<\/li>\n
  2. The states between the start and end points are implicitly defined by the browser, we can\u2019t change that with CSS.<\/li>\n
  3. They require explicit triggering<\/strong>, such as adding a new pseudoclass by CSS, or a new class by jQuery.<\/li>\n<\/ol>\n
    You can see a beautiful example of smartly utilized CSS3 transitions below, in which the author reveals hidden information in a way that\u2019s non-intrusive but still steers users\u2019 focus on the new content.<\/p>\n