i have following code to move div into left,
But what i want is to move it to left and then again move it back,,This should auto play..any idea??
div
{
width:100px;
height:100px;
background:red;
-webkit-animation: mymove 5s infinite;
animation: mymove 5s infinite;
position:absolute;
}
#-webkit-keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
#keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
Thank you!
You just need to add animation-direction: alternate. It will animate from the last keyframe value.
div {
width: 100px;
height: 100px;
background: red;
-webkit-animation: mymove 5s infinite alternate;
animation: mymove 5s infinite alternate;
position: absolute;
-webkit-backface-visibility: hidden;
}
#-webkit-keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
#keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
<div></div>
the following code should work
div
{
width:100px;
height:100px;
background:red;
-webkit-animation: mymove 5s infinite;
animation: mymove 5s infinite;
position:absolute;
}
#-webkit-keyframes mymove {
0% {left: 0px;}
50% {left: 200px;}
100% {left: 0px;}
}
#keyframes mymove {
0% {left: 0px;}
50% {left: 200px;}
100% {left: 0px;}
}
<div></div>
Related
This question already has answers here:
css "left" not working
(5 answers)
Closed last year.
It's probably something really simple and i'm just being stupid. The button won't show the animation. When I run the code, there is no error showing.
HTML:
<button id='testBtn' class='test'>Test</button>
CSS:
.test{
animation-name: changePos;
animation-duration: 3s;
animation-iteration-count: infinite;
}
#keyframes changePos {
0%{left: 0px;}
50%{left: 1000px;}
100%{left: 0px;}
}
.test{
animation-name: changePos;
animation-duration: 3s;
animation-iteration-count: infinite;
}
#keyframes changePos {
0%{left: 0px;}
50%{left: 1000px;}
100%{left: 0px;}
}
<button id='testBtn' class='test'>Test</button>
Check whether those styles work on the element before making an animation
#keyframes changePos {
0% {
margin-left: 0px;
}
50% {
margin-left: 1000px;
}
100% {
margin-left: 0px;
}
}
Add animation like this:
animation: changePos 5s infinite;
.test {
width: 100px;
height: 100px;
position: relative;
animation: changePos 3s infinite;
}
#keyframes changePos {
0%{left: 0px;}
50%{left: 1000px;}
100%{left: 0px;}
}
<button id='testBtn' class='test'>Test</button>
Set position: relative;
You can also use animation in short like animation: changePos 4s linear 0s infinite alternate;
#keyframes changePos {
0% {left: 0px;}
50% {left: 400px;}
100% {left: 0px;}
}
.test{
animation-name: changePos;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
position: relative;
/*animation: changePos 4s linear 0s infinite alternate;*/
}
<button id='testBtn' class='test'>Test</button>
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 would like to use this image slider: http://codepen.io/rslglover/pen/DBvoA
The image slider works well, but when its finish, it stops. I can't see whats the difference is from the CodePen codes, and what I've done. How can it be it works in the CodePen link?
article{
position: absolute;
left: 450px;
background: #292929;
color: #e3e3e3;
width: 450px;
height: 450px;
text-align: center;
font: 2em/1em sans-serif;
border-box: box-sizing;
padding-top: 0px;
}
article:nth-of-type(1){
animation: slideIn 50s linear 0s infinite;
}
article:nth-of-type(2){
animation: slideIn 50s linear 5s infinite;
}
article:nth-of-type(3){
animation: slideIn 50s linear 10s infinite;
}
article:nth-of-type(4){
animation: slideIn 50s linear 15s infinite;
}
article:nth-of-type(5){
animation: slideIn 50s linear 20s infinite;
}
article:nth-of-type(6){
animation: slideIn 50s linear 25s infinite;
}
article:nth-of-type(7){
animation: slideIn 50s linear 30s infinite;
}
article:nth-of-type(8){
animation: slideIn 50s linear 35s infinite;
}
article:nth-of-type(9){
animation: slideIn 50s linear 40s infinite;
}
article:nth-of-type(10){
animation: slideIn 50s linear 45s infinite;
}
#keyframes slideIn{
0% {left: 450px;}
1% {left: 0;}
10% {left: 0;}
11% {left: -450px;}
100%{left: -450px;}
}
.galleryImg {
height: 450px;
width: 450px;
}
.gallery {
width: 450px;
height: 450px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -225px;
margin-top: -225px;
overflow: hidden;
background: rgba(0,0,0,0.3);
border: 1px solid #fff;
box-shadow:5px 5px 5px 5px rgba(0,0,0,0.7);
}
And my html
<div class="galleryInfo">
<div class="gallery">
<article><img class="galleryImg" src="images/aa2.png" alt=""></article>
<article> <img class="galleryImg" src="images/aa1.png" alt=""></article>
<article><img class="galleryImg" src="images/bb1.png" alt=""></article>
<article><img class="galleryImg" src="images/bb2.png" alt=""></article>
</div>
</div>
Check this out:
HTML:
<div class="galleryInfo">
<div class="gallery">
<section>
<article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
<article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
<article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
<article><img src="https://image.freepik.com/free-icon/medical-samples-in-test-tubes-couple_318-61810.jpg" /></article>
</section>
</div>
</div>
CSS:
html{
background: #aaa;
}
section{
width: 200px;
height: 200px;
position: relative;
left: 50%;
top: 1em;
margin-left: -100px;
overflow: hidden;
background: #292929;
border: 10px solid #fff;
}
/*section:hover article{
animation-play-state: paused;
}*/
article{
position: absolute;
left: 450px;
background: #292929;
color: #e3e3e3;
width: 450px;
height: 450px;
text-align: center;
font: 2em/1em sans-serif;
border-box: box-sizing;
padding-top: 0px;
}
.galleryImg {
height: 450px;
width: 450px;
}
.gallery {
width: 450px;
height: 450px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -225px;
margin-top: -225px;
overflow: hidden;
background: rgba(0,0,0,0.3);
border: 1px solid #fff;
box-shadow:5px 5px 5px 5px rgba(0,0,0,0.7);
}
article:nth-of-type(1){
animation: slideIn 20s linear 0s infinite;
}
article:nth-of-type(2){
animation: slideIn 20s linear 5s infinite;
}
article:nth-of-type(3){
animation: slideIn 20s linear 10s infinite;
}
article:nth-of-type(4){
animation: slideIn 20s linear 15s infinite;
}
#keyframes slideIn{
0% {left: 200px;}
1% {left: 0;}
10% {left: 0;}
11% {left: -200px;}
100%{left: -200px;}
}
Or change position in css file clas galleryInfo and gallery above animation.
The primary reason why your animation appears to stop, is because the CSS is structured for 10 slides.
To maintain the same duration and animation, the keyframes percentages need to be configured for the new total number of slides you are using.
#keyframes slideIn{
0% {left: 200px;} /* Always 0% */
2.5% {left: 0;} /* Equivalent of 0.5s e.g. 0.5/maxTime*100 */
25% {left: 0;} /* Equivalent of 5s e.g. 5/maxTime*100 */
27.5% {left: -200px;} /* Equivalent of 5.5s e.g. 5.5/maxTime*100 */
100%{left: -200px;} /* Always 100% */
}
By changing the keyframes, you will maintain the same slide speed as your codepen example had.
Here is a working snippet.
html{
background: #aaa;
}
section{
width: 200px;
height: 200px;
position: relative;
left: 50%;
top: 1em;
margin-left: -100px;
overflow: hidden;
background: #292929;
border: 10px solid #fff;
}
/*section:hover article{
animation-play-state: paused;
}*/
article{
position: absolute;
left: 200px;
background: #292929;
color: #e3e3e3;
width: 200px;
height: 200px;
text-align: center;
font: 2em/1em sans-serif;
border-box: box-sizing;
padding-top: 80px;
}
/*
* As each slide's animation is 5s, the set duration is totalSlides * 5.
*/
article:nth-of-type(1){
animation: slideIn 20s linear 0s infinite;
}
article:nth-of-type(2){
animation: slideIn 20s linear 5s infinite;
}
article:nth-of-type(3){
animation: slideIn 20s linear 10s infinite;
}
article:nth-of-type(4){
animation: slideIn 20s linear 15s infinite;
}
#keyframes slideIn{
0% {left: 200px;} /* Always 0% */
2.5% {left: 0;} /* Equivalent of 0.5s e.g. 0.5/maxTime*100 */
25% {left: 0;} /* Equivalent of 5s e.g. 5/maxTime*100 */
27.5% {left: -200px;} /* Equivalent of 5.5s e.g. 5.5/maxTime*100 */
100%{left: -200px;} /* Always 100% */
}
<section>
<article>Slide 1</article>
<article>Slide 2</article>
<article>Slide 3</article>
<article>Slide 4</article>
</section>
This is the CSS code I'm using:
img {
position: relative;
-webkit-animation: movingImage infinite linear 2s infinite;
animation: movingImage infinite linear 2s infinite;
}
#-webkit-keyframes movingImage {
0% {left: 0px; top: 0px;}
25% {left: 200px; top: 0px;}
50% {left: 200px; top: 200px;}
75% {left: 0px; top: 200px;}
100% {left: 0px; top: 0px;}
}
#keyframes movingImage {
0% {left: 0px; top: 0px;}
25% {left: 200px; top: 0px;}
50% {left: 200px; top: 200px;}
75% {left: 0px; top: 200px;}
100% {left: 0px; top: 0px;}
}
And the HTML that I have:
<img src="image.png" width="50" height="50" alt="Image">
The correct animation full syntax is:
#keyframes name | duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state
In your example:
animation: movingImage infinite linear 2s infinite;
The last infinite is not a valid value anymore, as you already declared it earlier.
The correct full syntax is:
animation: movingImage 2s linear 0s infinite normal none running;
Or the shorten version:
animation: movingImage 2s linear infinite;
JsFiddle Demo
img {
position: relative;
-webkit-animation: movingImage 2s linear infinite;
animation: movingImage 2s linear infinite;
}
#-webkit-keyframes movingImage {
0% {left: 0px; top: 0px;}
25% {left: 200px; top: 0px;}
50% {left: 200px; top: 200px;}
75% {left: 0px; top: 200px;}
100% {left: 0px; top: 0px;}
}
#keyframes movingImage {
0% {left: 0px; top: 0px;}
25% {left: 200px; top: 0px;}
50% {left: 200px; top: 200px;}
75% {left: 0px; top: 200px;}
100% {left: 0px; top: 0px;}
}
<img src="image.png" width="50" height="50" alt="Image">
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); }
}