Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Abe Layee
Abe Layee
8,378 Points

Transform:translate(-50,-50%) and animation not working.

Hello everyone. How are we doing today? I have a little bug problem with the transform translate property and my animation. My goal here is to center the h1,h2 in the middle equally. By using transform:translate(-50%,-50%), I can't see my text in the middle or the screen or on the screen. Is there anything that I am doing wrong here? Here is my codepen and thank you. http://codepen.io/Layee/pen/qdRZoV

3 Answers

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

I don't know the precise answer to your question, but offer the following. Transform is experimental. You have to carefully code the correct prefixes for it to work, then it might be unusual. https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Second, I don't recall ever seeing negative %. MDN doesn't address the validity of negative %, but I would test it on other things that take % values.

Abe Layee
Abe Layee
8,378 Points

I added the prefix still is not working.

<body> 

       <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
     <div class="bk-img">
          <div id="fade-in">
            <h1 class="faded">Abe Layee</h1>
             <h2>Junior Front End Developer</h2>
          </div>

#fade-in h1,h2 {
    color:#fff;
    margin:0;
    -webkit-transform:translate(-50%,-50%);
        -ms-transform:translate(-50%,-50%);
            transform:translate(-50%,-50%);
}

/*animation*/
@-webkit-keyframes fade-up {

       from {
           opacity:0;
           -webkit-transform:translateY(50px) scale(1.2);
           transform:translateY(50px) scale(1.2);
       }

      to {
         opacity:1;
         -webkit-transform:translateY(0) scale(1);
                 transform:translateY(0) scale(1);
      }
}
@keyframes fade-up {

       from {
           opacity:0;
           -webkit-transform:translateY(50px) scale(1.2);
           transform:translateY(50px) scale(1.2);
       }

      to {
         opacity:1;
         -webkit-transform:translateY(0) scale(1);
                 transform:translateY(0) scale(1);
      }
}

 #faded {
     -webkit-animation-name:fade-up;
             animation-name:fade-up;
     -webkit-animation-duration:1s;
             animation-duration:1s;
     -webkit-animation-fill-mode:forwards;
             animation-fill-mode:forwards;
     position: relative;
     font-weight:normal;
     opacity:0;
}
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Is transform supported by Codepen? Have you tried it in a normal browser?

As I understand the syntax, 0, 0 is the upper left hand side of the page. Positive on the x axis moves to the right, but positive on the y axis moves down. Percentages moving off the page has no meaning to me, but it may work. I tried changing to pixels and positive values in Codepen and it still didn't work.

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

I tried both codepen and Google chrome. This is frustrating me. I don't know why is not even working.

Charles Plante
Charles Plante
905 Points
Charles Plante
Charles Plante
905 Points

I know this post is a little old but has anyone found a solution to this? I just ran into this problem and I can't figure out a solution nor can I find anyplace except for here that mentions anything about it.