{"id":4919,"date":"2021-06-21T02:00:00","date_gmt":"2021-06-21T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/css-transition-duration\/"},"modified":"2024-02-08T00:29:23","modified_gmt":"2024-02-07T23:29:23","slug":"css-transition-duration","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/css-transition-duration\/","title":{"rendered":"CSS Transition Duration – All you need to know"},"content":{"rendered":"\n

This is part one of a two-part complete guide to transitions. Here’s where we’ll get you started with the CSS transition duration and CSS transition properties.<\/strong><\/p>\n\n\n\n

This tutorial will get you up and running quickly, and you’ll be able to add all kinds of transitions to your websites and apps. Then in part two<\/a>, you’ll fine-tune your skills, and reach Jedi level.<\/p>\n\n\n\n

So read on, my padowan…<\/p>\n\n\n

What is a CSS Transition?<\/h2>\n\n\n

A CSS transition is the simplest way to create animations on your site. You can do some really cool stuff without a line of JavaScript, and they are really easy to learn.<\/p>\n\n\n\n

Many moons ago, if web developers wanted to animate their websites, all they really had were gifs and marquee text. Now we have CSS transitions – and all is well with the world.<\/p>\n\n\n\n

And what’s really awesome is, to get up and running you really only need to know about two properties – CSS transition-duration<\/strong> and CSS transition-property<\/strong>.<\/p>\n\n\n

What is CSS Transition Duration?<\/h2>\n\n\n

transition-duration<\/code> is the CSS property that controls how long the transition from one state to another should take.<\/strong> So if you want to change the background color of an element, transition-duration<\/code> will make that change happen gradually, fading smoothly from one color to the other.<\/p>\n\n\n\n

The default value for transition-duration<\/code> is 0s – the element will just snap instantly from the first state to the second. So in a sense, transition-duration<\/code> is the master transition property – without it, nothing works.<\/p>\n\n\n\n

For example, imagine you want to create a “Submit” button and make it change color when someone hovers on it. You could do that like this:<\/p>\n\n\n\n

First, create a button<\/code> element…<\/p>\n\n\n

<button<\/span>><\/span>Submit<\/button<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Then sprinkle in some CSS…<\/p>\n\n\n
button<\/span> {\n  border<\/span>: 3px<\/span> solid #F4D06F<\/span>;\n  border-radius<\/span>: 10px<\/span>;\n  width<\/span>: 100px<\/span>;\n  height<\/span>: 50px<\/span>;\n  font-family<\/span>: sans-serif;\n  font-size<\/span>: 20px<\/span>;\n  background<\/span>: #392f5a<\/span>;\n  color<\/span>: #F4D06F<\/span>;\n}\n\nbutton<\/span>:hover<\/span> {\n  background<\/span>: #F4D06F<\/span>;\n  color<\/span>: #392f5a<\/span>;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
And you get this basic hover effect:<\/p>\n\n\n\n