Scribd
Upload
15 views12 pages

M2 Part8

Uploaded by

Aman
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
15 views12 pages

M2 Part8

Uploaded by

Aman
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/ 12

CSS - Part 3

Animation
Animation
Animated element in CSS keep changing its appearance from time
to time.

Parameters of animation element;


1. name
2. direction
3. duration
4. timing-function
5. delay
6. iteration-count
7. fill-mode
8. play-status
@keyframes Rule :
When a styling code is written inside a keyframe rule, it allows the animation to
change from the current style to a new style. This permits to create multiple
animation points.
Eg:
@keyframes key1 {
from {background-color: #ff000;}
to {background-color: blue;}
}
Element Code:
div {
width: 50px;
height: 70px;
background-color: #ff000;
animation-name: key1;
animation-duration: 10s;
}
We can also make the animation to change over the period of
its completion as;

Eg;

@keyframes key1 {
25% {background-color: #ff000;}
25% {background-color: blue;}
25% {background-color: white;}
25% {background-color: yellow;}
}
div {
width: 50px;
height: 70px;
background-color: #ff000;
animation-name: key1;
animation-duration: 10s;
animation-delay: 2s;
animation-iteration-count: infinite /3;
animation-direction: alternate;
}

Here, for every 25% of the animation completion, the color changes with a delay
of 2s before starting the animation and iterates for 3 times or infinite times. The
animation direction specifies the movement of the animation. It may be
considered to be alternate, reverse, alternate-reverse or normal(default).
Multi Column Layout
Multi Column
In multi column formatting, Layoutspecifies the
the column-count
number of columns an element is divided. The gap between the
columns are denoted by the column-gap property. Similarly
there are various such properties as;

column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width
<head>
<style> Multi Column Layout - Example
.col1 {
column-count: 3;
column-gap: 10px;
column-rule: 2px solid red;
}
</style>
</head>
--------------------------------------------------------------------------------------------
<div class=“col1">
When creating animations and other GPU-heavy actions, it's important to understand
the will-change attribute. Both CSS keyframes and the transition property use GPU
acceleration. Performance is increased by offloading calculations to the device's
GPU. This is done by creating paint layers (parts of the page that are individually
rendered) that are offloaded to the GPU to be calculated.
</div>
User Interface
User Interface
The User interface of CSS includes resizing and outline-offset. The resizing
provides permission of resizing the element, and in which direction .
The resize may be horizontal, vertical, both, or none.
<style>
div{
resize: vertical;
}
</style>
---------------------------------------------------------------------------------------
<body>
<div>
When creating animations and other GPU-heavy actions, it's important to
understand the will-change attribute. Both CSS keyframes and the transition
property use GPU acceleration. Performance is increased by offloading
calculations to the device's GPU.
</div>
</body>
The outline offset provides space between an outline and the element border. Here,
the outline is constructed away from the element and to overlap the element
content.
<style>
div{
outline-offset: 5px;
outline: 5px dashed blue / solid blue;
}
</style>
---------------------------------------------------------------------------------------
<body>
<div>
When creating animations and other GPU-heavy actions, it's important to
understand the will-change attribute. Both CSS keyframes and the transition
property use GPU acceleration.
</div>
</body>

You might also like