CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Elsa Amri
Elsa Amri

Reputation: 71

How to fade in an effect on my CSS element?

here's my CSS. First question, I want the effects that occur when the div is hovered above to fade in and out, rather than it being instant. I tried to use transitions, but it seems to mess with the design of the element, so I'm stuck.

My 2nd question is (here's the jfiddle for reference: https://jsfiddle.net/ojvym9cm/2/), is it possible to only allow the hover effect to occur after the 'do' keyanimation has occured? I don't want the hover effect to take place while the div is animating.

My 3rd question is, why is the animation happening immediately instead of only after I've clicked the 'half' div? (jfiddle for reference). Sorry, these are lots of questions I've just spent so many hours trying to figure all this out and came up short.

#middle {
  width: 100px;
  height: 100px;
  top: 0;
  left: 50%;
  display: block;
  position: fixed;
  border-radius: 150px;
  background: powderblue;
  animation: do 4s 1 ease;
  -webkit-animation-fill-mode: forwards;
}

#middle:hover {
  width: 96px;
  height: 48px;
  left: 50%;
  top: 30%;
  position: fixed;
  border-color: powderblue;
  border-style: solid;
  border-width: 2px 2px 50px 2px;
  border-radius: 100%;
  z-index: 1000;
  background: white;
}

#middle:hover:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  background: white;
  border: 18px solid powderblue;
  border-radius: 100%;
  width: 12px;
  height: 12px;
}

#middle:hover:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: powderblue;
  border: 18px solid white;
  border-radius: 100%;
  width: 12px;
  height: 12px;
}

Upvotes: 0

Views: 59

Answers (2)

Dexter0015
Dexter0015

Reputation: 1039

You can achive the animation with CSS, BUT, to trigger it the way you want it, you will need jQuery.

Here is an example: https://jsfiddle.net/557g66ry/

And some explainations: I configure the animation slideDown to affect 2 parameters:

  • item top position (same as you did)

  • item opacity (to have the fade animation) [that answer your question 1]

    @keyframes slideDown { from { opacity: 0; top: 0; } to { opacity: 1; top: 30%; } }

AND for the initial state of the #middle item (without .down class), I had : 

opacity: 0;

For ensure that by default, the item isn't visible.

When I decided to activate the animation only when hte #middle item has the class .down. That's allow me to trigger it when I click on the #half item (using jQuery) [that answer your question 2] :

#middle.down {
  animation: slideDown 4s 1 ease;
 -webkit-animation-fill-mode: forwards;
 }

Finally, I used the same trick to delay the hover effect after the end of the animation.

As we know the duration of the animation (4s), I activate the hover CSS only when the #middle item has the class .arrived.

Then with the help of JavaScript setTimeout function (and jQuery) I add the .arrived class to the item after 4s (4000 = milisecondes) [that answer your question 3]:

setTimeout(function() {
        $('#middle').addClass('arrived');
}, 
4000);

Upvotes: 1

Lewis Browne
Lewis Browne

Reputation: 932

To answer this question: First question, I want the effects that occur when the div is hovered above to fade in and out, rather than it being instant. I tried to use transitions, but it seems to mess with the design of the element, so I'm stuck.

To do this you will need: transition: opacity 300ms; On both the element rule and also the hover rule.

Im now looking at your other questions and will update the answer in the meantime.

Upvotes: 0

Related Questions