Scribd
Upload
16 views1 page

Nov 1 Notes

The document discusses various CSS properties including @import, Google fonts, transform properties like scale, rotate, translate and skew, transition properties, animation properties including name, duration, delay, iteration count, direction and fill mode, and the steps timing function.

Uploaded by

praneethgpt836
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
16 views1 page

Nov 1 Notes

The document discusses various CSS properties including @import, Google fonts, transform properties like scale, rotate, translate and skew, transition properties, animation properties including name, duration, delay, iteration count, direction and fill mode, and the steps timing function.

Uploaded by

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

******** properties for tomorrow**********

1) @import tag
2)using google fonts

3)transform properties
1) transform:scale(1.5) increase by 1.5 times;
2) rotate,rotateX,rotateY,rotateZ
3) translate,translatex,translateY
4)skew (slant)

4)transition properties

transition-duration: 2s; /* time taken to complete the transition*/


transition-property: transform; /* when to apply*/
transition-timing-function:ease-in; /* when to apply */
transition-delay: 0s; /* how much time it will take before starting the
transition */
or shorthand properties: transition : property duration type(linear) delay
5)animation properties
/* animation: name duration timing-function delay iteration-count direction fill-
mode; */
animation-name : name of the animation could be anything
animation-duration: how much time should the animation should be completed
animation-delay : delay before the animation start
animation-iteration-count : how many times it should run
animation-direction:forwards/reverse/alternate
he animation-timing-function property specifies the speed curve of the animation.

The animation-timing-function property can have the following values:

ease - Specifies an animation with a slow start, then fast, then end slowly (this
is default)
linear - Specifies an animation with the same speed from start to end
ease-in - Specifies an animation with a slow start
ease-out - Specifies an animation with a slow end
ease-in-out - Specifies an animation with a slow start and end
animation-fill-mode:
The animation-fill-mode property can have the following values:

none - Default value. Animation will not apply any styles to the element before or
after it is executing
forwards - The element will retain the style values that is set by the last
keyframe (depends on animation-direction and animation-iteration-count)
backwards - The element will get the style values that is set by the first keyframe
(depends on animation-direction), and retain this during the animation-delay period
both - The animation will follow the rules for both forwards and backwards,
extending the animation properties in both directions
The steps() method is a timing function in animation property that divides an
animation into n steps, displaying each step at equal intervals of time. For
example, if n is 2 then it will divide the animation into 2 parts. It divides the
duration from 0% to 100% into 2 parts which are 0% – 50% and 50% – 100%
respectively.

6)if time left (complete the form using absoulte postioning)

You might also like