Today i noticed on one of my websites, the footer css was gone. I tried to load the page on mozilla and explorer and it showed up fine. I did not change anything on the css since last month. It just randomly dissapeared on chrome or it doesn't show up anymore.
you can see it for yourself at: http://www.d-dayinfo.org/
I use php so my footer is one single file wich is displayed (included) on all the other pages.
Anyone who have had the same experience with google chrome and would like to help me out?
Really don't know what to do
There is problem on line number 1812 of styles.css
#-webkit-keyframes smallToBig { from-webkit-transform: scale(0.1); }
to { -webkit-transform: scale(1); }
{ }
#-moz-keyframes smallToBig { from-moz-transform: scale(0.1); }
to { -moz-transform: scale(1); }
{ }
#-ms-keyframes smallToBig { from-ms-transform: scale(0.1); }
to { -ms-transform: scale(1); }
{ }
#-webkit-keyframes moveFromBottom { from-webkit-transform: translateY(100%); }
to { -webkit-transform: translateY(0%); }
{ }
#-moz-keyframes moveFromBottom { from-moz-transform: translateY(100%); }
to { -moz-transform: translateY(0%); }
{ }
#-ms-keyframes moveFromBottom { from-ms-transform: translateY(100%); }
to { -ms-transform: translateY(0%); }
{ }
something is wrong here please make this correct its conflict CHROME with CSS chrome
IS should like
#-webkit-keyframes smallToBig {
from{-webkit-transform: scale(0.1); }
to { -webkit-transform: scale(1); }
}
#-moz-keyframes smallToBig {
from{ -moz-transform: scale(0.1); }
to { -moz-transform: scale(1); }
}
#-ms-keyframes smallToBig {
from{ -ms-transform: scale(0.1); }
to { -ms-transform: scale(1); }
}
#-webkit-keyframes moveFromBottom {
from{ -webkit-transform: translateY(100%); }
to { -webkit-transform: translateY(0%); }
}
#-moz-keyframes moveFromBottom {
from{ -moz-transform: translateY(100%); }
to { -moz-transform: translateY(0%); }
}
#-ms-keyframes moveFromBottom {
from{ -ms-transform: translateY(100%); }
to { -ms-transform: translateY(0%); }
}
Related
I'm trying to separate my animations from my main css. All of my partials are imported in one main styles.scss. When I have my animations at the bottom of my _footer.scss file, where the file that the animation is being called, then Compass will compile my sass. However, when I pull the animation out and put it into a partial (_animations.scss) and import it, then it gives me this error:
error sass/styles.scss (Line 3 of sass/base/_animations.sass: Invalid CSS after "0% ": expected selector, was "{ transform: sc...")
The Animation CSS:
footer#site-footer .signup-form input[type="image"]:active {
outline:none;
border:2px solid $pink;
display: inline-block;
-webkit-animation: shrink-n-grow 0.4s;
-moz-animation: shrink-n-grow 0.4s;
-ms-animation: shrink-n-grow 0.4s;
-o-animation: shrink-n-grow 0.4s;
animation: shrink-n-grow 0.4s;
}
#keyframes shrink-n-grow {
0% { transform: scale(1.0); }
60% { transform: scale(0.85); }
100% { transform: scale(1.0); }
}
#-webkit-keyframes shrink-n-grow {
0% { -webkit-transform: scale(1.0); }
60% { -webkit-transform: scale(0.85); }
100% { -webkit-transform: scale(1.0); }
}
#-moz-keyframes shrink-n-grow {
0% { -moz-transform: scale(1.0); }
60% { -moz-transform: scale(0.85); }
100% { -moz-transform: scale(1.0); }
}
#-o-keyframes shrink-n-grow {
0% { -o-transform: scale(1.0); }
60% { -o-transform: scale(0.85); }
100% { -o-transform: scale(1.0); }
}
#-ms-keyframes shrink-n-grow {
0% { -ms-transform: scale(1.0); }
60% { -ms-transform: scale(0.85); }
100% { -ms-transform: scale(1.0); }
}
I've tried importing it before and after my _footer.scss partial. Makes no sense to me that it'd give an error when separated but no error when in the same file because isn't it all compiling into the same file anyways? Can you not separate out animations with sass/compass? Do you have to use a mixin or something? Thanks!
I have this animation that makes a h1 and p "fly in":
#-moz-keyframes titledrop {
0% {
-moz-transform: translateY(-80px);
}
100% {
-moz-transform: translateY(0);
}
}
#-webkit-keyframes titledrop {
0% {
-webkit-transform: translateY(-80px);
}
100% {
-webkit-transform: translateY(0);
}
}
#keyframes titledrop {
0% {
transform: translateY(-80px);
}
100% {
transform: translateY(0);
}
}
#-moz-keyframes drop2 {
0% {
-moz-transform: translateY(-80px);
}
100% {
-moz-transform: translateY(0);
}
}
#-webkit-keyframes drop2 {
0% {
-webkit-transform: translateY(-80px);
}
100% {
-webkit-transform: translateY(0);
}
}
#keyframes drop2 {
0% {
transform: translateY(-80px);
}
100% {
transform: translateY(0);
}
}
But sometimes the animation starts before the element is visible, so it looks like nothing happened. How can I delay a css animation until the element is visible?
I have the following code for a 'bouncy' page transition, but every time it's not commented out, the entire CSS breaks. It didn't do this before I changed some of the keyframes, but now I broke it lol :(
Any help?
body {
-webkit-animation-name: scalein;
-webkit-animation-duration: 750ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-moz-animation-name: scalein;
-moz-animation-duration: 750ms;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: linear;
animation-name: scalein;
animation-duration: 750ms;
animation-iteration-count: 1;
animation-timing-function: linear;
}
#keyframes scalein {
1% {
transform: scale(0.1);
}
39% {
transform: scale(1.3);
}
50% {
transform: scale(0.5);
}
75% {
transform: scale(1.1);
}
85% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes scalein {
1% {
-webkit-transform: scale(0.1);
}
39% {
-webkit-transform: scale(1.3);
}
50% {
-webkit-transform: scale(0.5);
}
75% {
-webkit-transform: scale(1.1);
}
85% {
-webkit-transform: scale(0.9);
}
100% {
-webkit-transform: scale(1);
}
}
#-moz-keyframes scalein {
1% {
-moz-transform: scale(0.1);
}
39% {
-moz-transform: scale(1.3);
}
50% {
-moz-transform: scale(0.5);
}
75% {
-moz-transform: scale(1.1);
}
85% {
-moz-transform: scale(0.9);
}
100% {
-moz-transform: scale(1);
}
}
#-o-keyframes scalein {
1% {
-o-transform: scale(0.1);
}
39% {
-o-transform: scale(1.3);
}
50% {
-o-transform: scale(0.5);
}
75% {
-o-transform: scale(1.1);
}
85% {
-o-transform: scale(0.9;
}
100% {
-o-transform: scale(1);
}
}
You have a syntax error, you forgot the closing parenthesis:
#-o-keyframes scalein {
...
-o-transform: scale(0.9;
...
}
I am trying to add a slide up from the bottom CSS3 Animation to the <main> element in this site, but the animation is not playing / taking place.
Any idea why?
Here is the link to the page where it is not happening: https://dl.dropboxusercontent.com/u/270523/help/animate/new.html
And here is the CSS for the animation:
.animated{
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
}
#-webkit-keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
}
}
#-moz-keyframes bounceInUp {
0% {
opacity: 0;
-moz-transform: translateY(2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px);
}
100% {
-moz-transform: translateY(0);
}
}
#-o-keyframes bounceInUp {
0% {
opacity: 0;
-o-transform: translateY(2000px);
}
60% {
opacity: 1;
-o-transform: translateY(-30px);
}
80% {
-o-transform: translateY(10px);
}
100% {
-o-transform: translateY(0);
}
}
#keyframes bounceInUp {
0% {
opacity: 0;
transform: translateY(2000px);
}
60% {
opacity: 1;
transform: translateY(-30px);
}
80% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
On your HTML code, you mistyped here:
<link rel="stylsheet" href="animate.css" type="text/css">
It's "stylesheet" !
I asked me a question. When I create animation with the -webkit- prefix (or an another prefixes), I need to write properties with this prefix only or I must add all of the prefixes.
e.g.
#-webkit-keyframes bounce {
0% {
-webkit-transform: scale(0);
}
100% {
-webkit-transform: scale(1);
}
}
or
#-webkit-keyframes bounce {
0% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
Since only WebKit browsers can apply #-webkit-keyframes rules, it doesn't make any sense whatsoever to include any other prefixes inside those rules.
You want to include other prefixes for the #keyframes rules, not the properties within them. The properties inside use matching prefixes where appropriate:
#-webkit-keyframes bounce {
0% { -webkit-transform: scale(0); }
100% { -webkit-transform: scale(1); }
}
#-moz-keyframes bounce {
0% { -moz-transform: scale(0); }
100% { -moz-transform: scale(1); }
}
#-o-keyframes bounce {
0% { -o-transform: scale(0); }
100% { -o-transform: scale(1); }
}
#keyframes bounce {
0% { transform: scale(0); }
100% { transform: scale(1); }
}
(There is no #-ms-keyframes, and it is not necessary to use -ms-transform in #keyframes.)