{"id":14705,"date":"2020-04-15T12:12:20","date_gmt":"2020-04-15T19:12:20","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=14705"},"modified":"2023-12-01T02:37:34","modified_gmt":"2023-12-01T10:37:34","slug":"css-transitions","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-transitions\/","title":{"rendered":"CSS Transitions"},"content":{"rendered":"\n<p>When you\u2019re designing a web page, you may want to add transitions to an element. Transitions are triggered when a certain condition is met. For instance, you may want the background color of a button to change when the user hovers over the button.<br><\/p>\n\n\n\n<p>You can use the CSS transition property and its subproperties to create an animation effect when the properties of an HTML element change.<br><\/p>\n\n\n\n<p>This tutorial will discuss, with a few examples, the basics of CSS transitions and how to use the transition property to create CSS animations. By the end of this tutorial, you\u2019ll be an expert at working with CSS transitions and the transition property.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Transitions<\/h2>\n\n\n\n<p>By default, when the value of a CSS property changes, the web page instantly applies the change.<br><\/p>\n\n\n\n<p>For example, if you create a style change that is activated when the cursor hovers over a button, the new style will be applied as soon as the user hovers over the button with their cursor. As soon as the user\u2019s cursor moves away from the button, the button will revert to its default style instantaneously.<br><\/p>\n\n\n\n<p>The CSS transition feature is used to create a smooth transition between two styles. When you use the transition property, the web page will animate the change between the two styles. This feature allows you to create more aesthetically-pleasing style changes.<br><\/p>\n\n\n\n<p>There are two components of a CSS transition. These are:<br><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The new CSS property you want to apply to an element.<\/li>\n\n\n\n<li>The duration of the transition.<\/li>\n<\/ul>\n\n\n\n<p>By default, the duration of a transition is set to 0 seconds. This means that if you do not define a duration, the transition you specify will not have an effect\u2014in other words, the style change will occur instantaneously.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Transition Example<\/h2>\n\n\n\n<p>Suppose we are designing a button for a website and we want the style of the button to change when the user hovers over it with their cursor. When the user is not hovering over the button with their cursor, the button should have a blue border. Then, when the user hovers over the button with their cursor, the background color of the button should change from the default color (white) to blue.&nbsp;<br><\/p>\n\n\n\n<p>In both states, the button should be 100px tall by 100px wide, and the text in our button should be centered. The transition between the two states should take two seconds.&nbsp;<br><\/p>\n\n\n\n<p>Here\u2019s the code we would use to create this button:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>index.html\n&lt;div&gt;&lt;p&gt;This is a button.&lt;\/p&gt;&lt;\/div&gt;\nstyles.css\ndiv {\n\twidth: 100px;\n\theight: 100px;\n\ttext-align: center;\n\tborder: solid 3px #33CCFF;\n\ttransition: background-color 2s;\n}\ndiv:hover {\n\tbackground-color: #33CCFF;\n}\n<\/pre><\/div>\n\n\n\n<p>Our code returns:<br><\/p>\n\n\n\n<p><code>[Code result here]<br><\/code><\/p>\n\n\n\n<p>In our code, we stated that our button should be 100px wide by 100px high and the contents of the button should have a center alignment. We also specified a 3-px-wide solid blue border for our button.&nbsp;<br><\/p>\n\n\n\n<p>When you hover over the button with your cursor, you can see that its background color changes to blue. When you move your cursor away, the background color of the button changes back to white.<br><\/p>\n\n\n\n<p>In this example, we specified a two-second transition period for the background color property. This means that when the user hovers over the button with the cursor, the button\u2019s background color takes two seconds to fully change from white to blue\u2014in other words the change is not instantaneous.<br><\/p>\n\n\n\n<p>Likewise, when the user moves their cursor off the button, the background color changes from blue to white over a period of two seconds\u2014so again, not instantaneously. Thus, we are able to achieve a smooth, two-second transition to and from the new background color based on the placement of the cursor on the page.<br><\/p>\n\n\n\n<p>Then we specified the style we wanted to trigger when the user hovers over the button with the cursor. We accomplished this using the :hover selector. The program applies the style(s) defined in the :hover selector to an element when a user hovers over that element with their cursor.<br><\/p>\n\n\n\n<p>If you\u2019re interested in learning more about the CSS :hover selector, read our <a href=\"https:\/\/careerkarma.com\/blog\/css-hover\">guide to the CSS :hover selector<\/a>.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Transition Speed Curve<\/h2>\n\n\n\n<p>The transition-timing-function property allows you to specify the speed curve of a transition effect. Here are a few of the values accepted by this property:<br><\/p>\n\n\n\n<p><strong>Values (and Corresponding Descriptions)&nbsp;<\/strong><\/p>\n\n\n\n<p><strong>of the transition-timing-function Property<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table course-info-table\"><table><tbody><tr><td><strong>Value<\/strong><\/td><td><strong>Description of Transition Speed Curve<\/strong><\/td><\/tr><tr><td>ease<\/td><td>slow start, then a fast acceleration, then a slow end <em>(default value)<\/em><\/td><\/tr><tr><td>ease-in<\/td><td>slow beginning, then a fast acceleration<\/td><\/tr><tr><td>ease-out<\/td><td>fast start, then a slow finish<\/td><\/tr><tr><td>linear<\/td><td>the same speed from start to finish<\/td><\/tr><tr><td>cubic-bezier(n,n,n,n)<\/td><td>cubic-bezier transition<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>As you can see, the first value in this table\u2014\u201cease\u201d\u2014is the default value. This means that if you do not specify a value for the transition-timing-function property, or if you do not specify the property at all when styling a transition, the web page will default to using this value.<br><\/p>\n\n\n\n<p>Let\u2019s take the code from our last example to illustrate how the transition-timing-function property works. In our last example, we specified an \u201cease\u201d speed curve. This means that the styling of our button will change from one style to another with a slow start, a fast acceleration, and a slow end.<br><\/p>\n\n\n\n<p>However, suppose we want our button to transition to its new background color using a linear transition. We can do so by specifying the \u201cease-in\u201d value. Here\u2019s the code for this:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;div&gt;&lt;p&gt;This is a button.&lt;\/p&gt;&lt;\/div&gt;\ndiv {\n\twidth: 100px;\n\theight: 100px;\n\ttext-align: center;\n\tborder: solid 3px #33CCFF;\n\ttransition: background-color 2s linear 0.5s;\n}\ndiv:hover {\n\tbackground-color: #33CCFF;\n}\n<\/pre><\/div>\n\n\n\n<p>Our code returns:<br><\/p>\n\n\n\n<p><code>[Result of code]<br><\/code><\/p>\n\n\n\n<p>Our styles are mostly the same as the ones we used in our last example. The only difference is that instead of specifying an <code>ease<\/code> transition, we specify a <code>linear<\/code> transition. This means that the speed of the transition will remain consistent once it is triggered.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Transition Delay<\/h2>\n\n\n\n<p>The transition-delay property allows you to specify a delay for the transition effect. The value assigned to the transition-delay property should be in seconds.<br><\/p>\n\n\n\n<p>Suppose we want our button to change to its new background color after a delay of one second. We can accomplish this task using the following code:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;div&gt;&lt;p&gt;This is a button.&lt;\/p&gt;&lt;\/div&gt;\ndiv {\n\twidth: 100px;\n\theight: 100px;\n\ttext-align: center;\n\tborder: solid 3px #33CCFF;\n\ttransition: background-color ease-in 0.5s;\n\ttransition-delay: 1s;\n}\ndiv:hover {\n\tbackground-color: #33CCFF;\n}\n<\/pre><\/div>\n\n\n\n<p>Our code returns:<br><\/p>\n\n\n\n<p><code>[Code result here]<br><\/code><\/p>\n\n\n\n<p>In our code, we specify the delay of our transition to be one second. So, the transition does not start until one second after the user begins to hover his or her cursor over the button.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Applying Multiple Transitions<\/h2>\n\n\n\n<p>When you\u2019re working with transitions, you may decide that you want more than one transition effect to take place.<br><\/p>\n\n\n\n<p>You can do this by specifying multiple transitions and separating each transition with a comma. Each transition can have a duration, speed curve, and any other attribute that a regular transition would use.<br><\/p>\n\n\n\n<p>For instance, let\u2019s take our button example from earlier. Suppose we want to change not only the background color of our button to blue, but we also want to change the border color of our button to pink. These should both occur when the user hovers over the element with the cursor. We can use the following code to accomplish this task:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>div {\n\twidth: 100px;\n\theight: 100px;\n\ttext-align: center;\n\tborder: solid 3px #33CCFF;\n\ttransition: background-color 2s, border 2s;\n}\ndiv:hover {\n\tbackground-color: #33CCFF;\n\tborder: solid 3px lightpink\n}\n<\/pre><\/div>\n\n\n\n<p>Our code returns:<br><\/p>\n\n\n\n<p><code>[Code result here]<br><\/code><\/p>\n\n\n\n<p>When you hover over the button, its background color changes to blue and its border color changes to light pink. This transition takes two seconds to complete.<br><\/p>\n\n\n\n<p>The order in which each transition in a list of transitions appears does not affect how the transition appears.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Transition Longhand vs Shorthand<\/h2>\n\n\n\n<p>In our above examples, we used the transition property to style our transition. The transition property is shorthand for the four individual subproperties used to define a transition in CSS. These four subproperties are:<br><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>transition-property<\/strong>: sets the properties to which a transition effect will be applied.<\/li>\n\n\n\n<li><strong>transition-duration<\/strong>: indicates how long the transition will last.<\/li>\n\n\n\n<li><strong>transition-timing-function<\/strong>: defines the speed of the transition.<\/li>\n\n\n\n<li><strong>transition-delay<\/strong>: delays the start of the transition.<\/li>\n<\/ul>\n\n\n\n<p>Let\u2019s use our above example to demonstrate how these properties work. Suppose we want to create a 100px by 100px button with a blue border, a default (white) background color, and center-aligned text. The background color of our button should transition to blue when the user hovers over it with their cursor. This transition should take 2 seconds, and it should start 0.5 seconds after the user starts hovering over the button with their cursor.<br><\/p>\n\n\n\n<p>We can use the following code to accomplish this task:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;div&gt;&lt;p&gt;This is a button.&lt;\/p&gt;&lt;\/div&gt;\ndiv {\n\twidth: 100px;\n\theight: 100px;\n\ttext-align: center;\n\tborder: solid 3px #33CCFF;\n\ttransition-property: background-color;\n\ttransition-duration: 2s;\n\ttransition-timing-function: ease;\n\ttransition-delay: 0.5s;\n}\ndiv:hover {\n\tbackground-color: #33CCFF;\n}\n<\/pre><\/div>\n\n\n\n<p>Our code returns:<br><\/p>\n\n\n\n<p><code>[Code result]<br><\/code><\/p>\n\n\n\n<p>As you can see, we created a button that transitions to and from a blue background color. These transitions occur when the user hovers their cursor over and away from the button, respectively.<br><\/p>\n\n\n\n<p>In our code, we specified the four transition subproperties (transition-property, transition-duration, transition-timing-function, and transition-delay) for our transition. We also used the styles from our earlier example to set the height, width, text alignment, and border color of our button.<br><\/p>\n\n\n\n<p>Alternatively, we can use the transition shorthand. Using the shorthand allows us to specify our CSS transition on one line of code rather than the four lines we used earlier. The syntax for the transition shorthand is as follows:<br><\/p>\n\n\n\n<p>transition: transition-property transition-duration transition-timing-function transition-delay;<br><\/p>\n\n\n\n<p>The order of the values specified above is the order you need to use when creating a transition.<br><\/p>\n\n\n\n<p>Let\u2019s use an example to illustrate how the transition shorthand works. Here\u2019s the code we would use to create our button from earlier using the transition shorthand:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;div&gt;&lt;p&gt;This is a button.&lt;\/p&gt;&lt;\/div&gt;\ndiv {\n\twidth: 100px;\n\theight: 100px;\n\ttext-align: center;\n\tborder: solid 3px #33CCFF;\n\ttransition: background-color 2s ease 0.5s;\n}\ndiv:hover {\n\tbackground-color: #33CCFF;\n}\n<\/pre><\/div>\n\n\n\n<p>Our code returns:<br><\/p>\n\n\n\n<p><code>[Code result here]<br><\/code><\/p>\n\n\n\n<p>As you can see, we applied the same styles here as we did in the previous example. The only difference is that rather than specifying the styles for our transition by listing each individual subproperty on its own line, we used the transition shorthand instead.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>The CSS transition property is used to define the type of transition that will occur between styles. The transition property has four shorthand properties: transition-property, transition-delay, transition-timing-function, and transition-duration. You can use these subproperties to set elements of the transition style individually.<br><\/p>\n\n\n\n<p>With examples, this tutorial discussed how to create a transition in CSS using the transition property and its four subproperties. Now you\u2019re ready to start creating CSS transitions like a professional web developer!<\/p>\n","protected":false},"excerpt":{"rendered":"When you\u2019re designing a web page, you may want to add transitions to an element. Transitions are triggered when a certain condition is met. For instance, you may want the background color of a button to change when the user hovers over the button. You can use the CSS transition property and its subproperties to&hellip;","protected":false},"author":240,"featured_media":14706,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-14705","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":"","is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CSS Transitions: A Step By Step Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"The transition property in CSS allows you to adjust how an element\u2014like a button\u2014looks when its style changes. Learn about CSS transitions in this article.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-transitions\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Transitions\" \/>\n<meta property=\"og:description\" content=\"The transition property in CSS allows you to adjust how an element\u2014like a button\u2014looks when its style changes. Learn about CSS transitions in this article.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-transitions\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-15T19:12:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T10:37:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/purple-and-green-computer-screen-type-92905.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"667\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-transitions\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-transitions\\\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"CSS Transitions\",\"datePublished\":\"2020-04-15T19:12:20+00:00\",\"dateModified\":\"2023-12-01T10:37:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-transitions\\\/\"},\"wordCount\":1643,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-transitions\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/purple-and-green-computer-screen-type-92905.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-transitions\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-transitions\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-transitions\\\/\",\"name\":\"CSS Transitions: A Step By Step Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-transitions\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-transitions\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/purple-and-green-computer-screen-type-92905.jpg\",\"datePublished\":\"2020-04-15T19:12:20+00:00\",\"dateModified\":\"2023-12-01T10:37:34+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"The transition property in CSS allows you to adjust how an element\u2014like a button\u2014looks when its style changes. Learn about CSS transitions in this article.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-transitions\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-transitions\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-transitions\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/purple-and-green-computer-screen-type-92905.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/purple-and-green-computer-screen-type-92905.jpg\",\"width\":1000,\"height\":667},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-transitions\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Transitions\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/jamesgallagher\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Transitions: A Step By Step Guide | Career Karma","description":"The transition property in CSS allows you to adjust how an element\u2014like a button\u2014looks when its style changes. Learn about CSS transitions in this article.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/css-transitions\/","og_locale":"en_US","og_type":"article","og_title":"CSS Transitions","og_description":"The transition property in CSS allows you to adjust how an element\u2014like a button\u2014looks when its style changes. Learn about CSS transitions in this article.","og_url":"https:\/\/careerkarma.com\/blog\/css-transitions\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-04-15T19:12:20+00:00","article_modified_time":"2023-12-01T10:37:34+00:00","og_image":[{"width":1000,"height":667,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/purple-and-green-computer-screen-type-92905.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-transitions\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-transitions\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"CSS Transitions","datePublished":"2020-04-15T19:12:20+00:00","dateModified":"2023-12-01T10:37:34+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-transitions\/"},"wordCount":1643,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-transitions\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/purple-and-green-computer-screen-type-92905.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-transitions\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-transitions\/","url":"https:\/\/careerkarma.com\/blog\/css-transitions\/","name":"CSS Transitions: A Step By Step Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-transitions\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-transitions\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/purple-and-green-computer-screen-type-92905.jpg","datePublished":"2020-04-15T19:12:20+00:00","dateModified":"2023-12-01T10:37:34+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"The transition property in CSS allows you to adjust how an element\u2014like a button\u2014looks when its style changes. Learn about CSS transitions in this article.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-transitions\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-transitions\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-transitions\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/purple-and-green-computer-screen-type-92905.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/purple-and-green-computer-screen-type-92905.jpg","width":1000,"height":667},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-transitions\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Transitions"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14705","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=14705"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14705\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/14706"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=14705"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=14705"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=14705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}