Scribd
Upload
40 views16 pages

Tramsition and Animation

This document discusses CSS transitions and animations. It explains that transitions allow gradual property changes over a specified duration, rather than sudden changes. It provides details on transition properties like duration, timing function, and delay. It also discusses CSS animations, including using keyframes to change styles at certain times and animation properties like name, duration, delay, iteration count, direction, and timing function.

Uploaded by

Joel Jackson
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
40 views16 pages

Tramsition and Animation

This document discusses CSS transitions and animations. It explains that transitions allow gradual property changes over a specified duration, rather than sudden changes. It provides details on transition properties like duration, timing function, and delay. It also discusses CSS animations, including using keyframes to change styles at certain times and animation properties like name, duration, delay, iteration count, direction, and timing function.

Uploaded by

Joel Jackson
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

TRANSITIONS

&
ANIMATIONS

MUHAMMAD SHOAIB ALI KHAN


APTECH FACULTY MEMBER
CSS3 TRANSITIONS

CSS Transitions allows property changes in CSS


values to occur smoothly over a specified duration.

For example, if a link changes color on hover, you


can have it gradually fade from one color to the
other, instead of a sudden change.
Browser Supports for Transitions

Chrome, Mozila , Opera browser version that fully


supports the property.
Numbers followed by -webkit-, -moz-, or -o- specify
the first version that worked with a prefix.
For Chrome –webkit-
For Mozila –moz-
For Opera –o-
STEPS

Here are the steps to create a simple transition using


only CSS:
1. Declare the original state of the element in the
default style declaration.
2. Declare the final state of your transitioned element;
for example, in a hover state.
3. Include the transition functions in your default style
declaration, using a few different properties:
transition-property, transition-duration,transition-
timing-function, and transition-delay.
TRANSITION PROPERTY

transition-property
Specifies the name of the CSS property the
transition effect is for.
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition-property: width, height;
}
TRANSITION DURATION

transition-duration
Specifies how many seconds or milliseconds a transition
effect takes to complete

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition-duration: 3s;
}
TRANSITION TIMING FUNCTION

transition-timing-function
Specifies the speed curve of the transition effect.

1) Ease -specifies a transition effect with a slow start,


then fast, then end slowly (this is default).

2) Linear - specifies a transition effect with the same


speed from start to end.
TRANSITION TIMING FUNCTION

3) Ease-in -specifies a transition effect with a slow start.


4) Ease-out -specifies a transition effect with a slow end.
5) Ease-in-out - specifies a transition effect with a slow start and
end
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition-duration: 3s;
 -webkit-transition-timing-function: ease-in;

}
TRANSITION DELAY

transition-delay
Specifies when the transition effect will start.

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition-duration: 3s;
 -webkit-transition-delay: 3s;
}
CSS3 ANIMATIONS

An animation lets an element gradually change from


one style to another.
You can change as many CSS properties you want, as
many times you want.
To use CSS3 animation, you must first specify some
keyframes for the animation.
Keyframes hold what styles the element will have at
certain times.
ANIMATION EXAMPLE

div {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation-name: ani;
-webkit-animation-duration: 4s;
}

@-webkit-keyframes ani
{
from {background-color: red;}
to {background-color: yellow;}
}
ANIMATION DELAY

Animation-delay property specifies a delay for the start of an


animation.
The following example has a 2 seconds delay before starting
the animation:
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}
ANIMATION ITERATION COUNT

Animation-iteration-count property specifies the number of


times an animation should run.
The following example will run the animation 3 times before
it stops:
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3/infinite;
}
ANIMATION DIRECTION

Animation-direction property is used to let an animation run in


reverse direction or alternate cycles.
The following example will run the animation in reverse direction:
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: reverse;
}
ANIMATION TIMING FUNCTION

The animation timing function property specifies


the speed curve of the animation.
The animation timing function property can have the
following values:
1) Ease (Slow start, then fast, then end slowly) default
2) Linear (Same speed from start to end)
3) Ease-in (Slow start)
4) Ease-out (Slow end)
5) Ease-in-out (Slow start and end)
THANK YOU

You might also like