Homework Help is Here – Start Your Trial Now!
Engineering
Computer Engineering
Apply a unique rotate transform to each sticky note below. Use values between -75deg and 75deg Use the id selectors in formatting.css to apply these styles. When a user hovers over a sticky note, the element should rotate back to an unrotated position. Moreover, the element should scale to 1.25x its original size. It should complete this transition in 500ms • create :hover selectors for each id selector in animations-transitions.css to complete this task 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. Animation Hints:

Apply a unique rotate transform to each sticky note below. Use values between -75deg and 75deg Use the id selectors in formatting.css to apply these styles. When a user hovers over a sticky note, the element should rotate back to an unrotated position. Moreover, the element should scale to 1.25x its original size. It should complete this transition in 500ms • create :hover selectors for each id selector in animations-transitions.css to complete this task 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. Animation Hints:

Computer Networking: A Top-Down Approach (7th Edition)
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...
See similar textbooks
icon
Related questions
Question
3. Apply a unique rotate transform to each sticky note below. Use values between -75deg and 75deg . Use the id selectors in formatting.css to apply these styles. 4. When a user hovers over a sticky note, the element should rotate back to an unrotated position. Moreover, the element should scale to 1.25x its original size. It should complete this transition in 500ms o create :hover selectors for each id selector in animations-transitions.css to complete this task 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 5. Next, you need to apply a 500ms animation called fall to each sticky note. 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! 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 I animation-duration animation-iteration-count animation-fill-mode
Transcribed Image Text:3. Apply a unique rotate transform to each sticky note below. Use values between -75deg and 75deg . Use the id selectors in formatting.css to apply these styles. 4. When a user hovers over a sticky note, the element should rotate back to an unrotated position. Moreover, the element should scale to 1.25x its original size. It should complete this transition in 500ms o create :hover selectors for each id selector in animations-transitions.css to complete this task 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 5. Next, you need to apply a 500ms animation called fall to each sticky note. 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! 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 I animation-duration animation-iteration-count animation-fill-mode
Expert Solution
steps

Step by step

Solved in 3 steps

SEE SOLUTIONCheck out a sample Q&A here
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
SEE MORE TEXTBOOKS