FAQ: Animation - Transitions - Delay

Frequently Asked Questions CSS FAQ
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

This community-built FAQ covers the “Delay” exercise from the lesson “Animation - Transitions”.

Paths and Courses
This exercise can be found in the following Codecademy content:

FAQs on the exercise Delay

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

2

Considering the example, does the transition-delay property delay for three seconds to transition back to it’s original position?

1 Like
3

A transition does not spring back. It has one direction, only. For a spring back effect there will be two transitions. One to go from state A to state B, and one to go from state B to state A. Think in terms of the pseudo-class, :hover. One transition would take effect on mouse over, the spring back effect would happen on mouse out.

1 Like
4

Thank you @mtf. I’ll have to read more on the pseudo-class :hover.

1 Like
5

As it were I am only referring to CSS. We can manipulate the style sheet with DOM script, of which you may have already become aware. The focus here is literally CSS, with no scripting involved.

6

@mtf, not yet. I want to finish this path and learn about Javascript. When I get there I’ll refer back to this.

7

Indeed, read up on the pseudo-class. It is a crucial part of CSS. I am not a big fan of JS when CSS will suffice. CSS3 has pretty much made that clear. Why create a codespace where one already exists?

1 Like
8

Pre-CSS3 we had JavaScript driven transitions. Those are no longer needed. The authors who gave us scripts up to that point are forever in our debt. Dave Shea woke me up JavaScript driven transitions, and I have little doubt he had a big hand in CSS3 because of his imaginative outlook. We should not lean on script where CSS will do the job.

1 Like
9

:laughing: :laughing: whoa! looks like it was a big deal back then. I heard it was the same for Flexbox. Positioning elements was a tedious task back then. So I was told.

10

http://www.tenfingers.net/

Drill into the script that supports the transitioning effect when you hover over the banner elements. This was from that ere, when CSS3 didn’t exist and all we had was CSS Level 2.

1 Like
11

:open_mouth: i see something to do with mouse up, mouse down, mouse over, and mouse out. They all have individual scripts :grimacing:

12

We’re only concerned with the mouse on and mouse off events. Ignore the rest of the page; it’s way out of date.

See how the images slowly come into focus as we move the mouse around?

13

So I’m still a b it confusing about the “absolute” property in this “delay” case lessen. Why this set " absolute" not “relative”? How do we decide an element/a property when to use “absolute” and when to use “relative”?