CSS Transitions

List of available CSS transitions

If a CSS property has a 'middle' state you can transition it.

For example:

Opactity

opacity: 0 -> opacity: 0.5 -> opacity: 1 (transitionable)

Display

display: none -> display: Block (no middle state - not transitionable)

-moz-outline-radius
-moz-outline-radius-bottomleft
-moz-outline-radius-bottomright
-moz-outline-radius-topleft
-moz-outline-radius-topright
-webkit-text-fill-color
-webkit-text-stroke
-webkit-text-stroke-color
all
backdrop-filter
background
background-color
background-position
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-width
border-color
border-left
border-left-color
border-left-width
border-radius
border-right
border-right-color
border-right-width
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-width
border-width
bottom
box-shadow
caret-color
clip
clip-path
color
column-count
column-gap
column-rule
column-rule-color
column-rule-width
column-width
columns
filter
flex
flex-basis
flex-grow
flex-shrink
font
font-size
font-size-adjust
font-stretch
font-variation-settings
font-weight
grid-column-gap
grid-gap
grid-row-gap
height
left
letter-spacing
line-height
margin
margin-bottom
margin-left
margin-right
margin-top
mask
mask-border
mask-position
mask-size
max-height
max-width
min-height
min-width
object-position
offset
offset-anchor
offset-distance
offset-path
offset-position
offset-rotate
opacity
order
outline
outline-color
outline-offset
outline-width
padding
padding-bottom
padding-left
padding-right
padding-top
perspective
perspective-origin
right
rotate
scale
scroll-snap-coordinate
scroll-snap-destination
shape-image-threshold
shape-margin
shape-outside
tab-size
text-decoration
text-decoration-color
text-emphasis
text-emphasis-color
text-indent
text-shadow
top
transform
transform-origin
translate
vertical-align
visibility
width
word-spacing
z-index
zoom


Examples of CSS transitions

Color URL color

Example

Hover over this URL 

     <a href="#" class="color-url">This is my URL</a>

    
    .color-url{
		color:blue;
        text-decoration:underline;
        transition:color 0.4s;
	}

.color-url:hover{
		color:green;
}

Color change button

Example


 
<button class="color-button">Hover over me</button>
   
    .color-button{
	    text-align:center;
		padding:10px;
		background:#C30;
		border:2px #222 solid;
		color:#fff;
		border-radius:5px;
		min-width:150px;
		transition:all 0.4s;
}

.color-button:hover{
		color:#fff;
		background:#0C0;
		border:2px #C30 solid;
}

Change size

Example

Hover over me

<div class="grow-box">Hover over me</div>

.grow-box{
		display:flex;/*for display purposes of this box */
        justify-content:center;/*for display purposes of this box */
        align-items:center;/*for display purposes of this box */
       color:#fff;/*for display purposes of this box */

	    width:200px;
		height:200px;
		transition:all 0.4s;
}


.grow-box:hover{
		width:500px;
		height:500px;
}

Thicken border

Example

Example goes here

 ....Code goes here....

Travelling animated border

Example

Example goes here

 ....Code goes here....

Growing animated border

Example

Example goes here

 ....Code goes here....

Content sliding onto Page

Example

Example goes here

 ....Code goes here....

Lightbox

Example

Example goes here

 ....Code goes here....

Lightbox with modal

Example

Example goes here

 ....Code goes here....

Flpping object 3D

Example

Example goes here

 ....Code goes here....

Slide off page

Example

Div content goes here Div content goes hereDiv content goes hereDiv content goes here



Div content goes here


 ....Code goes here....