Next, you need to apply a 5e0ms animation called fall to each sticky note. fal1 should move each sticky note 500px down the screen. Stagger the animation-delay so each sticky note falls at a different time. Each sticky note should retain its final position afte the animation completes. Animation Hints:

Computer Networking: A Top-Down Approach (7th Edition)
7th Edition
ISBN:9780133594140
Author:James Kurose, Keith Ross
Publisher:James Kurose, Keith Ross
Chapter1: Computer Networks And The Internet
Section: Chapter Questions
Problem R1RQ: What is the difference between a host and an end system? List several different types of end...
icon
Related questions
Question

I really need help with making the auditions needed in the image I have provided the code this is what I have so far Below please help. only need help with 5 because number 6 just hints my teacher left me but they have me confused.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lab 14</title>
</head>
<body>
    <div>
        <h2>Sticky Note Board</h2>
        <div class="sticky-board">
            <div style="display: relative;">
            <div class="sticky-note" id="first">
                <div class="sticky-note-title">
                    Transforms
                </div>
                <div class="sticky-note-body">CSS transforms change the shape and position of the affected content without disrupting the normal document flow.</div>
            </div>
            </div>
            <div class="sticky-note" id="second">
                <div class="sticky-note-title">
                    Translate
                </div>
                <div class="sticky-note-body"><code>translate()</code> repositions an element in the horizontal and/or vertical directions.</div>
            </div>
            <div class="sticky-note" id="third">
                <div class="sticky-note-title">
                    Scale
                </div>
                <div class="sticky-note-body"><code>scale()</code> defines a transformation that resizes an element on the 2D plane</div>
            </div>
            <div class="sticky-note" id="fourth">
                <div class="sticky-note-title">
                    Rotate
                </div>
                <div class="sticky-note-body"><code>rotate()</code> defines a transformation that rotates an element around a fixed point on the 2D plane</div>
            </div>
            <div class="sticky-note" id="fifth">
                <div class="sticky-note-title">
                    Skew
                </div>
                <div class="sticky-note-body"><code>skew()</code> defines a transformation that distorts an element on the 2D plane</div>
            </div>
            <div class="sticky-note" id="sixth">
                <div class="sticky-note-title">
                    Matrix
                </div>
                <div class="sticky-note-body"><code>matrix()</code> defines a homogeneous 2D transformation matrix</div>
            </div>
        </div>
    </div>
</body>
</html>

<style>
/* colors.css */

.sticky-note {
    /*     DON'T EDIT ME */
    color: black;
    background: #D29DE9;
}
.sticky-note-title {
    /*     DON'T EDIT ME */
    color: inherit;
}
.sticky-note-body {
    /*     DON'T EDIT ME */
    color: inherit;
}
#first {
    background-color:#9857B4;
}
#second {
    background-color:#D29DE9;
}
#third {
    background-color:#FA66BC;
}
#fourth {
    background-color:#F6B744;
}
#fifth {
    background-color:#C3E129;
}
#sixth {
    background-color:#E6E921;
}

 


/* formatting.css*/

.sticky-note-title {
    /*     DON'T EDIT ME */
    padding: 1rem;
    font-size: 2rem;
}
.sticky-note-body {
    /*     DON'T EDIT ME */
    transform: rotate(0);
    padding: 1rem;
    font-size: 1.5rem;
}
.sticky-board {
    /*     DON'T EDIT ME */
    margin-top: 2em;
    display: flex;
    padding: 3em;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
}
.sticky-note {
    flex-shrink: 0;
    width: 20em;
    height: 20em;

    /*     Add styles here */
    
}
#first {
     transform: rotate(75deg);
     transition: transform 500ms;    
}
#second {
     transform: rotate(75deg);
     transition: transform 500ms;
    }

#third {
     transform: rotate(75deg);
     transition: transform 500ms;
}
#fourth {
     transform: rotate(75deg);
     transition: transform 500ms;
}
#fifth {
     transform: rotate(75deg);
      transition: transform 500ms;
}
#sixth {
     transform: rotate(75deg);
     transition: transform 500ms;
}

 


/* animations-transitions.css*/

.sticky-note {
    /*     Add styles here */
    /* transition properties here! */
    
    /* global animation properties here! */
}
#first:hover{
     transform: rotate(0deg);
     transform: scale(1.25);
}
#second:hover {
 
    transform: rotate(0deg);
    transform: scale(1.25);

}
#third:hover {

    transform: rotate(0deg);
    transform: scale(1.25);
}
#fourth:hover {

    transform: rotate(0deg);
    transform: scale(1.25);
}
#fifth:hover {
 
    transform: rotate(0deg);
    transform: scale(1.25);
}
#sixth:hover {
    transform: rotate(0deg);
    transform: scale(1.25);
}        

/*     add hover selectors for the each id selector */

/*     create a keyframe animation "fall" below */

</style>

5. Next, you need to apply a 500ms animation called fall
to each sticky note. fall should move each sticky note 500px down the screen. Stagger the animation-delay so each sticky note falls at a different time. Each sticky note should retain its final position after
the animation completes.
6. Animation Hints:
o create a single animation named fall
o you will need to change the position property of div.sticky-note
o review the offset properties left
top
right and bottom
- one of these will help you!
o animation-fill-mode: forwards; allows elements to retain the final state of an animation
o the following animation properties only need to be defined once
animation-name
animation-duration
animation-iteration-count
animation-fill-mode
Transcribed Image Text:5. Next, you need to apply a 500ms animation called fall to each sticky note. fall should move each sticky note 500px down the screen. Stagger the animation-delay so each sticky note falls at a different time. Each sticky note should retain its final position after the animation completes. 6. Animation Hints: o create a single animation named fall o you will need to change the position property of div.sticky-note o review the offset properties left top right and bottom - one of these will help you! o animation-fill-mode: forwards; allows elements to retain the final state of an animation o the following animation properties only need to be defined once animation-name animation-duration animation-iteration-count animation-fill-mode
Expert Solution
steps

Step by step

Solved in 2 steps

Blurred answer
Recommended textbooks for you
Computer Networking: A Top-Down Approach (7th Edi…
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Concepts of Database Management
Concepts of Database Management
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY