I have a little problem. I want that the following animation gets fired when the user visits the page AND when he hovers over the element (it's an image). Right now it just fires when visiting the page, but .animated:hover gets ignored? Any advice?
.animated, .animated:hover {
-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: swing 4s;
-moz-animation: swing 4s;
-ms-animation: swing 4s;
-o-animation: swing 4s;
animation: swing 4s;
}
#-webkit-keyframes swing {
0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% { -webkit-transform-origin: bottom center; }
0% { -webkit-transform: rotate(0deg); }
10% { -webkit-transform: rotate(15deg); }
20% { -webkit-transform: rotate(-10deg); }
30% { -webkit-transform: rotate(10deg); }
40% { -webkit-transform: rotate(-8deg); }
50% { -webkit-transform: rotate(8deg); }
60% { -webkit-transform: rotate(-5deg); }
70% { -webkit-transform: rotate(5deg); }
80% { -webkit-transform: rotate(-2deg); }
90% { -webkit-transform: rotate(2deg); }
100% { -webkit-transform: rotate(0deg); }
}
#-moz-keyframes swing {
0% { -moz-transform: rotate(0deg); }
10% { -moz-transform: rotate(15deg); }
20% { -moz-transform: rotate(-10deg); }
30% { -moz-transform: rotate(10deg); }
40% { -moz-transform: rotate(-8deg); }
50% { -moz-transform: rotate(8deg); }
60% { -moz-transform: rotate(-5deg); }
70% { -moz-transform: rotate(5deg); }
80% { -moz-transform: rotate(-2deg); }
90% { -moz-transform: rotate(2deg); }
100% { -moz-transform: rotate(0deg); }
}
#-o-keyframes swing {
0% { -o-transform: rotate(0deg); }
10% { -o-transform: rotate(15deg); }
20% { -o-transform: rotate(-10deg); }
30% { -o-transform: rotate(10deg); }
40% { -o-transform: rotate(-8deg); }
50% { -o-transform: rotate(8deg); }
60% { -o-transform: rotate(-5deg); }
70% { -o-transform: rotate(5deg); }
80% { -o-transform: rotate(-2deg); }
90% { -o-transform: rotate(2deg); }
100% { -o-transform: rotate(0deg); }
}
#keyframes swing {
0% { transform: rotate(0deg); }
10% { transform: rotate(15deg); }
20% { transform: rotate(-10deg); }
30% { transform: rotate(10deg); }
40% { transform: rotate(-8deg); }
50% { transform: rotate(8deg); }
60% { transform: rotate(-5deg); }
70% { transform: rotate(5deg); }
80% { transform: rotate(-2deg); }
90% { transform: rotate(2deg); }
100% { transform: rotate(0deg); }
}
.swing {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-animation-name: swing;
-moz-animation-name: swing;
-o-animation-name: swing;
animation-name: swing;
}
Nice animation, the hover is being cancelled out as its looking for change in the original CSS class, you can fix this by declaring the hover its on animation function.
/*PAGE LOAD 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: swing 4s;
-moz-animation: swing 4s;
-ms-animation: swing 4s;
-o-animation: swing 4s;
animation: swing 4s;
}
#-webkit-keyframes swing {
0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% { -webkit-transform-origin: bottom center; }
0% { -webkit-transform: rotate(0deg); }
10% { -webkit-transform: rotate(15deg); }
20% { -webkit-transform: rotate(-10deg); }
30% { -webkit-transform: rotate(10deg); }
40% { -webkit-transform: rotate(-8deg); }
50% { -webkit-transform: rotate(8deg); }
60% { -webkit-transform: rotate(-5deg); }
70% { -webkit-transform: rotate(5deg); }
80% { -webkit-transform: rotate(-2deg); }
90% { -webkit-transform: rotate(2deg); }
100% { -webkit-transform: rotate(0deg); }
}
#-moz-keyframes swing {
0% { -moz-transform: rotate(0deg); }
10% { -moz-transform: rotate(15deg); }
20% { -moz-transform: rotate(-10deg); }
30% { -moz-transform: rotate(10deg); }
40% { -moz-transform: rotate(-8deg); }
50% { -moz-transform: rotate(8deg); }
60% { -moz-transform: rotate(-5deg); }
70% { -moz-transform: rotate(5deg); }
80% { -moz-transform: rotate(-2deg); }
90% { -moz-transform: rotate(2deg); }
100% { -moz-transform: rotate(0deg); }
}
#-o-keyframes swing {
0% { -o-transform: rotate(0deg); }
10% { -o-transform: rotate(15deg); }
20% { -o-transform: rotate(-10deg); }
30% { -o-transform: rotate(10deg); }
40% { -o-transform: rotate(-8deg); }
50% { -o-transform: rotate(8deg); }
60% { -o-transform: rotate(-5deg); }
70% { -o-transform: rotate(5deg); }
80% { -o-transform: rotate(-2deg); }
90% { -o-transform: rotate(2deg); }
100% { -o-transform: rotate(0deg); }
}
#keyframes swing {
0% { transform: rotate(0deg); }
10% { transform: rotate(15deg); }
20% { transform: rotate(-10deg); }
30% { transform: rotate(10deg); }
40% { transform: rotate(-8deg); }
50% { transform: rotate(8deg); }
60% { transform: rotate(-5deg); }
70% { transform: rotate(5deg); }
80% { transform: rotate(-2deg); }
90% { transform: rotate(2deg); }
100% { transform: rotate(0deg); }
}
.swing {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-animation-name: swing;
-moz-animation-name: swing;
-o-animation-name: swing;
animation-name: swing;
}
/*HOVER ANIMIATION*/
.animated:hover{
-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: swingHover 4s;
-moz-animation: swingHover 4s;
-ms-animation: swingHover 4s;
-o-animation: swingHover 4s;
animation: swingHover 4s;
}
#-webkit-keyframes swingHover {
0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% { -webkit-transform-origin: bottom center; }
0% { -webkit-transform: rotate(0deg); }
10% { -webkit-transform: rotate(15deg); }
20% { -webkit-transform: rotate(-10deg); }
30% { -webkit-transform: rotate(10deg); }
40% { -webkit-transform: rotate(-8deg); }
50% { -webkit-transform: rotate(8deg); }
60% { -webkit-transform: rotate(-5deg); }
70% { -webkit-transform: rotate(5deg); }
80% { -webkit-transform: rotate(-2deg); }
90% { -webkit-transform: rotate(2deg); }
100% { -webkit-transform: rotate(0deg); }
}
#-moz-keyframes swingHover {
0% { -moz-transform: rotate(0deg); }
10% { -moz-transform: rotate(15deg); }
20% { -moz-transform: rotate(-10deg); }
30% { -moz-transform: rotate(10deg); }
40% { -moz-transform: rotate(-8deg); }
50% { -moz-transform: rotate(8deg); }
60% { -moz-transform: rotate(-5deg); }
70% { -moz-transform: rotate(5deg); }
80% { -moz-transform: rotate(-2deg); }
90% { -moz-transform: rotate(2deg); }
100% { -moz-transform: rotate(0deg); }
}
#-o-keyframes swingHover {
0% { -o-transform: rotate(0deg); }
10% { -o-transform: rotate(15deg); }
20% { -o-transform: rotate(-10deg); }
30% { -o-transform: rotate(10deg); }
40% { -o-transform: rotate(-8deg); }
50% { -o-transform: rotate(8deg); }
60% { -o-transform: rotate(-5deg); }
70% { -o-transform: rotate(5deg); }
80% { -o-transform: rotate(-2deg); }
90% { -o-transform: rotate(2deg); }
100% { -o-transform: rotate(0deg); }
}
#keyframes swingHover {
0% { transform: rotate(0deg); }
10% { transform: rotate(15deg); }
20% { transform: rotate(-10deg); }
30% { transform: rotate(10deg); }
40% { transform: rotate(-8deg); }
50% { transform: rotate(8deg); }
60% { transform: rotate(-5deg); }
70% { transform: rotate(5deg); }
80% { transform: rotate(-2deg); }
90% { transform: rotate(2deg); }
100% { transform: rotate(0deg); }
}
.swingHover {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-animation-name: swingHover;
-moz-animation-name: swingHover;
-o-animation-name: swingHover;
animation-name: swingHover;
}
Related
I need an arrow to slightly move (bounce) to the bottom right corner on hover, using CSS. I've used the code below and I like what it does however this only moves the arrow left/right. How do I amend it so that it moves slightly to the bottom as well? I've tried using 'translateY' but couldn't workout the exact pixel amount for the animation to be smooth.
I've tried using 'bounce' but actually 'swing' seems to look better.
What I'm looking for is the kind on animation of this page:
http://ianlunn.github.io/Hover/ (called 'Wobble to Bottom Right')
.arrow:hover{
-webkit-animation: swing 1s ease;
animation: swing 1s ease;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
#-webkit-keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
You have to use translate(x,y) instead of translateX(x) for 2d transformation as #fen1x mentioned in the comment above
Try this:
#keyframes hvr-wobble-to-bottom-right {
16.65% {
-webkit-transform: translate(8px, 8px);
transform: translate(8px, 8px);
}
33.3% {
-webkit-transform: translate(-6px, -6px);
transform: translate(-6px, -6px);
}
49.95% {
-webkit-transform: translate(4px, 4px);
transform: translate(4px, 4px);
}
66.6% {
-webkit-transform: translate(-2px, -2px);
transform: translate(-2px, -2px);
}
83.25% {
-webkit-transform: translate(1px, 1px);
transform: translate(1px, 1px);
}
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
I've read other answers for the same question in stackoverflow, but I couldn't solve it with them.
My code doesn't work in mozilla, can anyone help me?
Besides that, Can anyone tell me the correct way to use #keyframes. I mean, is it correct to use #-webkit-keyframes, #-moz-keyframes and #keyframes, or with only one it should be fine?
Thanks
header .resaltar {
color: #F3D85E;
font-weight: bold;
}
header .resaltar:hover {
-webkit-animation: shake 0.8s linear infinite;
-moz-animation: shake 0.8s linear infinite;
-ms-animation: shake 0.8s linear infinite;
animation: shake 0.8s linear infinite;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
/** Chrome, Safari, Opera **/
#-webkit-keyframes shake {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
#-moz-keyframes shake {
0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
#keyframes shake {
0% { transform: translate(2px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(0px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(2px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(2px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
the problem you are having is animation to a span element.
i noticed that if u apply this animation to the parent element (the header) it works fine.
I think your problem is that the display of the span is inline
Once i changed the display to inline-block, it worked fine with me
header .resaltar {
color: #F3D85E;
font-weight: bold;
display: inline-block;
}
I'm trying to get this animation to hold it's final state/last frame using css.
animation-fill-mode: forwards; is not working. Is there anyway I can get it to stop returning to beginning position?
jsFiddle with broken animation
.rotate{
animation: animationFrames ease 4s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards; /*when the spec is finished*/
-webkit-animation: animationFrames ease 4s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards/*Chrome 16+, Safari 4+*/
}
#keyframes animationFrames{
0% {
transform: translate(0px,0px) rotate(0deg) ;
}
100% {
transform: translate(0px,-10px) rotate(-45deg) ;
}
}
#-moz-keyframes animationFrames{
0% {
-moz-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-moz-transform: translate(0px,-10px) rotate(-45deg) ;
}
}
#-webkit-keyframes animationFrames {
0% {
-webkit-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-webkit-transform: translate(0px,-10px) rotate(-45deg) ;
}
}
#-o-keyframes animationFrames {
0% {
-o-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-o-transform: translate(0px,-10px) rotate(-45deg) ;
}
}
#-ms-keyframes animationFrames {
0% {
-ms-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-ms-transform: translate(0px,-10px) rotate(-45deg) ;
}
}
<body>
<div> <span class="rotate">G</span>
</div>
</body>
It looks like you may have had some syntax issues, the syntax for the animation shorthand property is:
name | duration | timing-function | delay | iteration-count |
direction | fill-mode | play-state
.rotate {
animation: animationFrames 4s ease 0s 1 normal forwards running;
transform-origin: 50% 50%;
position: absolute;
}
#keyframes animationFrames {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
100% {
transform: translate(0px, -10px) rotate(-45deg);
}
}
<body>
<div> <span class="rotate">G</span>
</div>
</body>
Note that this will work in modern versions of Firefox and Chrome without the browser prefixes.
Method 1:
Use animation-direction: alternate; to reverse the animation.
Fiddle: http://jsfiddle.net/jgvkjzqb/5/
.rotate{
animation: animationFrames ease 4s;
animation-iteration-count: 2;
transform-origin: 50% 50%;
animation-fill-mode:forwards; /*when the spec is finished*/
-webkit-animation: animationFrames ease 4s;
-webkit-animation-iteration-count: 2;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards/*Chrome 16+, Safari 4+*/
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
#keyframes animationFrames{
0% {
transform: translate(0px,0px) rotate(0deg) ;
}
100% {
transform: translate(0px,-10px) rotate(-45deg) ;
}
}
#-moz-keyframes animationFrames{
0% {
-moz-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-moz-transform: translate(0px,-10px) rotate(-45deg) ;
}
}
#-webkit-keyframes animationFrames {
0% {
-webkit-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-webkit-transform: translate(0px,-10px) rotate(-45deg) ;
}
}
#-o-keyframes animationFrames {
0% {
-o-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-o-transform: translate(0px,-10px) rotate(-45deg) ;
}
}
#-ms-keyframes animationFrames {
0% {
-ms-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-ms-transform: translate(0px,-10px) rotate(-45deg) ;
}
}
<body>
<div> <span class="rotate">G</span>
</div>
</body>
Method 2:
Try doing the rotate(-45deg) transition at 50% and rotate(0deg) at 100%.
Fiddle: http://jsfiddle.net/jgvkjzqb/2/
.rotate {
animation: animationFrames ease 8s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards;
/*when the spec is finished*/
-webkit-animation: animationFrames ease 8s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards
/*Chrome 16+, Safari 4+*/
}
#keyframes animationFrames {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
50% {
transform: translate(0px, -10px) rotate(-45deg);
}
100% {
transform: translate(0px, 0px) rotate(0deg);
}
}
#-moz-keyframes animationFrames {
0% {
-moz-transform: translate(0px, 0px) rotate(0deg);
}
50% {
-moz-transform: translate(0px, -10px) rotate(-45deg);
}
100% {
-moz-transform: translate(0px, 0px) rotate(0deg);
}
}
#-webkit-keyframes animationFrames {
0% {
-webkit-transform: translate(0px, 0px) rotate(0deg);
}
50% {
-webkit-transform: translate(0px, -10px) rotate(-45deg);
}
100% {
-webkit-transform: translate(0px, 0px) rotate(0deg);
}
}
#-o-keyframes animationFrames {
0% {
-o-transform: translate(0px, 0px) rotate(0deg);
}
50% {
-o-transform: translate(0px, -10px) rotate(-45deg);
}
100% {
-o-transform: translate(0px, 0px) rotate(0deg);
}
}
#-ms-keyframes animationFrames {
0% {
-ms-transform: translate(0px, 0px) rotate(0deg);
}
50% {
-ms-transform: translate(0px, -10px) rotate(-45deg);
}
100% {
-ms-transform: translate(0px, 0px) rotate(0deg);
}
}
<body>
<div> <span class="rotate">G</span>
</div>
</body>
I'm been trying to make an animation work cross platform and I recently gave up on ie, but i can't understand why none of the instances where i use translate work in firefox, can anyone show me if I'm doing something wrong please? Forever gratefull.
Here's my code up to know:
span.glow-left{position: absolute; bottom: 50px; left: -10px; display: block; width:40px; height: 80px; background: url(../img/glow-left.png) no-repeat;
-webkit-animation:glowleft 2s linear infinite;
-moz-animation:glowleft 2s linear infinite;
animation:glowleft 2s linear infinite;
-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
animation-delay: 1s;
-webkit-animation-name: glowleft;
animation-name: glowleft;}
#keyframes glowleft {
1%{ -moz-transform: translatey(-20px);opacity:0.5;}
2%{ -moz-transform: translatey(-20px);opacity:1;}
13% { -moz-transform: translatey(-150px); opacity: 1 }
40% { -moz-transform: translatey(-340px); opacity:0.5;}
50% { -moz-transform: translatey(-340px); opacity:0;}
100% { -moz-transform: translatey(-340px); opacity: 0; }
}
#-webkit-keyframes glowleft {
1%{ -webkit-transform: translatey(-20px);opacity:0.5;}
2%{ -webkit-transform: translatey(-20px);opacity:1;}
13% { -webkit-transform: translatey(-150px); opacity: 1 }
40% { -webkit-transform: translatey(-340px); opacity:0.5;}
50% { -webkit-transform: translatey(-340px); opacity:0;}
100% { -webkit-transform: translatey(-340px); opacity: 0; }
}
#keyframes glowleft {
1%{ -webkit-transform: translatey(-20px);opacity:0.5;}
2%{ -webkit-transform: translatey(-20px);opacity:1;}
13% { -webkit-transform: translatey(-150px); opacity: 1 }
40% { -webkit-transform: translatey(-340px); opacity:0.5;}
50% { -webkit-transform: translatey(-340px); opacity:0;}
100% { -webkit-transform: translatey(-340px); opacity: 0; }
}
I know it's a mess, but please help.
You messed up teh keyframes...and you are missing the "#-moz-keyframes glowleft" section:
try this:
#-moz-keyframes glowleft {
1%{ -moz-transform: translatey(-20px);opacity:0.5;}
2%{ -moz-transform: translatey(-20px);opacity:1;}
13% { -moz-transform: translatey(-150px); opacity: 1 }
40% { -moz-transform: translatey(-340px); opacity:0.5;}
50% { -moz-transform: translatey(-340px); opacity:0;}
100% { -moz-transform: translatey(-340px); opacity: 0; }
}
#-webkit-keyframes glowleft {
1%{ -webkit-transform: translatey(-20px);opacity:0.5;}
2%{ -webkit-transform: translatey(-20px);opacity:1;}
13% { -webkit-transform: translatey(-150px); opacity: 1 }
40% { -webkit-transform: translatey(-340px); opacity:0.5;}
50% { -webkit-transform: translatey(-340px); opacity:0;}
100% { -webkit-transform: translatey(-340px); opacity: 0; }
}
#keyframes glowleft {
1%{ transform: translatey(-20px);opacity:0.5;}
2%{ transform: translatey(-20px);opacity:1;}
13% { transform: translatey(-150px); opacity: 1 }
40% { transform: translatey(-340px); opacity:0.5;}
50% { transform: translatey(-340px); opacity:0;}
100% { transform: translatey(-340px); opacity: 0; }
}
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;
...
}