Scribd
Upload
10 views13 pages

EMPOTECH

Uploaded by

Khyle Kiemar Ortiz Lagrimas
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
10 views13 pages

EMPOTECH

Uploaded by

Khyle Kiemar Ortiz Lagrimas
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/ 13

Custom animations and timing in web development

allow you to create dynamic and engaging user


experiences. By manipulating the properties of HTML
elements over time, you can create visually appealing
transitions, effects, and interactions.

Here's a breakdown of key concepts and a practical


example:
- CSS Animations: CSS Animations provide a powerful
way to define animations directly within your
stylesheets. They allow you to control the duration,
timing, and easing of transitions, creating smooth and
visually pleasing animations.
- Keyframes: Keyframes define specific states of an
animation at different points in time. By setting
properties like transform , opacity , and color at
different keyframes, you can create a sequence of
changes that occur over the animation's duration.
- Timing Functions: Timing functions control the speed
and rhythm of an animation. They determine how an
animation progresses between keyframes, allowing you
to create effects like acceleration, deceleration, or
bouncing. Common timing functions include linear ,
ease-in , ease-out , and ease-in-out .
Example: A Simple Bouncing Ball Animation

html
Copy
<!DOCTYPE html>
<html>
<head>
<style>
.ball {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
position: relative;
animation: bounce 2s infinite;
}
}

@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-100px);
}
100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
animation with a duration of 2 seconds, repeating
infinitely.
3. Keyframes:
- The @keyframes bounce block defines the animation's
keyframes.
- 0% (start of animation): The ball's vertical position is
translateY(0) , meaning it's at its initial position.
- 50% (midpoint of animation): The ball is translated
upwards by translateY(-100px) .
- 100% (end of animation): The ball returns to its
original position with translateY(0) .

This code creates a simple bouncing animation. The ball


moves up and down repeatedly with a smooth,
continuous motion. You can adjust the translateY
values, the animation duration, and the timing function
<body>

<div class="ball"></div>

</body>
</html>

Explanation:

1. HTML Structure: A simple div element with the class


ball is created to represent the bouncing ball.
2. CSS Styling:
- The ball class defines the ball's appearance (width,
height, background color, and rounded shape).
- position: relative is set to allow for positioning within
timing function to create different bouncing effects.

Further Exploration:

- Easing Functions: Explore different timing functions like


ease-in , ease-out , and ease-in-out to create custom
animation curves.
- Multiple Keyframes: Define more keyframes to create
complex animation sequences.
- CSS Transitions: Learn about CSS transitions to create
smooth transitions between different states of an
element.
- JavaScript Animation Libraries: Explore libraries like
GSAP (GreenSock Animation Platform) for advanced
animation control and effects.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy