Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Fade text upon entering passage.

Hey!

I could really use some help with this. When entering a passage, I want some text to slowly fade until gone, and stay hidden.

I know this is a simple task but I can't for the life of me find a simple solution to it. Everything I find is either triggered by hovering the mouse over the text, and/or the text returns. I'm on SugarCube 2.

I thought this in the stylesheet would work, but it just hides the text immediately from the start.
.fade {
opacity: 0;
transition: 5s all ease;
}

Comments

  • edited May 16
    You're better off using animations not transitions. All this goes in CSS.
    .fade {
    -webkit-animation: fadeOut 5s 1 forwards;
    animation: fadeOut 5s 1 forwards;
    }
    
    @-webkit-keyframes fadeOut {
    
      0% {
    
    	opacity: 1;
    
      }
      100% {
    
    	opacity: 0;
    
    	visibility: hidden;
    
      }
    }
    
    @keyframes fadeOut {
    
      0% {
    
    	opacity: 1;
    
      }
      100% {
    
    	opacity: 0;
    
    	visibility: hidden;
    
      }
    }
    
  • Hey Claretta, thanks! I'm not sure I understand what's happening there, but it works! :)
  • edited May 17
    Animations are really just a more finely controlled transition where you tell the browser exactly what to do rather than have it interpret a transition value. Or rather, a transition is a simplified animation.

    The keyframes define the animation progress from 0% to 100%. It starts off at 1 opacity at 0% and then goes to 0 and is hidden at 100%, so a fadeout.

    The two types of animation are one for webkit browsers (chrome etc) and the rest.

    fadeOut is the name I gave to the keyframes, that just tells the animation to refer to that one. 5s is the time. 1 tells it to only perform the animation once. Forwards tells it to hold the animation at the end state rather than revert to the beginning.

  • Ahh, I understand now, thanks a lot!
Sign In or Register to comment.