Scribd
Upload
6 views9 pages

CSS Animation Techniques Explained

The document discusses CSS animations including changing colors, positioning elements, delaying animations, setting iteration counts, and timing functions. Examples are provided for each animation property discussed.

Uploaded by

nivejagan2000
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views9 pages

CSS Animation Techniques Explained

The document discusses CSS animations including changing colors, positioning elements, delaying animations, setting iteration counts, and timing functions. Examples are provided for each animation property discussed.

Uploaded by

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

CSS Animations

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

animation-name: example;

animation-duration: 4s;

@keyframes example {

from {background-color: red;}

to {background-color: yellow;}

</style>

</head>

<body>

<h1>CSS Animation</h1>

<div></div>
<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>

</html>

Animations number of color:


<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

animation-name: example;

animation-duration: 4s;

@keyframes example {

0% {background-color: red;}

25% {background-color: yellow;}

50% {background-color: blue;}

100% {background-color: green;}

}
</style>

</head>

<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>

</html>

Animations float:
<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

position: relative;

animation-name: example;

animation-duration: 4s;
}

@keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

</style>

</head>

<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>

</html>

Delay an Animation
<html>

<head>

<style>
div {

width: 100px;

height: 100px;

background-color: red;

position: relative;

animation-name: example;

animation-duration: 4s;

animation-delay: 2s;

@keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

</style>

</head>

<body>

<h1>CSS Animation</h1>

<p>The animation-delay property specifies a delay for the start of an animation. The following example
has a 2 seconds delay before starting the animation:</p>
<div></div>

</body>

</html>

animation-iteration-count:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}

@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>

<p>The 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:</p>

<div></div>

</body>
</html>

Example2:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}

@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-iteration-count property can be set to infinite to let the animation run for ever:</p>

<div></div>

</body>
</html>

Example3:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 50px;
background-color: red;
font-weight: bold;
position: relative;
animation: mymove 5s infinite;
}

#div1 {animation-timing-function: linear;}


#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
@keyframes mymove {
from {left: 0px;}
to {left: 300px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-timing-function property specifies the speed curve of the animation. The following
example shows some of the different speed curves that can be used:</p>

<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>

</body>
</html>

Common questions

Powered by AI

The "animation-name" property specifies the name of the keyframe animation, linking an HTML element to its animation sequence. The "animation-duration" property defines how long an animation takes to complete one cycle, determining the speed of the animation from start to end .

The position properties like 'left' and 'top' are defined in the keyframes to move an element across the page in a specified path during a CSS animation. As percentages in keyframes change, the element's position is adjusted according to the specified 'left' and 'top' values, creating visual motion .

In a CSS animation, transitions between colors are defined using keyframes by specifying color values at different percentages. For example, an animation could change from red to yellow at 25%, blue at 50%, and green at 100%, smoothly transitioning through these colors over the animation duration .

Setting the "animation-iteration-count" property to infinite causes the animation to repeat indefinitely without stopping, thereby creating a continuous loop .

Keyframes allow for the specification of multiple property changes at different stages of an animation. For instance, by using percentages like 0%, 25%, 50%, 75%, and 100%, different styles such as color and position (left and top properties) are defined for various stages of the animation, creating a sequence of visual effects .

The "animation-delay" property specifies a delay for the start of an animation, allowing it to begin at a later time after the page loads. For example, if an animation-delay is set to 2 seconds, the CSS animation will start 2 seconds after the page is rendered .

The "animation-timing-function" property controls the speed curve of an animation. The 'linear' function results in a constant speed from start to end. 'Ease' starts slowly, accelerates in the middle, and then slows down at the end. 'Ease-in' begins at a slow pace and speeds up, while 'ease-out' starts fast and ends slowly. 'Ease-in-out' combines both, with a slow beginning and end, with a faster middle .

When a CSS animation finishes, if no additional properties like 'animation-fill-mode' are specified, the element reverts to its original style, meaning it doesn't retain the final state's properties .

Multiple animations, each with varied timing functions like linear, ease, and ease-in-out, can create a dynamic and visually engaging web design by interspersing smooth transitions, sudden movements, and various speeds. This approach can emphasize certain content or actions and produce a layered animation effect, influencing user focus and interaction .

Altering percentage intervals within keyframes modifies when each style change occurs during the animation sequence. Smaller intervals lead to more frequent transitions, potentially creating smoother animations but requiring more precision in defining each step. Conversely, larger intervals provide longer durations for each style, resulting in more pronounced changes .

You might also like