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

WordPress

cleo inacio
cleo inacio
169 Points
Posted by cleo inacio
cleo inacio
169 Points

Css animation not rendering correctly in wordpress

Iv added this code to my website, it works locally on chrome and safari, and works as wordpress theme in Chrome but the delays seem to be off when I use the theme in safari wordpress. Could anyone explain what I am doing wrong?

http://www.vegansofaus.com/tvm/

--- HTML----

 <div>
  <h2 class="sentence">
   <div class="slidingVertical">
     <span>Connect.</span>
     <span>Inspire.</span>
     <span>Support.</span>
     </div>
  </h2>
</div>

---CSS---

.slidingVertical{
    display: inline;
    text-indent: 8px;
}
.slidingVertical span{
    animation: topToBottom 12.5s linear infinite 0s;
    -ms-animation: topToBottom 12.5s linear infinite 0s;
    -webkit-animation: topToBottom 12.5s linear infinite 0s;
    color: #00abe9;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}
.slidingVertical span:nth-child(2){
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3){
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}

.slidingVertical span {
  padding-top: 8%;
  font-size: 55px;
    color: #8FD877;

}
@media screen and (max-width: 767px)
{
  .slidingVertical span {
    padding-left: 20%;
  }
}


/*topToBottom Animation*/
@-moz-keyframes topToBottom{
    0% { opacity: 0; }
    5% { opacity: 0; -moz-transform: translateY(-50px); }
    10% { opacity: 1; -moz-transform: translateY(0px); }
    25% { opacity: 1; -moz-transform: translateY(0px); }
    30% { opacity: 0; -moz-transform: translateY(50px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-webkit-keyframes topToBottom{
    0% { opacity: 0; }
    5% { opacity: 0; -webkit-transform: translateY(-50px); }
    10% { opacity: 1; -webkit-transform: translateY(0px); }
    25% { opacity: 1; -webkit-transform: translateY(0px); }
    30% { opacity: 0; -webkit-transform: translateY(50px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes topToBottom{
    0% { opacity: 0; }
    5% { opacity: 0; -ms-transform: translateY(-50px); }
    10% { opacity: 1; -ms-transform: translateY(0px); }
    25% { opacity: 1; -ms-transform: translateY(0px); }
    30% { opacity: 0; -ms-transform: translateY(50px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

1 Answer

Brodey Newman
Brodey Newman
10,962 Points
Brodey Newman
Brodey Newman
10,962 Points

Hey Cleo,

Is the translateY working at all in Safari?

I feel like i've run into a problem before where translateY was messing up in Safari.

cleo inacio
cleo inacio
169 Points
cleo inacio
cleo inacio
169 Points

Thanks :) Im not sure how to fix translateY , but I played around with the delays & it seems to have made the inconsistency unnoticeable on safari.