OBINTUSACADEMY
HOME CONTACT SERVICES PRIVACY
C.B MS-PACKAGES CSS
CSS - Transition

BASIC

Introduction to CSS Getting Started CSS Basic Structure CSS Syntax CSS Selectors CSS Universal Selector CSS Element Selector CSS ID Selector CSS Class Selector CSS Group Selector CSS Descendant Selector CSS Child Selector CSS Adjacent Sibling Selector CSS General Sibling Selector CSS Pseudo Element Selector CSS Pseudo Class Selector CSS Attribute Selector CSS Comments CSS Rule CSS Colors CSS Foreground and Background Color CSS Fonts CSS Background CSS Background Clip CSS Background Origin CSS Background Size CSS Text/Word Formatting CSS Images

INTERMEDIATE

CSS Borders CSS Margin CSS Padding CSS Dimension CSS Outline CSS Lists CSS Tables CSS Links CSS Overflow CSS Cursor CSS Float CSS Clear CSS Box Sizing CSS Display CSS Positioning CSS Z-Indexing CSS Opacity CSS Icons CSS Media Queries

ADVANCE

CSS Multiple Backgrounds CSS Gradient CSS Shadow CSS 2D Transform CSS 3D Transform CSS Transition CSS Animation CSS Image Reflection CSS Masking CSS Navigation Bar CSS Dropdown CSS !important CSS Specificity CSS Math Functions CSS Web Fonts CSS Pagination CSS Multiple Columns CSS Resizing and Offset CSS Variables CSS Conclusion

Transition

PREVIOUS NEXT

In this tutorial, I will be showing you how to use the transition properties to animate element in your web page.

definition
DEFINITION:

Transition is the change from one state to another

Transition Properties

transition - shorthand property that use to for setting all transition properties. The syntax is as follows: transition: transition-property transition-duration transition-timing-function transition-delay

TRY IT OUT YOURSELF

transition-property - name of the CSS property you want to apply transition effect to. For example: width, padding, background-color, etc.

TRY IT OUT YOURSELF
note
NOTE:

Not all CSS properties can be used for transition-property.
Only CSS properties that has numbers, lengths, percentage and inches can be used.
transition-duration is NOT optional, it must be specified.


transition-duration - amount of time (in seconds or milliseconds) the transition should use from start to end.

TRY IT OUT YOURSELF

transition-timing-function - used to specify how the intermediate values in-between the start and the end of the transition should be calculated. It specifies the speed curve of the transition.

TRY IT OUT YOURSELF
  • ease - starts slowly, accelerates to the middle and slows down at the end.
  • ease-in - starts slowly then accelerates towards the end.
  • ease-out - starts quickly the accelerates towards the end.
  • ease-in-out - combines both ease-in and ease-out characteristics.
  • cubic-bezier(p1, p2, p3, p4) - transition which allows you define your own cubic-bezier function. NB: Values must be from 0 and 1.
  • linear - transition at an even speed; same as cubic-bezier (0.0, 0.0, 1.0, 1.0).
  • steps(n, jumpterm) transition which can be divided into n stops with each stop lasting an equal amount of time.
  • step-end - similar to steps(1, jump-end)
  • step-start - similar to steps(1, jump-start)
  • jump-start - defines a left continuous function, that repeats as the transition starts at the point where the first jump occurs.
  • jump-end - defines a right continuous function, that repeats as the final jump occurs at the end of the transition.
  • jump-none - no jump occurs at both ends, it maintains position of 0% and 100% mark for each duration of 1/n.
  • jump-both - parses at both 0% and 100% marks and adds a step to the transition time.
  • start - similar to jump-start.
  • end - similar to jump-end.

transition-delay - amount of time (in seconds or milliseconds) it takes before the transition will start.

TRY IT OUT YOURSELF
tips
TIP:

You can use transition with transform property
You can also have multiple transition element.


TRY IT OUT YOURSELF
PREVIOUS NEXT
ADVERTISEMENTS

LEARNING IS A CONTINOUS PROCESS - PRACTICE MAKES PERFECT