- This topic is empty.
-
AuthorPosts
-
November 20, 2012 at 10:15 am #40891matt_sanfordParticipant
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 #114908matt_sanfordParticipantHere is a [link to the site](http://bit.ly/UetXrT “title”)
November 20, 2012 at 10:23 am #114911Paulie_DMemberThis 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 #114913Paulie_DMemberI 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 #114915matt_sanfordParticipantThat is odd… Anyway. Called the right animation this time and moved @keyframes below the others. @Paulie_D
November 20, 2012 at 1:14 pm #114939pmac627ParticipantStart 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 #114940pmac627ParticipantAlso, 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 #114944matt_sanfordParticipant@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 #114948matt_sanfordParticipantI have singled the problem down to when is declared, the animations stop working as they are supposed to in all browsers
November 20, 2012 at 2:59 pm #114950Paulie_DMemberI 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 #114953pmac627ParticipantTry this as your base:
http://codepen.io/Pmac627/full/xKfwbIt 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 #114979matt_sanfordParticipant@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 #114989Paulie_DMemberSince you have started a new thread for this issue, I’ll close this one.
-
AuthorPosts
- The topic ‘!doctype is screwing with my animations!’ is closed to new replies.