How to correctly do this css3 animation? - css

I have to animate a skip lorry. Trying to make the skip to move on the lorry but it does not happening correctly in the way it is to be.
The live preview is here. If you'll check it out then you'll understand what I'm saying and trying to do.
I'm making changes in skew() and rotate() but it turns out to be a bad job.
index.html
<!DOCTYPE html>
<html>
<title>Animate Lorry</title>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
<img class="sc" src="img/chain puller.png"/>
</div>
<div>
<img class="animate" src="img/skip lorry.png"/>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>
style.css
body{
background-color: #000;
}
/*LORRY*/
.animate {
padding: 100px;
padding-left:400px;
width: 400px;
height: 180px;
position: relative;
/*-webkit-animation-name: lorry;
-webkit-animation-duration: 15s;
-webkit-animation-fill-mode: forwards;
animation-name: lorry;
animation-duration: 15s;
animation-fill-mode:forwards;*/
}
/* Chrome, Safari, Opera */
/*#-webkit-keyframes lorry {
0% {right:0px; top:0px;}
25% {right:500px; top:0px;}
50% {right:500px; top:0px;}
75% {right:500px; top:0px;}
100% {right:500px; top:0px;}
}
*/
/*#keyframes lorry {
0% {right:0px; top:0px;}
25% {right:500px; top:0px;}
50% {right:500px; top:0px;}
75% {right:500px; top:0px;}
100% {right:500px; top:0px;}
}*/
/*SKIPHIRE*/
.contain {
padding: 250px;
padding-left: 445px;
width: 300px;
height: 160px;
position: absolute;
-webkit-animation-name: container;
-webkit-animation-duration: 5s;
-webkit-animation-delay: 2s;
-webkit-animation-fill-mode: forwards;
animation-name: container;
animation-duration: 5s;
animation-delay:2s;
animation-fill-mode:forwards;
}
#-webkit-keyframes container {
0% {left:0px; bottom:0px;}
25% {left:200px; bottom:0px;}
50% {left:200px; bottom:200px;}
75% {left:0px; bottom:200px;}
100% {left:0px; bottom:150px;}
}
#keyframes container {
0% {left:0px; bottom:0px;}
25% {left:200px; bottom:0px;}
50% {left:200px; bottom:200px;}
75% {left:0px; bottom:200px;}
100% {left:0px; bottom:200px;}
}
.sc {
width: 400px;
height: 300px;
padding: 70px;
float: left;
padding-left: 603px;
position :absolute;
-webkit-animation-fill-mode: forwards;
-webkit-animation: cssAnimation 5s 1 ease;
-moz-animation: cssAnimation 5s 1 ease;
-o-animation: cssAnimation 5s 1 ease;
animation-fill-mode:forwards;
}
#-webkit-keyframes cssAnimation
{
from { -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(-15deg) scale(1) skew(-10deg) translate(-150px); }
}
#keyframes cssAnimation
{
from { -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(-10deg) scale(1) skew(1deg) translate(-150px); }
}
Tested in chrome only. But should be compatible for IE and Mozilla.


#-webkit-keyframes cssAnimation
{
from { -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(-15deg) scale(1) skew(-10deg) translate(-150px); }
from { -moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -moz-transform: rotate(-15deg) scale(1) skew(-10deg) translate(-150px); }
}
#keyframes cssAnimation
{
from { -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(-10deg) scale(1) skew(1deg) translate(-150px); }
from { -moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -moz-transform: rotate(-10deg) scale(1) skew(1deg) translate(-150px); }
}
Try this
-moz- = mozzila
-ms- = Internet explorer
http://www.w3schools.com/cssref/css3_browsersupport.asp
scroll at the bottom of the page
EDIT:
I actually misread your question thought you didnt manage to make it work on IE and mozzila

Related

Multiple CSS animation effects in parallel

