Campsite Coders

Learn CSS

Learn to code and become a Front End Web Developer

Campsite Coders Bootcamp Coding Advenuture

CSS Transition Property


Transition: a shorthand property for setting the 4 transition properties into a single property.

Transition-Delay: specifies a delay in seconds for the transition effect.

Transition-Duration: specifies how many seconds or milliseconds a transition effect takes to complete.

Transition-Property: Specifies the name of the CSS property the transition effect is for.

Transition-Timing-Function: Specifies the speed curve of the transition effect.

Properties that you can change include width, height, color, background-color, border-radius, opacity, etc.

Review the 7 demos below to see transition properties in action.

transition-property

(font) color
background (color)

border-radius
opacity
transform: translate (left, top)
transform: scale (size)
transform: rotate (degrees)

HTML

html code example of images in the aside element

CSS

css code for selecting nested elements

How to Make Text Fly In

NOTES


After you complete the video, please leave a comment (on YouTube) to indicate that you have completed this step. If you posted your project on CodePen or GitHub then you can leave a link to your project in the comments. (no other links allowed).

Spend some time playing around with the different settings of CSS animation transition properties before moving ahead.

Campsite Coders Bootcamp Coding Adventure
Road Map for Coding Adventure One

Campsite Coders

56747 Ewing Rd

Moffat, CO 81143

720-515-1124

Campsite Coders logo in footer

Copyright 2023 . All rights reserved