Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS !doctype is screwing with my animations!

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #40891
    matt_sanford
    Participant

    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.

    #114908
    matt_sanford
    Participant

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

    #114911
    Paulie_D
    Member

    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.

    #114913
    Paulie_D
    Member

    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;
    }

    #114915
    matt_sanford
    Participant

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

    #114939
    pmac627
    Participant

    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?

    #114940
    pmac627
    Participant

    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.

    #114944
    matt_sanford
    Participant

    @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.

    #114948
    matt_sanford
    Participant

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

    #114950
    Paulie_D
    Member

    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!

    #114953
    pmac627
    Participant

    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.

    #114979
    matt_sanford
    Participant

    @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.

    #114989
    Paulie_D
    Member

    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.