The underline decoration is not actually an underline, it merely looks like one. Because we are using SCSS we set a variable that we can simply reuse throughout our code when defining the “timing” value in our transition property, this is what it looks like: $bounce: cubic-bezier(.68,-0.55.27,1.55) Creating the underline decoration You could potentially create a more controlled animation using I am however satisfied with the result from the cubic-bezier function. To achieve the effect we are going for we make sure that we overshoot the end position both in the beginning I loosely based this on of the 12 principles of animation, #5 Follow through and overlapping. Timing is arguably the most important aspect of animation, and spending time to get it right will greatly enhance the “feel” of your designs. Below you can see the cubic-bezier as seen when edited in fire-fox. We create the animation using the cubic-bezier function in CSS, this sets the timing for the animation and is really easy to create when you use the developer tools in Firefox and/or one of the online tools like. It’s important to note that the line animates from the center of the link outwards. Next up we create the underline effect using CSS. Take note that all the code can be found in the codepen, and if you don’t understand SCSS you can use the drop down arrow in codepen to view the compiled CSS. Items stack on top of each other on smaller screensįirst off we create the navigational HTML structure, wrap an unsorted list element within a nav element and the populate a list of links.There is a nice “bouncy” animation to the whole effect.Letter spacing increases (distance between the individual letters).Text underlined from the center of word outwards.When we look at the effect we can see that: The whole effect is created using only HTML and CSS (SCSS), in addition we will be using Psuedo elements. In the above code pen you can see the fun little menu effect we are about to create. See the Pen Elastic Hover Effect with Animated Underline by Francois Marais ( CodePen.
0 kommentar(er)
