top button
Flag Notify
    Connect to us
      Facebook Login
      Site Registration Why to Join

Facebook Login
Site Registration

What is CSS transition and how to use it?

0 votes
28 views
What is CSS transition and how to use it?
posted Jun 26, 2017 by Sahana

Share this question
Facebook Share Button Twitter Share Button Google+ Share Button LinkedIn Share Button Multiple Social Share Button

1 Answer

0 votes

transition

transition allows to add an effect while changing from one style to another. You can set the which property you want to transition, duration, how you want to transit (linear, ease, ease-in, ease-out, cubic-bezier) and delay when transition will start. you can transition more than one property by comma separation.

transition parameters

There are four parameters for CSS transitions:

transition-property:
The property to be tweened, or the keyword ‘all’ to apply to all properties.
transition-duration:
The duration of the transition.
transition-timing-function:
Specifies a function to define how intermediate values for properties are computed. Timing functions determine how intermediate values of the transition are calculated.
transtion-delay:
Specifies a delay to the start of the transition.

In addition, you can also use the shorthand property where the parameters are specified as property, duration, timing function, delay.

Example

div {
    transition-property: width;
    transition-duration: 5s;
    transition-timing-function: linear;
    transition-delay: 2s;
}
answer Jun 26, 2017 by Subhajit Maity
Contact Us
+91 9880187415
sales@queryhome.net
support@queryhome.net
#280, 3rd floor, 5th Main
6th Sector, HSR Layout
Bangalore-560102
Karnataka INDIA.
QUERY HOME
...