To terrify the guys at Pixar (with my animation skills), I am attempting to get a walking effect to work using CSS ...
Unfortunately, I am unable to work two different animation effects in parallel, I want the steps to rotate at a variable rate to the walkRight transition.
Here is my current attempt:
CSS
.wrapper {
position: absolute;
width: 100px;
height: 100px;
right: 0;
animation-name: walkRight;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 10s;
}
.hulk {
-webkit-animation: steps 10s linear 0s;
}
#keyframes walkRight {
0% {
transform: translateX(-400px);
}
100% {
transform: translateX(0);
}
}
#-webkit-keyframes steps {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(20deg);
}
50% {
-webkit-transform: rotate(0deg);
}
75% {
-webkit-transform: rotate(-20deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
Here is an example JsFiddle

You could try to:
Use animation-iteration-count: 10 on hulk class and set is duration to 1s (as walkRight has 10s duration), this means the walk effect will be applied 10 times during the walk.
Prefix all properties using -webkit- to make sure browsers will render your animation properly, you could use autoprefixer (or similar) which does the job for you automatically.
.wrapper {
position: absolute;
width: 100px;
height: 100px;
right: 0;
-webkit-animation-name: walkRight;
animation-name: walkRight;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-duration: 10s;
animation-duration: 10s;
}
.hulk {
-webkit-animation: steps 1s linear 0s;
-webkit-animation-iteration-count: 10;
animation-iteration-count: 10;
}
#-webkit-keyframes walkRight {
0% {
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes walkRight {
0% {
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#-webkit-keyframes steps {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(20deg);
}
50% {
-webkit-transform: rotate(0deg);
}
75% {
-webkit-transform: rotate(-20deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
<div class="wrapper">
<img class="hulk" width="100px" src="http://vignette3.wikia.nocookie.net/heroup/images/4/4b/Thing_full_body.png/revision/latest?cb=20120117152657">
</div>

You can use animation-iteration-count on steps animation and set shorter duration. You just need to match ending time for both walk and steps that will repeat itself n number of times, so in this case its about 9 if duration is 1s.
.wrapper {
position: absolute;
width: 100px;
height: 100px;
right: 0;
animation-name: walkRight;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 10s;
}
.hulk {
-webkit-animation: steps 1s linear 0s;
animation-iteration-count: 9;
}
#keyframes walkRight {
0% {
transform: translateX(-400px);
}
100% {
transform: translateX(0);
}
}
#-webkit-keyframes steps {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(20deg);
}
50% {
-webkit-transform: rotate(0deg);
}
75% {
-webkit-transform: rotate(-20deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
<div class="wrapper">
<img class="hulk" width="100px" src="http://vignette3.wikia.nocookie.net/heroup/images/4/4b/Thing_full_body.png/revision/latest?cb=20120117152657">
</div>

CSS transform origin not centered correctly

I have the following snippet of CSS:
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
#-moz-keyframes spin {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(360deg);}
}
#-o-keyframes spin {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}
#-ms-keyframes spin {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}
#-keyframes spin {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
}
header .spinner {
position: absolute;
width: 100%;
text-align: center;
margin: 0 auto;
left: 0;
-webkit-animation:spin 1s ease-out .5s;
-moz-animation:spin 1s ease-out .5s;
animation:spin 1s ease-out .5s;
transform-origin: 50%;
}
the animation runs fine, however the origin is slightly wrong making it look like the img is jumping when rotating.

Adding Two Animation to one Object [To an image]

I want two animations to be given to an image one is bounce on page load and the second one is it should start swinging once it is bounced.
I have achieved this for two different images but, when I am clubbing these two into one only one animation is working. The other animation effect is getting overwritten.
I have created a JSfiddle for swinging and bounce.
ul { list-style-type:none;}
#-webkit-keyframes swinging {
0% {
-webkit-transform: rotate(10deg);
}
50% {
-webkit-transform: rotate(-5deg)
}
100% {
-webkit-transform: rotate(10deg);
}
}
#keyframes swinging {
0% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
50% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg)
}
100% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
}
.swingimage {
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: swinging 3.5s ease-in-out forwards infinite;
animation: swinging 3.5s ease-in-out forwards infinite;
}
<ul class="nav navbar-nav pull-right">
<li class="">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f5/Loxoceles_reclusa_iconized_thread.png" class="swingimage" width="200" height="200" >
</li>
</ul>
Any help would be greatly appreciated. Thanks

you CAN NOT add 2 different animations to the same object.so..
use the first animation ( dropHeader ) on the li and the second ( swinging ) on the img
see jsfiddle > jsFiddle
or snippet below
add animation-delay on the second one ( swinging ) equal or bigger to the duration of the first one ( dropHeader ) if you want it to start after the first one has finished
in your case animation-delay:0.5s or bigger
ul { list-style-type:none;}
#-webkit-keyframes swinging {
0% {
-webkit-transform: rotate(10deg);
}
50% {
-webkit-transform: rotate(-5deg)
}
100% {
-webkit-transform: rotate(10deg);
}
}
#keyframes swinging {
0% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
50% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg)
}
100% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
}
.swingimage {
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: swinging 3.5s ease-in-out forwards infinite;
animation: swinging 3.5s ease-in-out forwards infinite;
animation-delay:0.5s;
}
.bounce-effect {
-moz-animation-name: dropHeader;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in-out;
-moz-animation-duration: 0.5s;
-webkit-animation-name: dropHeader;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 0.5s;
animation-name: dropHeader;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.5s;
}
#-moz-keyframes dropHeader {
0% {
-moz-transform: translateY(-40px);
}
100% {
-moz-transform: translateY(0);
}
}
#-webkit-keyframes dropHeader {
0% {
-webkit-transform: translateY(-40px);
}
100% {
-webkit-transform: translateY(0);
}
}
#keyframes dropHeader {
0% {
transform: translateY(-40px);
}
100% {
transform: translateY(0);
}
}
<ul class="nav navbar-nav pull-right">
<li class="bounce-effect ">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f5/Loxoceles_reclusa_iconized_thread.png" class="swingimage" width="200" height="200" >
</li>
</ul>

CSS rotate animation

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>

Translate not working on Firefox, please, does anyone know why?

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

Resources