.car {
background: url('cartemplate orange 1.png');
width: 444px;
height: 150px;
}
.carleft {
-webkit-animation: moveLeft 3s;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count: infinite;
-moz-animation: moveLeft 3s;
-moz-animation-iteration-count: infinite;
-ms-animation: moveLeft 3s;
-ms-animation-iteration-count: infinite;
-o-animation: moveLeft 3s;
-o-animation-iteration-count: infinite;
animation: moveLeft 3s;
animation-iteration-count: infinite;
}
#-webkit-keyframes moveLeft
{
0% { right: -500px; }
50% { right: 700px; }
100% { right: 2000px; }
}
#-moz-keyframes moveLeft
{
0% { right: -500px; }
50% { right: 700px; }
100% { right: 2000px; }
}
#-ms-keyframes moveLeft
{
0% { right: -500px; }
50% { right: 700px; }
100% { right: 2000px; }
}
#keyframes moveLeft
{
0% { right: -500px; }
50% { right: 700px; }
100% { right: 2000px; }
}
.carright {
-webkit-animation: moveRight 3s;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count: infinite;
-moz-animation: moveRight 3s;
-moz-animation-iteration-count: infinite;
-ms-animation: moveRight 3s;
-ms-animation-iteration-count: infinite;
-o-animation: moveRight 3s;
-o-animation-iteration-count: infinite;
animation: moveRight 3s;
animation-iteration-count: infinite;
}
#-webkit-keyframes moveRight
{
0% { left: -500px; }
50% { left: 700px; }
100% { left: 2000px; }
}
#-moz-keyframes moveRight
{
0% { left: -500px; }
50% { left: 700px; }
100% { left: 2000px; }
}
#-ms-keyframes moveRight
{
0% { left: -500px; }
50% { left: 700px; }
100% { left: 2000px; }
}
#keyframes moveRight
{
0% { left: -500px; }
50% { left: 700px; }
100% { left: 2000px; }
}
.wheel {
width: 50px !important;
height: 50px !important;
position: relative;
}
.wheel1 {
width: 100%;
height: 100%;
background-color: #3D3D3D;
border-radius: 50% / 50%;
position: absolute;
}
.wheel2 {
width: 70%;
height: 70%;
background-color: #B8B8B8;
margin: 10%;
border-radius: 50% / 50%;
position: absolute;
-webkit-animation: wheelActive 800ms;
-webkit-animation-iteration-count: infinite;
-moz-animation: wheelActive 800ms;
-moz-animation-iteration-count: infinite;
-ms-animation: wheelActive 800ms;
-ms-animation-iteration-count: infinite;
-o-animation: wheelActive 800ms;
-o-animation-iteration-count: infinite;
animation: wheelActive 800ms;
animation-iteration-count: infinite;
}
#-webkit-keyframes wheelActive
{
0% { margin: 15%; height: 70%; width: 70%; }
50% { margin: 5%; height: 90%; width: 90%; }
100% { margin: 15%; height: 70%; width: 70%; }
}
#-moz-keyframes wheelActive
{
0% { margin: 15%; height: 70%; width: 70%; }
50% { margin: 5%; height: 90%; width: 90%; }
100% { margin: 15%; height: 70%; width: 70%; }
}
#-ms-keyframes wheelActive
{
0% { margin: 15%; height: 70%; width: 70%; }
50% { margin: 5%; height: 90%; width: 90%; }
100% { margin: 15%; height: 70%; width: 70%; }
}
#keyframes wheelActive
{
0% { margin: 15%; height: 70%; width: 70%; }
50% { margin: 5%; height: 90%; width: 90%; }
100% { margin: 15%; height: 70%; width: 70%; }
}
.wheelleft, .wheelright {
position: absolute;
}
.carleft .wheelleft {
top: 135px;
left: 53px;
}
.carleft .wheelright {
top: 135px;
left: 348px;
}
.carright .wheelleft {
top: 135px;
left: 64px;
}
.carright .wheelright {
top: 135px;
left: 358px;
}
<div class="car carleft">
<div class="wheel wheelleft">
<div class="wheel1"></div>
<div class="wheel2"></div>
</div>
<div class="wheel wheelright">
<div class="wheel1"></div>
<div class="wheel2"></div>
</div>
</div>
jsFiddle: http://jsfiddle.net/c6kBj/
I'm trying to make a car in CSS3 that goes from left to right and also some cars that go from right to left, with different colors and everything fancy. But it isn't working. The wheels are working correctly, but the car is not moving from left to right. Why not?
you are missing position: absolute; on your .car div - without that, .right is meaningless as all elements default to position: static;
.car {
background: url('cartemplate orange 1.png');
width: 444px;
height: 150px;
position: absolute;
}
http://jsfiddle.net/c6kBj/1/
You should actually be using translate(0,0) to move stuff around (performs better than animated position values)
Related
I have created this progress bar and I just can't make it stop at the end. Currently its stopping at 70% and gets cleared. Any ideas? Is there any kind of animation setting to stop it at 100%?
.wrap {
background-color: #f2f2f2;
height: 10px;
width: 400px;
margin: 0 auto;
position: relative;
top: 20px;
margin-bottom: 20px;
}
.bar {
background: #ffcc00;
height: 10px;
width: 0%;
}
.animating {
-webkit-animation: progress 3s ;
}
#-webkit-keyframes progress {
0% {
width: 0%;
}
100% {
width: 70%;
}
}
<div class="wrap">
<div class="bar animating"></div>
</div>
animation-fill-mode: forwards; or -webkit-animation: progress 3s forwards;
Try to use 100% in:
#-webkit-keyframes progress {
0% {
width: 0%;
}
100% {
width: 70%; /* edit to 100% */
}
}
A Fancy version
.wrap {
background-color: #f2f2f2;
height: 10px;
width: 400px;
margin: 0 auto;
position: relative;
top: 20px;
margin-bottom: 20px;
}
.wrap div {
background-color: #ffcc00;
height: 10px;
width: 0%;
border-radius: 5px;
animation: loadbar 3s;
-webkit-animation: loadbar 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 100%;
}
#keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
<div class="wrap">
<div class="bar animating"></div>
</div>
I'm animating line with css3 from width:0 to width:100%. At the moment is moving from left to right, but I want to make it to start from right to left. Is this posible at all with keyframes?
here is my code
.content {
width: 400px;
height: 200px;
color: white;
cursor: pointer;
text-transform: uppercase;
padding-bottom: 20px;
position: relative;
background: #333;
}
.content .line {
height: 2px;
background: white;
position: absolute;
top: 10px;
-webkit-animation: dude .75s 1 forwards;
-moz-animation: dude .75s 1 forwards;
-o-animation: dude .75s 1 forwards;
animation: dude .75s 1 forwards;
}
#-webkit-keyframes dude {
0% {
width: 0;
}
100% {
width: 100%;
}
}
#-moz-keyframes dude {
0% {
width: 0;
}
100% {
width: 100%;
}
}
#-o-keyframes dude {
0% {
width: 0;
}
100% {
width: 100%;
}
}
#keyframes dude {
0% {
width: 0;
}
100% {
width: 100%;
}
}
<div class="content">
<div class="line"></div>
</div>
See this FIDDLE
add
.content .line {
right: 0;
}
.content {
width: 400px;
height: 200px;
color: white;
cursor: pointer;
text-transform: uppercase;
padding-bottom: 20px;
position: relative;
background: #333;
}
.content .line {
height: 2px;
background: white;
position: absolute;
top: 10px;
right: 0;
-webkit-animation: dude .75s 1 forwards;
animation: dude .75s 1 forwards;
}
#-webkit-keyframes dude {
0% {
width: 0;
}
100% {
width: 100%;
}
}
#keyframes dude {
0% {
width: 0;
}
100% {
width: 100%;
}
}
<div class="content">
<div class="line"></div>
</div>
Try to animate "left" property instead of width as your element already has position set to absolute.
#keyframes dude {
0% {
left: 100%;
}
100% {
left: 0;
}
}
FIDDLE
change animation-direction to reverse
animation: dude .75s 1 reverse;
Question
let's if i have the following example
A-------------B------------C
how i can start an animation from the middle ( B ) then it go to A then to B and finaly it go to C , i made an example but it's not working good.
Code
.container {
display: block;
}
.container .line {
display: block;
height: 1px;
width: 400px;
background: red;
}
.line:after{
content: "";
height: 20px;
width: 20px;
display: block;
background: black;
border-radius: 50%;
position: absolute;
left: 200px;
top: 0px;
}
#keyframes move {
0% {
left: 200px;
}
25%{
left: 0px;
}
100%{
left: 400px;
}
}
.line:after {
-webkit-animation: move 1s alternate infinite;
-moz-animation: move 1s alternate infinite;
-ms-animation: move 1s alternate infinite;
-o-animation: move 1s alternate infinite;
animation: move 1s alternate infinite;
}
<div class="container">
<div class="line"></div>
</div>
If you do it this way, I thinks it's working well.
In stead of alternate I did use linear. It makes the animation smoother.
.container {
display: block;
}
.container .line {
display: block;
height: 1px;
width: 400px;
background: red;
}
.line:after{
content: "";
height: 20px;
width: 20px;
display: block;
background: black;
border-radius: 50%;
position: absolute;
left: 200px;
top: 0px;
}
#keyframes move {
0% {
left: 200px;
}
25%{
left: 0px;
}
75%{
left: 400px;
}
100%{
left: 200px;
}
}
.line:after {
-webkit-animation: move linear 1s infinite;
-moz-animation: move linear 1s infinite;
-ms-animation: move linear 1s infinite;
-o-animation: move linear 1s infinite;
animation: move linear 1s infinite;
}
<div class="container">
<div class="line"></div>
</div>
You could do it like this, also if add linear (because default is ease) you will get something like this Fiddle
.container .line {
height: 1px;
width: 400px;
background: red;
}
.line:after{
content: "";
height: 20px;
width: 20px;
background: black;
border-radius: 50%;
position: absolute;
left: 200px;
top: 0px;
animation: move 3s infinite;
}
#keyframes move {
0% {left: 200px;}
25%{left: 0px;}
50% {left: 200px;}
75% {left: 400px;}
100%{left: 200px;}
}
<div class="container">
<div class="line"></div>
</div>
Im trying to create a simple loader animation that draws a line back and forth but currently is moving only in one direction. As soon as it reaches the middle of the animation it does not animate in the oposite direction.
This is my css
#keyframes loader-animation {
0% {
width: 0%;
}
49% {
width: 100%;
}
50% {
left: 100%;
}
100% {
left: 0%;
width: 100%
}
}
.loader {
height: 5px;
width: 100%;
}
.loader .bar {
position: relative;
height: 5px;
background-color: dodgerblue;
animation-name: loader-animation;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
And my html
<div class="loader">
<div class="bar"></div>
</div>
And a jsfiddle with the code
Can someone tell me what I'm doing wrong?
It is because you have a heavy break between 49% and 50%.
49% {
width: 100%;
}
50% {
left: 100%;
}
Adding the left to the 49%, and adjusting a few properties of width, left, etc. gives you an awesome pulsating effect:
#keyframes loader-animation {
0% {
width: 0%;
}
49% {
width: 100%;
left: 0%
}
50% {
left: 100%;
}
100% {
left: 0%;
width: 100%
}
}
Snippet
body {margin: 0; padding: 0;}
#keyframes loader-animation {
0% {
width: 0%;
}
49% {
width: 100%;
left: 0%
}
50% {
left: 100%;
width: 0;
}
100% {
left: 0%;
width: 100%
}
}
.loader {
height: 5px;
width: 100%;
}
.loader .bar {
position: absolute;
height: 5px;
background-color: dodgerblue;
animation-name: loader-animation;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
<div class="loader">
<div class="bar"></div>
</div>
Fiddle: http://jsfiddle.net/praveenscience/06w7zwwm/
If you need a pulsating effect, you need to use two extremes:
#keyframes loader-animation {
0% {
left: -100%;
}
49% {
left: 100%;
}
50% {
left: 100%;
}
100% {
left: -100%;
}
}
Snippet
body {margin: 0; padding: 0; overflow: hidden;}
#keyframes loader-animation {
0% {
left: -100%;
}
49% {
left: 100%;
}
50% {
left: 100%;
}
100% {
left: -100%;
}
}
.loader {
height: 5px;
width: 100%;
}
.loader .bar {
width: 100%;
position: absolute;
height: 5px;
background-color: dodgerblue;
animation-name: loader-animation;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
<div class="loader">
<div class="bar"></div>
</div>
I have slightly changed your code, managed to make it work. Here's what I've changed:
#keyframes loader-animation {
0% {
left: -100%;
}
49% {
left: 100%;
}
50% {
left: 100%;
}
100% {
left: -100%;
}
}
Added overflow: hidden; to .loader
Added width: 100%; to .loader .bar
http://jsfiddle.net/wbyzy9jL/5/
I am trying to make this button bounce with CSS3
.order {
position: absolute;
top: 50px;
left: 50px;
width: 75px;
line-height: 75px;
text-align:center;
opacity: 1;
background: green;
color:#fff;
border-radius:50%;
}
<div class="order">Order</div>
I would like it to bounce towards the screen (on the Z axis) up and down.
You can use a keyframe animation to animate the scale ratio and make your button bounce:
.order {
position: absolute;
top: 50px;
left: 50px;
width: 75px;
line-height: 75px;
text-align:center;
opacity: 1;
background: green;
color:#fff;
border-radius:50%;
animation: bounce .3s infinite alternate;
}
#keyframes bounce {
to { transform: scale(1.2); }
}
<div class="order">Order</div>
Iteration count:
If you want to stop the animation after a number of "bounces", you can use animation-iteration-count (use an even number of iterations otherwise the animation will snap on the last iteration) :
.order {
position: absolute;
top: 50px;
left: 50px;
width: 75px;
line-height: 75px;
text-align:center;
opacity: 1;
background: green;
color:#fff;
border-radius:50%;
animation: bounce .3s infinite alternate;
animation-iteration-count: 8;
}
#keyframes bounce {
to { transform: scale(1.2); }
}
<div class="order">Order</div>
try this css
.order {
background:url("http://onestudio.id-staging.com/_BUILD/Dominos/BANNERS/C3%20Digital%20Midweek%20Rescue/Wide%20Skyscraper/images/order.png");
background-size: cover;
position: absolute;
top:50px;
left:50px;
width: 75px;
height: 75px;
z-index:1;
opacity:1;
}
#keyframes fade {
from { top:40px;
left:40px;
width: 100px;
height: 100px; }
50% { top:50px;
left:50px;
width: 75px;
height: 75px; }
to { top:40px;
left:40px;
width: 100px;
height: 100px; }
}
#-webkit-keyframes fade {
from { top:40px;
left:40px;
width: 100px;
height: 100px; }
50% { top:50px;
left:50px;
width: 75px;
height: 75px; }
to { top:40px;
left:40px;
width: 100px;
height: 100px; }
}
.blink {
animation:fade 1000ms infinite;
-webkit-animation:fade 1000ms infinite;
}
try this html
<div class="order blink"></div>
The answer posted by web-tiki, would be the best one to use, still I have a different approach becoz you have already used position:absolute.
See this FIDDLE
you need to animate height and width for button using keyframe.
.order {
background: url("http://onestudio.id-staging.com/_BUILD/Dominos/BANNERS/C3%20Digital%20Midweek%20Rescue/Wide%20Skyscraper/images/order.png") no-repeat;
position: absolute;
background-size: cover;
top: 50px;
left: 50px;
width: 75px;
height: 75px;
z-index: 1;
opacity: 1;
-webkit-animation: mymove 1s infinite;
/* Chrome, Safari, Opera */
animation: mymove 1s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
0% {
height: 75px;
width: 75px;
}
50% {
height: 100px;
width: 100px;
}
100% {
height: 75px;
width: 75px;
}
}
/* Standard syntax */
#keyframes mymove {
0% {
height: 75px;
width: 75px;
}
50% {
height: 100px;
width: 100px;
}
100% {
height: 75px;
width: 75px;
}
}
<div class="order"></div>
Edit:
To add further, you can also animate left and top to 38px both so the
button doesn't look like deviating from original position see this
Fiddle
.order {
background: url("http://onestudio.id-staging.com/_BUILD/Dominos/BANNERS/C3%20Digital%20Midweek%20Rescue/Wide%20Skyscraper/images/order.png") no-repeat;
position: absolute;
background-size: cover;
top: 50px;
left: 50px;
width: 75px;
height: 75px;
z-index: 1;
opacity: 1;
-webkit-animation: mymove 1s infinite;
/* Chrome, Safari, Opera */
animation: mymove 0.5s 2;
}
/* Standard syntax */
#keyframes mymove {
0% {
height: 75px;
width: 75px;
left: 50px;
top: 50px;
}
50% {
height: 100px;
width: 100px;
left: 38px;
top: 38px;
}
100% {
height: 75px;
width: 75px;
left: 50px;
top: 50px;
}
}
<div class="order"></div>
You can animate(bounce) like following:
CSS:
.order {
background:url("http://onestudio.id-staging.com/_BUILD/Dominos/BANNERS/C3%20Digital%20Midweek%20Rescue/Wide%20Skyscraper/images/order.png");
position: absolute;
top:50px;
left:50px;
width: 75px;
height: 75px;
z-index:1;
opacity:1;
animation: myfirst 2s infinite;
-webkit-animation: myfirst 2s infinite;
}
#-webkit-#keyframes myfirst {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
#keyframes myfirst {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
Check Fiddle