I'm trying to animate a tractor moving across the screen. I've got it working perfectly on my screen, however I want it to work across different platforms (only included -webkit-). When I re-size, the tractor is fluid, but the wheels aren't. How can I make them adjust together?
<body>
<div class="container">
<div class="tractor">
<img src="img/tractor-700px.png" alt="tractor">
</div>
<div class="wheels">
<div class="b_wheel">
<img src="img/b_wheel.png">
</div>
<div class="f_wheel">
<img src="img/f_wheel.png">
</div>
</div>
</div>
Here's my main CSS:
.tractor {
width: 380px;
position: absolute;
top: 40%;
left: -5%;
}
.tractor img {
width: 100%;
}
.tractor::after {
content: "";
display: block;
width: 120px;
height: 120px;
background: url('img/steam.png') no-repeat;
background-size: 120px;
position: absolute;
top: -37%;
left: 56%;
opacity: 0;
}
.f_wheel {;
width: 125px;
position: absolute;
top: 66.5%;
left: 13%;
}
.f_wheel img {
width: 100%;
}
.b_wheel {
width: 190px;
position: absolute;
top: 58.8%;
left: -7%;
}
.b_wheel img {
width: 100%;
}
And CSS for the animation:
.tractor {
-webkit-animation: tractor-bounce 3s ease-in-out infinite,
tractor-go 10s ease-in-out forwards;
}
.tractor::after {
-webkit-animation: steam 4s 2s infinite;
}
.f_wheel,
.b_wheel {
-webkit-animation: wheel-spin 10s ease-in-out forwards;
}
.f_wheel {
-webkit-animation: front-wheel-go 10s ease-in-out forwards,
wheel-spin 10s ease-in-out forwards;
}
.b_wheel {
-webkit-animation: back-wheel-go 10s ease-in-out forwards,
wheel-spin 10s ease-in-out forwards;
}
/* Keyframes - WebKit only
------------------------------------------ */
#-webkit-keyframes tractor-bounce {
50% { -webkit-transform: rotate(-5deg) translateY(-3px); }
}
#-webkit-keyframes tractor-go {
100% { left: 70%; }
}
#-webkit-keyframes steam {
40% { opacity: .8; }
60% { opacity: 1; }
100% { -webkit-transform: translate(-15%, -35%) rotateZ(20deg); }
}
#-webkit-keyframes wheel-spin {
0% { -webkit-transform: translateX(0px) rotate(50deg); }
100% { -webkit-transform: translateX(0px) rotate(480deg); }
}
#-webkit-keyframes front-wheel-go {
100% { left: 88%; }
}
#-webkit-keyframes back-wheel-go {
100% { left: 68.5%; }
}
JSFiddle to show it in action: http://jsfiddle.net/0j5L92vh/1/
[PS - This is my first post here so many thanks in advance! Let me know if I need to include anything else.]
I found a solution to your problem.
I utilized the .container div you have provided to keep everything positioned relative
to your tractor image. You can see the changes in the css code that made will make
it work in non webkit browsers. It will not work on versions of Internet Explorer before number 9.
The changes I have made are only to your css.
jsfiddle: http://jsfiddle.net/larryjoelane/h324j6u6/113/
css:
.container{
width: 380px;
position: relative;
/*bind the animation and set its properties*/
-webkit-animation: tractor 10s linear 0s; /* Chrome, Safari, Opera */
animation: tractor 10s linear 0s;
}
/*bind the wheel-spin animation*/
.f_wheel,
.b_wheel {
-webkit-animation: wheel-spin 10s ease-in-out forwards;
animation: wheel-spin 10s ease-in-out forwards;
}
/*bind the tractor bounce-animation*/
.tractor {
-webkit-animation: tractor-bounce 3s ease-in-out infinite,
tractor-go 10s ease-in-out forwards;
animation: tractor-bounce 3s ease-in-out infinite,
tractor-go 10s ease-in-out forwards;
}
.tractor img{
width:100%;
}
.b_wheel {
width: 190px;
position: relative;
top: -120px;
left: -7%;
}
.b_wheel img {
width: 100%;
}
.f_wheel{
width: 125px;
position:relative;
top: -258px;
left: 65%;
}
.f_wheel img {
width: 100%;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes tractor {
0% { left:0px; top:0px;}
25% {left:200px; top:0px;}
50% {left:400px; top:0px;}
75% {left:600px; top:0px;}
100% {left:800px; top:0px;}
}
/* Standard syntax */
#keyframes tractor {
0% { left:0px; top:0px;}
25% {left:200px; top:0px;}
50% {left:400px; top:0px;}
75% {left:600px; top:0px;}
100% {left:800px; top:0px;}
}
/*standard browser animation*/
#keyframes wheel-spin{
0% { transform: translateX(0px) rotate(50deg); }
100% { transform: translateX(0px) rotate(480deg); }
}
/*webkit browser animation*/
#-webkit-keyframes wheel-spin{
0% { -webkit-transform: translateX(0px) rotate(50deg); }
100% { -webkit-transform: translateX(0px) rotate(480deg); }
}
/*webkit tractor-bounce animation*/
#-webkit-keyframes tractor-bounce {
50% { -webkit-transform: rotate(-5deg) translateY(-3px); }
}
/*standard tractor-bounce web browser animation*/
#keyframes tractor-bounce {
50% { transform: rotate(-5deg) translateY(-3px); }
}
Related
I have an animation which should rotate 360 degrees 50% into the animation, but it's not working.
.w11 {
top:9px; font-
size:50px; color: black; opacity: 0.5;}
.w11 {animation: movefirst
12s linear infinite;
animation-direction:
alternate-reverse;
position: relative;}
#keyframes movefirst {0%
{left:23px;}50%
{transform:rotateX(3
60deg);}
100%{left:200px;}}
<div class="w11">e</div>
It works, you just had some extra space typos in your code.
.w11 {
position: relative;
top: 9px;
font-size:50px;
opacity: 0.5;
animation: movefirst 12s linear infinite;
animation-direction: alternate-reverse;
}
#keyframes movefirst {
0% {
left: 23px;
}
50% {
transform: rotateX(360deg);
}
100% {
left: 200px;
}
}
<div class="w11">e</div>
I'm trying to create an animation with CSS3 animations.
Basically when I load page, I would like the h1 gone from down to up and intro paragraph slides from right to left
Order:
1) Paragraph slides from right to left-center page;
2) Then the title (hello) slide from up to down.
p.intro {
-webkit-animation: dadestra 4s;
-moz-animation: dadestra 4s;
-ms-animation: dadestra 4s;
-o-animation: dadestra 4s;
animation: dadestra 4s;
animation-name: dadestra;
animation-duration: 3s;
position:relative;
animation-delay:-1s;
}
#keyframes dadestra {
0% { left: 100%;}
100%{ left: 0%;}
}
#-moz-keyframes dadestra {
0% { left: 100%;}
100%{ left: 0%;}
}
#-webkit-keyframes dadestra {
0% { left: 100%;}
100%{ left: 0%;}
}
#-o-keyframes dadestra {
0% { left: 100%;}
100%{ left: 0%;}
}
#-ms-keyframes dadestra {
0% { left: 100%;}
100%{ left: 0%;}
}
/* Welcome */
h1 {
color:#fff;
text-align: center;
background:#111112;
text-shadow: 1px 1px 1px red;
border-radius: 10px 10px 10px;
box-shadow: 0px 1px 7px 1px red;
position:relative;
-webkit-animation: hello;
animation-name: hello;
animation-duration: 4s;
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
-ms-animation-duration: 4s;
-o-animation-duration: 4s;
z-index:1;
}
#keyframes hello {
0% { top:60%; left: 0%; }
75% {top: 30%; left: 0%; }
100% { top:0%; left: 0%; }
}
#-moz-keyframes hello {
0% { top:60%; left: 0%; }
75% {top: 30%; left: 0%; }
100% { top:0%; left: 0%; }
}
#-webkit-keyframes hello {
0% { top:60%; left: 0%; }
75% {top: 30%; left: 0%; }
100% { top:0%; left: 0%; }
}
#-ms-keyframes hello {
0% { top:60%; left: 0%; }
75% {top: 30%; left: 0%; }
100% { top:0%; left: 0%; }
}
#-o-keyframes hello {
0% { top:60%; left: 0%; }
75% {top: 30%; left: 0%; }
100% { top:0%; left: 0%; }
}
<html>
<body>
<h1>Welcome guest!</h1>
<p class="intro">bla bla bla bla</p>
<p class="intro">bla bla bla</p>
</body>
</html>
I tried this code, dadestra it's the animation for the paragraph from right to left-center page.
Paragraph it's ok, it works properly.
Issue with h1 animation: 2 problems:
it blinks in Firefox, looks that it works very weird;
In Chrome it doesn't appear, doesn't run.
I'm new to animations, I always avoid from flash ecc, but I have to do for university project, so be careful and if you know what's problem, tell me, Thanks advance!
You should use transform: translate(). It will work better in this situation
body {
overflow: hidden;
}
h2 {
color:#fff;
text-align: center;
background:#111112;
text-shadow: 1px 1px 1px red;
border-radius: 10px 10px 10px;
box-shadow: 0px 1px 7px 1px red;
position:relative;
animation: top 1s 1s;
animation-fill-mode: forwards;
transform: translateY(-100px);
}
#keyframes top {
0% {
transform: translateY(-100px);
}
100% {
transform: translateY(0px);
}
}
p {
animation: left 1s;
}
#keyframes left {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(0vw);
}
}
<h2>Hello</h2>
<p>Paragraph is here</p>
In the slideshow shown below, there are two images available. Once clicking on a button for the second image after first opening my page, there is a sudden jump to that image with no 5 second transition as expected. Also when doing this, I notice that #slideshowimage-2 is shown in the url (doing this offline) after clicking the button for that image. Here's the code below:
CSS:
.slideshowcontainer {
width:800px;
height:400px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
text-align:center;
overflow:hidden;
position:relative;
top:30px;
border-style:solid;
border-width:10px;
border-color:white;
border-radius:15px;
}
.imagecontainer {
width:1800px;
height:400px;
clear: both;
position:relative;
-webkit-transition:left 3s;
-moz-transition:left 3s;
-o-transition:left 3s;
-ms-transition:left 3s;
transition:left 3s;
animation:scroller 16s infinite;
}
#keyframes scroller {
0% {transform:translateX(0);}
31.25% {transform:translateX(0);}
50% {transform:translateX(-800px);}
81.25% {transform:translateX(-800px);}
100% {transform:translateX(0);}
}
.slideshowimage {
float:left;
margin:0px;
padding:0px;
position:relative;
}
#keyframes change {
0% {
transform: translateX(-800px);
}
100% {
transform: translateX(0);
animation: scroller 16s infinite;
}
}
#keyframes change2 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-800px);
animation: scroller2 16s infinite;
}
}
#slideshowimage-1:target ~ .imagecontainer {
animation: none;
transform: translateX(0px);
animation: change 3s forwards;
}
#slideshowimage-2:target ~ .imagecontainer {
animation: none;
transform: translateX(-800px);
animation: change2 3s forwards;
}
.buttoncontainer {
position:relative;
top:-20px;
}
.button {
display:inline-block;
height:10px;
width:10px;
border-radius:10px;
background-color:darkgray;
-webkit-transition:background-color 0.25s;
-moz-transition:background-color 0.25s;
-o-transition:background-color 0.25s;
-ms-transition:background-color 0.25s;
transition:background-color 0.25s;
}
.button:hover {
background-color:gray;
}
HTML:
<div class="slideshowcontainer">
<span id="slideshowimage-1"></span>
<span id="slideshowimage-2"></span>
<span id="slideshowimage-3"></span>
<div class="imagecontainer">
<img src="WebServiceSlide.png" class="slideshowimage" style="width:800px;height:400px;">
<img src="es-flag.png" class="slideshowimage" style="width:800px;height:400px;">
</div>
<div class="buttoncontainer">
</div>
</div>
How could I make it so that the transition set upon clicking a button occurs on the first click? Many thanks in advance.
Reason:-
Because the left and translateX both are different. If you apply left:-800px when slide is at translateX(-800px) (2nd slide) then animation will continue at the 2nd part of slideshow. Thats why you are seeing a blank white space(when translateX(-800px) accors when it is already left:-800px).
Solution:-
You either have to use translateX or left. use the same in all the places
Part of code that solved the problem:-
#keyframes change {
0% {
transform: translateX(-800px);
}
100% {
transform: translateX(0);
animation: scroller 16s infinite;
}
}
#keyframes change2 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-800px);
animation: scroller2 16s infinite;
}
}
#slideshowimage-1:target ~ .imagecontainer {
animation: none;
transform: translateX(0px);
animation: change 3s forwards;
}
#slideshowimage-2:target ~ .imagecontainer {
animation: none;
transform: translateX(-800px);
animation: change2 3s forwards;
}
Explanation:-
This code doesn't do translateX manually. Instead it uses animation to scoll single time by animation: change 3s forwards;
Drawback:-
Once we click on the slide selection button the animation stops. I have even tried it to solve by adding animation in the change keyframes animate end section. But unfortunately it didn't work. So I would suggest an alternate method to overcome the drawback as follows
To overcome the drawback I have added a play button which
will replay the slideshow animation which got paused by the slide
button. (Once we click on play button it takes a little time to slide
as we have given 16s in animation)
DEMO:-
.slideshowcontainer {
width: 800px;
height: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
position: relative;
top: 30px;
border-style: solid;
border-width: 10px;
border-color: white;
border-radius: 15px;
}
.imagecontainer {
width: 1800px;
height: 400px;
clear: both;
position: relative;
-webkit-transition: all 3s;
-moz-transition: all 3s;
-o-transition: all 3s;
-ms-transition: all 3s;
transition: all 3s;
transform: translateX(0px);
animation: scroller 16s infinite;
}
#keyframes scroller {
0% {
transform: translateX(0);
}
31.25% {
transform: translateX(0);
}
50% {
transform: translateX(-800px);
}
81.25% {
transform: translateX(-800px);
}
100% {
transform: translateX(0);
}
}
#keyframes scroller2 {
0% {
transform: translateX(-800px);
}
31.25% {
transform: translateX(-800px);
}
50% {
transform: translateX(0);
}
81.25% {
transform: translateX(0);
}
100% {
transform: translateX(-800px);
}
}
#keyframes change {
0% {
transform: translateX(-800px);
}
100% {
transform: translateX(0);
animation: scroller 16s infinite;
}
}
#keyframes change2 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-800px);
animation: scroller2 16s infinite;
}
}
.slideshowimage {
float: left;
margin: 0px;
padding: 0px;
position: relative;
}
#slideshowimage-1:target ~ .imagecontainer {
animation: none;
transform: translateX(0px);
animation: change 3s forwards;
}
#slideshowimage-2:target ~ .imagecontainer {
animation: none;
transform: translateX(-800px);
animation: change2 3s forwards;
}
#slideshowimage-3:target ~ .imagecontainer {
transform: translateX(0);
animation: scroller 16s infinite;
}
.buttoncontainer {
position: relative;
top: -20px;
}
.button {
display: inline-block;
height: 10px;
width: 10px;
border-radius: 10px;
background-color: darkgray;
-webkit-transition: background-color 0.25s;
-moz-transition: background-color 0.25s;
-o-transition: background-color 0.25s;
-ms-transition: background-color 0.25s;
transition: background-color 0.25s;
}
.button:hover {
background-color: gray;
}
.buttonplay:after {
height: 0;
width: 0;
top: 0;
margin-left: 10px;
position: absolute;
content: ' ';
border-left: solid 13px darkgray;
border-top: solid 8px transparent;
border-bottom: solid 8px transparent;
}
<div class="slideshowcontainer">
<span id="slideshowimage-1"></span>
<span id="slideshowimage-2"></span>
<span id="slideshowimage-3"></span>
<div class="imagecontainer">
<img src="https://placehold.it/800x400" class="slideshowimage" style="width:800px;height:400px;">
<img src="https://placehold.it/900x450" class="slideshowimage" style="width:800px;height:400px;">
</div>
<div class="buttoncontainer">
</div>
</div>
I am trying to slide an image across the screen and then stay at a fixed point. I have looked online and found a few variants on what I have but nothing seems to work.
Have a look at this fiddle.
http://jsfiddle.net/lharby/ysgzpuer/
I had to pass in
-webkit-animation: mini 2s normal;
-moz-animation: mini 3s normal;
-o-animation: mini 3s normal;
animation: mini 2s normal;
to the .mini class to animate the div.
Update: This also has the opacity animated:
http://jsfiddle.net/lharby/ysgzpuer/1/
By editing:
#-webkit-keyframes mini {
from {
left:0px;
opacity:0;
}
to{
left:404px;
opacity:1;
}
#-webkit-keyframes mini {
from {
left:-166px;
}
}
.mini {
background-image: url("http://placehold.it/150x150");
position: absolute;
top: 10px;
left: 404px;
width: 166px;
height: 70px;
z-index: 7;
-webkit-animation: mini 2s linear;
}
<div class=mini></div>
Or this if you don't have overflow: hidden on the parent to avoid the scrollbar
#-webkit-keyframes mini {
from {
left:0px;
-webkit-transform: translateX(-166px)
}
}
.mini {
background-image: url("http://placehold.it/150x150");
position: absolute;
top: 10px;
left: 404px;
width: 166px;
height: 70px;
z-index: 7;
-webkit-animation: mini 2s linear;
}
<div class=mini></div>
this will keep the last frame of the animation after its done
animation-fill-mode: forwards;
#-webkit-keyframes mini {
from{
opacity:0;
}
to{
opacity:1;
}
from {
left:0px;
}
to{
left:404px;
}
}
.frame1 {
-webkit-animation: mini 2s normal forwards;
-moz-animation: mini 30s normal forwards;
-o-animation: mini 30s normal forwards;
animation: mini 2s normal forwards;
opacity:1;
}
.mini {
background-image: url("http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png");
position: absolute;
top: 10px;
left: -404px;
width: 166px;
height: 70px;
z-index: 7;
}
<div class="frame1 mini">
</div>
hope this is what you are looking for
Html
<div class="stage">
<figure class="ball"></figure>
</div>
CSS
#keyframes slide {
0% {
left: 0;
top: 0;
}
100% {
left: 488px;
top: 0;
}
}
.stage {
background: #eaeaed;
border-radius: 6px;
height: 150px;
position: relative;
min-width: 538px;
}
.stage:hover .ball {
animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: .5s;
animation-fill-mode: forwards;
}
.stage:active .ball {
animation-play-state: paused;
}
.ball {
background: #2db34a;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}
Fiddle Demo
This JSFiddle contains a CSS animation that works for me in Chrome, Firefox and Safari, but not IE 10. It doesn't start the animation in IE10 - can't see anything wrong here?
.x1 {
left: 200px;
top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
-webkit-animation: moveclouds 47s linear infinite;
-moz-animation: moveclouds 47s linear infinite;
-ms-animation: moveclouds 47s linear infinite;
-o-animation: moveclouds 47s linear infinite;
animation: moveclouds 47s linear infinite;
}
#keyframes "moveclouds" {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
#-moz-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
#-webkit-keyframes "moveclouds" {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
#-ms-keyframes "moveclouds" {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
#-o-keyframes "moveclouds" {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
Here's the JsFiddle Link http://jsfiddle.net/zXTSp/1/
Try the Jsfiddle in IE10
http://jsfiddle.net/2V3Sx/
It should be #-webkit-keyframes moveclouds {
not #-webkit-keyframes "moveclouds" {...a typo...:)
Hope this works