Grow your CSS skills. Land your dream job.

!doctype is screwing with my animations!

  • # November 20, 2012 at 10:15 am

    I made a simple hover animation that works just fine chrome and safari, however firefox turned my animation into exactly the opposite if what it is supposed to do

    .portfolio-thumbnail:hover> span {
    -webkit-animation: marginslide;
    -webkit-animation-duration: .5s;
    -webkit-animation-timing-function: ease-out;
    animation: blacktored;
    animation-duration: .5s;
    animation-timing-function: ease-out;
    -moz-animation: marginslide;
    -moz-animation-duration: .5s;
    -moz-animation-timing-function: ease-out;
    -o-animation: marginslide;
    -o-animation-duration: .5s;
    -o-animation-timing-function: ease-out;
    margin-top: -250px;
    }

    @-webkit-keyframes marginslide {

    from {
    margin-top: -15px;
    }

    to {
    margin-top: -250px;

    }
    }
    @keyframes marginslide {

    from {
    margin: -15px;
    }

    to {
    margin: -250px;

    }
    }
    @-moz-keyframes marginslide {

    from {
    margin-top: -15px;
    }

    to {
    margin-top: -250px;

    }
    }
    @-o-keyframes marginslide {

    from {
    margin-top: -15px;
    }

    to {
    margin-top: -250px;

    }
    }

    dont pay attention to the lack of background. I had to quickly throw this online and the pictures would have taken a while.

    # November 20, 2012 at 10:17 am

    Here is a [link to the site](http://bit.ly/UetXrT “title”)

    # November 20, 2012 at 10:23 am

    This is gonna sound stupid but

    @keyframes marginslide {

    from {
    margin: -15px;
    }

    to {
    margin: -250px;

    }

    should be at the end o your keyframe definitions AND you don’t have an unprefixed animation declared.

    I don’t think that’s it but unprefixed should always come last.

    # November 20, 2012 at 10:36 am

    I think you have called the wrong animation:

    .portfolio-thumbnail:hover> span {

    -webkit-animation: marginslide;
    -webkit-animation-duration: .5s;
    -webkit-animation-timing-function: ease-out;
    animation: blacktored; < !


    This? —>
    animation-duration: .5s;
    animation-timing-function: ease-out;
    -moz-animation: blacktored; < !


    This? —>
    -moz-animation-duration: .5s;
    -moz-animation-timing-function: ease-out;
    -o-animation: marginslide;
    -o-animation-duration: .5s;
    -o-animation-timing-function: ease-out;
    margin-top: -250px;
    }

    # November 20, 2012 at 10:44 am

    That is odd… Anyway. Called the right animation this time and moved @keyframes below the others. @Paulie_D

    # November 20, 2012 at 1:14 pm

    Start by reordering your animations as per @Paulie_D ‘s suggestion and add <!DOCTYPE html> to the top of your page. I did that and it made the animations start to move upward, though its still not exactly what you want, its a step in the right direction. I would also consider combining the actions of blacktored and marginslide since it seems you want both to happen.

    Can I ask why you have some animations only for webkit on the page, and the one above for all?

    # November 20, 2012 at 1:18 pm

    Also, remove the double content-type meta tags. First you set it UTF-8, then you override it with ISO-8859-1

    EDIT: So, I made those changes to an offline version of that page you linked and now it stopped working in properly in Chrome, although both Firefox and Chrome act the same now. So I don’t know if that is a step forward or back.

    # November 20, 2012 at 1:59 pm

    @pmac627 The blacktored animation was because I couldn’t get the marginslide animation to work in moz. The only other transition i have for -webkit is one that is only possible in -webkit. (-webkit-filters.) It is my way of encouraging people to use chrome and safari.

    # November 20, 2012 at 2:53 pm

    I have singled the problem down to when < !DOCTYPE html> is declared, the animations stop working as they are supposed to in all browsers

    # November 20, 2012 at 2:59 pm

    I can’t think of a single reason this should be so.

    Declaring a doctype is just the first thing you do when creating any site..it’s just automatic for me to do so.

    >Also, remove the double content-type meta tags. First you set it UTF-8, then you override it with ISO-8859-1

    You’ll need to fix this too!

    # November 20, 2012 at 3:13 pm

    Try this as your base:
    http://codepen.io/Pmac627/full/xKfwb

    It works in Firefox, Chrome, Safari and Opera. The positioning of the elements differs by a few pixels, in each, but that is unrelated to the animation.

    # November 20, 2012 at 6:38 pm

    @pmac627 @Paulie_D okay so. Nothing was wrong with the animations. we established the problem lied with the inclusion of the doctype for some ridiculous reason. So for the sake of exhausting every option. I actually created a php variable to echo the doctype before my tag. it worked! sorta. So there is a distinct animation in mozilla now, however instead of moving upwards, it moves down.

    # November 21, 2012 at 1:18 am

    Since you have started a new thread for this issue, I’ll close this one.

Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘!doctype is screwing with my animations!’ is closed to new replies.

*May or may not contain any actual "CSS" or "Tricks".