CSS PortalCSS Portal
Menu
  • CSS Generators
  • CSS Resources
  • CSS Tools
  • HTML Resources
  • Blog
  1. Home
  2. Blog
  3. CSS Transitions

CSS Transitions

Published on August 9, 2020By Rene Spronk

CSS transitions allow you to animate the original value of a CSS property to a new value over time, controlling the rate at which property values ​​change. Most properties change their values ​​in 16 milliseconds, so the recommended standard transition time is 200ms.

The change of properties occurs when a certain event occurs, which is described by the corresponding pseudo-class. The most commonly used pseudo-class is :hover. However, this pseudo-class does not work on mobile devices such as iPhone or Android. A generic solution that works in both desktop and mobile browsers would be JavaScript event handling (like switching classes on click).

Transitions apply to all elements as well as pseudo elements :before and :after. To specify all transition properties, we use the shorthand property which is – transition.

CSS transition-property Property

Contains the name of the CSS properties to which the transition effect will be applied. A property value can contain either one property or a comma-separated list of properties. When creating a transition, you can use both the initial and final states of the element. The property is not inherited.

The effects you create should be subtle. Not all properties require a gradual change over time due to user experience. For example, when we hover over a link, we want to see an instant change of the link color or the color and underline style. Therefore, transitions should be used for those properties to which you really need to draw attention.

For a list of values that can be used, please see our transition-property CSS property page.

Example Code

div {
width: 100px;
transition-property: width;
}
div:hover {
width: 300px;
}

CSS transition-duration Property

Sets the amount of time during which the transition should take place. If different properties have different transition values, they are separated by commas. If the transition duration is not specified, then the animation will not occur when changing property values. The property is not inherited.

For a list of values that can be used, please see our transition-duration CSS property page.

Example Code

div {
transition-duration: .2s;
}

Visual Example

<div class="wrap">
  <h1>Hover over block</h1>
  <p>transition-duration</p>
  <div class="container">
    <span>0.5s</span>
    <div class="box1 box"></div>
  </div>
   <div class="container">
    <span>1s</span>
    <div class="box2 box"></div>
  </div>
   <div class="container">
    <span>2s</span>
    <div class="box3 box"></div>
  </div>
</div>
body {font-family: 'sans-serif', serif; margin: 0;}
.wrap {text-align: center;}
.container {
  display: inline-block;
}
h1 {
  color: #3A262F;
  font-weight:normal; 
  text-align: center;
}
p {text-align:center;margin-bottom:20px;}
.box {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  margin: 20px 50px 0;
}
.wrap:hover .box {
  -webkit-transform: scale(2);
  -ms-ransform: scale(2);
  transform: scale(2);
}
.box1 {
  background: #FFD592;
  transition: .5s;
}
.box2 {
  background: #F9A88B;
  transition: 1s;
}
.box3 {
  background: #B39190;
  transition: 2s;
}

CSS transition-timing-function Property

The property defines a time function that describes the speed at which an object transitions from one value to another. If you are defining more than one transition for an element, such as the element’s background color and position, you can use different functions for each property. The property is not inherited.

For a list of values that can be used, please see our transition-timing-function CSS property page.

Check out our new generator – CSS Cubic Bezier Generator, this generator will help you visualize animation timing.

Example Code

div {
transition-timing-function: linear;
}

Visual Example

<div class="animation_box">
	<p>Hover over container to view transition-function-timing.</p>
	<div class="elem" style="transition-timing-function: ease">ease</div>
	<div class="elem" style="transition-timing-function: linear">linear</div>
	<div class="elem" style="transition-timing-function: ease-in">ease-in</div>
	<div class="elem" style="transition-timing-function: ease-out">ease-out</div>
	<div class="elem" style="transition-timing-function: ease-in-out">ease-in-out</div>
	<div class="elem" style="transition-timing-function: step-start">step-start</div>
	<div class="elem" style="transition-timing-function: step-end">step-end</div>
	<div class="elem" style="transition-timing-function: steps(6, end)">steps(6, end)</div>
	<div class="elem" style="transition-timing-function: cubic-bezier(0, 1.2, 1, -0.6)">cubic-bezier(0, 1.2, 1, -0.6)</div>
</div>
.animation_box {
  padding: 0 15px 15px 15px;
  }
.elem {
  background: #3366ff;
  color: white;
  width: 190px;
  padding: 5px 0 5px 0;
  text-indent: 5px;
  margin: 5px 0;
  transition: width 2s;
}
.animation_box:hover .elem {
  width: 100%;
}

CSS transition-delay Property

An optional property allows you to make the property change not instantly, but with some delay. Not inherited.

For a list of values that can be used, please see our transition-delay CSS property page.

Example Code

div {
transition-delay: .5s;
}

Visual Example

<div class="wrap">
  <h1>Hover over block</h1>
  <p>transition-delay</p>
  <div class="container">
  <span>0s</span>
  <div class="box1 box"></div>
  </div>
  <div class="container">
    <span>0.5s</span>
  <div class="box2 box"></div>
  </div>
  <div class="container">
    <span>1s</span>
  <div class="box3 box"></div>
  </div>
