Posted on Oct 18 • Originally published at ericsdevblog.com Transitions and animations allows you to create more dynamic and responsive webpages. They can help capture your audience's attention and make your website stand out from the competition. In this tutorial, we will delve into these topics and discuss how to create eye-catching transitions and animations using CSS.📧 Subscribe to my newsletter: https://ericsdevblog.ck.page/profileBefore we start, we must discuss a fundamental concept, the pseudo-selector. The pseudo-selectors allow you to define properties that only activate when the element is under a particular state. For instance, let's consider the element, which represents a hyperlink in a webpage. Initially, it appears blue. Once clicked, it turns red, and after being visited, it turns purple. Despite being the same element, different styles are applied to it depending on its state.Pseudo-class selectors are the key to achieving this effect. They target elements only when they are in specific states. The hyperlink element starts without any state. When you move the cursor over it, it is given the :hover state, and when clicked, it acquires the :active state. Lastly, after being visited, it is given the :visited state. These states allow you to apply different styles to the same element under different circumstances. This feature is crucial for frontend design because it enables the webpage to respond dynamically to user actions.As an example, with the following setup, the
Creating Transitions and Animations Using CSS
will grow when the cursor is hovered on top of it.However, notice that the change happens instantly, so what if you want to customize it to make the change smoother? This effect can be achieved by defining the transition properties.The transition-property specifies the name of the CSS property for which this transition configuration is created. And the transition-duration determines how long it takes for the transition effect to complete. In this case, the width of the
element will take 2 seconds to change from 200px to 400px.You can also specify multiple transition properties like this:Currently, all the transitions are linear, meaning the speed of changes remains constant throughout the transition process. You can customize this behavior using the transition-timing-function property. Some common values include:This is the default behavior. The transition speed remains constant from start to end, as we've demonstrated before. This option is equivalent to using a cubic-bezier() function with values cubic-bezier(0,0,1,1).The function defines a Cubic Bezier curve. I'll spare you the complex mathematical definition, which looks like this:Instead, all you need to know is that this curve is defined by four control points:With these four control points in the above example, the transition will start slow, accelerate in the middle, and finish slowly. You don't need to know precisely how to calculate these points. You can easily find the desired control points using this website.Corresponds to the Cubic Bezier Function cubic-bezier(0.25,0.1,0.25,1).The transition will begin slowly, fast in the middle, and finish slowly.Corresponds to the Cubic Bezier function cubic-bezier(0.42,0,1,1).The transition will begin slowly and then accelerate.Corresponds to the Cubic Bezier function cubic-bezier(0,0,0.58,1).The transition will begin fast and then decelerate to end slowly.Corresponds to the Cubic Bezier function cubic-bezier(0.42,0,0.58,1).The transition will begin slowly, accelerate in the middle, and finish slowly. This is very similar to ease, but as you can see from the curve, it is much smoother, which means there won't be a noticeable acceleration or deceleration phase.This transition is a bit different. It is defined by a stepping function, steps(), which takes two values. The first one specifies the number of steps, and the second one sets the point at which the change occurs within the step, either start or end. For example:In this case, the transition will take five steps, and the change happens at the start of each step.The step-start option corresponds to the function steps(1, start).The step-end option corresponds to the function steps(1, end).You can also set a delay for the transition using the transition-delay property.Notice that the transition only starts one second after the cursor is hovered over the
element.Lastly, CSS also provides a shorthand property that enables you to define all transition properties together. The shorthand has the following syntax:You can also define multiple transitions using the transition shorthand by dividing different cases with commas:Besides the transitions, there is also a similar concept called animation, except that you don't need to use the pseudo-selectors to define a trigger. The animation starts automatically once it is loaded. Instead, you will need to define keyframes using the @keyframes rule.This animation is named change-bg-color, and it changes the background-color property from white to darkviolet. To employ this animation, you must specify the animation-name and animation-duration properties.Instead of the keywords from and to, it is possible to use percentage values, which allows you to define more than two keyframes.Just like transitions, animation also has properties animation-timing-function and animation-delay. And they work the same as their transition counterparts.You can also define how many times you wish the animation to be repeated using the animation-iteration-count property.The animation-direction property defines how the animation will be played, which accepts four different options:Lastly, the animation-fill-mode property determines how the element will be displayed before and after the animation is played. By default, the element will not retain any styles from the animation.When set to forwards, the element will retain the styles from the last keyframe of the animation after the animation is played.When set to backwards, the element will take on the styles from the first keyframe of the animation as soon as the animation is played.When set to both, the element will retain the styles from the first keyframe before the animation starts (behaves like backwards), and it will also retain the styles from the last keyframe after the animation is finished (like forwards).Lastly, just like with the transitions, CSS also offers a shorthand property called animation, which has the following syntax:In this tutorial, we covered the basics of creating transitions and animations using CSS. If you are interested, here are some of my other articles about CSS and frontend design:Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Kedasha - Oct 13 Freecodez - Oct 14 M Adeel - Sep 22 Shinji NAKAMATSU - Oct 5 Once suspended, ericnanhu will not be able to comment or publish posts until their suspension is removed. Once unsuspended, ericnanhu will be able to comment and publish posts again. Once unpublished, all posts by ericnanhu will become hidden and only accessible to themselves. If ericnanhu is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Eric Hu. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag ericnanhu: ericnanhu consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging ericnanhu will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.