</div>
body {font-family: 'sans-serif', serif; margin: 0;}
.wrap {
  margin: 20px 0 0;
  text-align: center;
}
.container {display:inline-block}
h1 {
  color: #3A262F;
  font-weight:normal; 
}
p{margin-bottom:15px;}
.box {
  border-radius: 8px;
  margin: 20px;
  width: 60px;
  height: 60px;
}
.wrap:hover .box {
  transform: scale(1.5);
}

.box1 {
  background:#BED3E4;
  transition: 1s linear;
}
.box2 {
  background:#BCB4D9;
  transition: 1s linear .5s;
}
.box3 {
  background:#EBC0AD;
  transition: 1s linear 1s;
}

Transition Shorthand Property

All properties responsible for changing the appearance of an element can be combined into one CSS property – transition.

The syntax is:
transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>;

Using the default values, the entry:

div {
  transition-property: all;
  transition-duartion: 1s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

would be equivalent to:

div {transition: all 1s ease 0s;}

Smooth transition of several properties

For an element, you can specify several consecutive transitions by listing them separated by commas. Each transition can be decorated with its own temporary function.

div {transition: background 0.3s ease, color 0.2s linear;}

or

div {
transition-property: height, width, background-color;
transition-duration: 3s;
transition-timing-function: ease-in, ease, linear;
}

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL
Sidebar

CSS & HTML References

  • CSS At-Rules
    • @charset
    • @document
    • @font-face
    • @import
    • @keyframes
    • @media
    • @namespace
    • @page
    • @supports
    • @viewport
  • CSS Data Types
    • angle
    • basic-shape
    • blend-mode
    • color
    • frequency
    • gradient
    • image
    • integer
    • length
    • number
    • percentage
    • position
    • ratio
    • resolution
    • string
    • time
    • url
  • CSS Functions
    • attr
    • blur
    • brightness
    • calc
    • circle
    • contrast
    • drop-shadow
    • ellipse
    • grayscale
    • hsl
    • hsla
    • hue-rotate
    • inset
    • invert
    • linear-gradient
    • matrix
    • matrix3d
    • opacity
    • perspective
    • polygon
    • radial-gradient
    • repeating-linear-gradient
    • repeating-radial-gradient
    • rgb
    • rgba
    • rotate
    • rotate3d
    • rotateX
    • rotateY
    • rotateZ
    • saturate
    • scale
    • scale3d
    • scaleX
    • scaleY
    • scaleZ
    • sepia
    • skew
    • skewX
    • skewY
    • translate
    • translate3d
    • translateX
    • translateY
    • translateZ
  • CSS Properties
    • align-content
    • align-items
    • align-self
    • all
    • animation
    • animation-delay
    • animation-direction
    • animation-duration
    • animation-fill-mode
    • animation-iteration-count
    • animation-name
    • animation-play-state
    • animation-timing-function
    • backface-visibility
    • background
    • background-attachment
    • background-blend-mode
    • background-clip
    • background-color
    • background-image
    • background-origin
    • background-position
    • background-repeat
    • background-size
    • border
    • border-bottom
    • border-bottom-color
    • border-bottom-left-radius
    • border-bottom-right-radius
    • border-bottom-style
    • border-bottom-width
    • border-collapse
    • border-color
    • border-image
    • border-image-outset
    • border-image-repeat
    • border-image-slice
    • border-image-source
    • border-image-width
    • border-left
    • border-left-color
    • border-left-style
    • border-left-width
    • border-radius
    • border-right
    • border-right-color
    • border-right-style
    • border-right-width
    • border-spacing
    • border-style
    • border-top
    • border-top-color
    • border-top-left-radius
    • border-top-right-radius
    • border-top-style
    • border-top-width
    • border-width
    • bottom
    • box-decoration-break
    • box-shadow
    • box-sizing
    • break-after
    • break-before
    • break-inside
    • caption-side
    • caret-color
    • clear
    • clip-path
    • color
    • column-count
    • column-fill
    • column-rule
    • column-rule-color
    • column-rule-style
    • column-rule-width
    • column-span
    • column-width
    • columns
    • content
    • counter-increment
    • counter-reset
    • counter-set
    • cursor
    • direction
    • display
    • empty-cells
    • filter
    • flex
    • flex-basis
    • flex-direction
    • flex-flow
    • flex-grow
    • flex-shrink
    • flex-wrap
    • float
    • font
    • font-family
    • font-feature-settings
    • font-kerning
    • font-language-override
    • font-size
    • font-size-adjust
    • font-stretch
    • font-style
    • font-synthesis
    • font-variant
    • font-variant-alternates
    • font-variant-caps
    • font-variant-east-asian
    • font-variant-ligatures
    • font-variant-numeric
    • font-variant-position
    • font-weight
    • grid
    • grid-area
    • grid-auto-columns
    • grid-auto-flow
    • grid-auto-rows
    • grid-column
    • grid-column-end
    • grid-column-gap
    • grid-column-start
    • grid-gap
    • grid-row
    • grid-row-end
    • grid-row-gap
    • grid-row-start
    • grid-template
    • grid-template-areas
    • grid-template-columns
    • grid-template-rows
    • hanging-punctuation
    • height
    • hyphens
    • image-orientation
    • justify-content
    • justify-items
    • justify-self
    • left
    • letter-spacing
    • line-break
    • line-height
    • list-style
    • list-style-image
    • list-style-position
    • list-style-type
    • margin
    • margin-bottom
    • margin-left
    • margin-right
    • margin-top
    • max-height
    • max-width
    • min-height
    • min-width
    • mix-blend-mode
    • object-fit
    • object-position
    • opacity
    • order
    • orphans
    • outline
    • outline-color
    • outline-offset
    • outline-style
    • outline-width
    • overflow
    • overflow-wrap
    • overflow-x
    • overflow-y
    • padding
    • padding-bottom
    • padding-left
    • padding-right
    • padding-top
    • perspective
    • perspective-origin
    • place-content
    • place-items
    • place-self
    • position
    • quotes
    • resize
    • right
    • shape-image-threshold
    • shape-margin
    • shape-outside
    • tab-size
    • table-layout
    • text-align
    • text-align-last
    • text-combine-upright
    • text-decoration
    • text-decoration-color
    • text-decoration-line
    • text-decoration-style
    • text-emphasis
    • text-emphasis-color
    • text-emphasis-position
    • text-emphasis-style
    • text-indent
    • text-justify
    • text-orientation
    • text-overflow
    • text-shadow
    • text-transform
    • text-underline-position
    • top
    • transform
    • transform-origin
    • transform-style
    • transition
    • transition-delay
    • transition-duration
    • transition-property
    • transition-timing-function
    • unicode-bidi
    • vertical-align
    • visibility
    • white-space
    • widows
    • width
    • word-break
    • word-spacing
    • word-wrap
    • writing-mode
    • z-index
  • CSS Pseudo Classes
    • :active
    • :checked
    • :default
    • :disabled
    • :empty
    • :enabled
    • :first-child
    • :first-of-type
    • :focus
    • :fullscreen
    • :hover
    • :in-range
    • :indeterminate
    • :invalid
    • :lang
    • :last-child
    • :last-of-type
    • :link
    • :not
    • :nth-child
    • :nth-last-child
    • :nth-last-of-type
    • :nth-of-type
    • :only-child
    • :only-of-type
    • :optional
    • :out-of-range
    • :read-only
    • :read-write
    • :required
    • :root
    • :target
    • :valid
    • :visited
  • CSS Pseudo Elements
    • ::after
    • ::before
    • ::first-letter
    • ::first-line
    • ::placeholder
    • ::selection
  • HTML Tags
    • a
    • abbr
    • address
    • area
    • article
    • aside
    • audio
    • b
    • base
    • bdi
    • bdo
    • blockquote
    • body
    • br
    • button
    • canvas
    • caption
    • cite
    • code
    • col
    • colgroup
    • comment
    • datalist
    • dd
    • del
    • details
    • dfn
    • dialog
    • div
    • dl
    • doctype
    • dt
    • em
    • embed
    • fieldset
    • figcaption
    • figure
    • footer
    • form
    • h1
    • h2
    • h3
    • h4
    • h5
    • h6
    • head
    • header
    • hr
    • html
    • i
    • iframe
    • img
    • input
    • ins
    • kbd
    • keygen
    • label
    • legend
    • li
    • link
    • map
    • mark
    • menu
    • meta
    • meter
    • nav
    • noscript
    • object
    • ol
    • optgroup
    • option
    • output
    • p
    • param
    • picture
    • pre
    • progress
    • q
    • rp
    • rt
    • ruby
    • s
    • samp
    • script
    • section
    • select
    • small
    • source
    • span
    • strong
    • style
    • sub
    • summary
    • sup
    • table
    • tbody
    • td
    • textarea
    • tfoot
    • th
    • thead
    • time
    • title
    • tr
    • track
    • u
    • ul
    • var
    • video
    • wbr
  • Sponsors
  • Learn Wordpress
    Wordpress hosting. Theme and plugin reviews. Wordpress development tips.
    Templatic
    Wordpress Themes, Cloud Hosting, Backups and Webmaster Tips.
    A2 Web Hosting
    Shared hosting, Reseller hosting, Cloud hosting, Dedicated hosting.
    Online Password Manager
    Access your passwords from any computer, no need to remember all of your passwords.
    Advertise Here
    Advertise your company and products here!

    About CSSPortal

    CSS Portal is home to many examples of CSS and how it can be used in website design. Here you'll find all CSS properties and many CSS generators to help with all your design needs.

    Friends

    • Expand URL
    • Password Manager
    • Website Tools & Generators

    CSSPortal

    • Donate to CSSPortal
    • Privacy Policy
    • Contact Us
    • CSS Blog

    Copyright © 2023, CSSPortal.com All rights reserved.