This question already has answers here:
How to have css3 animation to loop forever
(3 answers)
Closed 2 years ago.
I would like to have this div animated anytime with no stop, How can I animate it from bottom to top without stopping?
div {
width: 10px;
height: 100px;
background: red;
position: relative;
animation: animateDiv 5s 2;
animation-direction: alternate;
}
#keyframes animateDiv {
0% {bottom: 0px; top: 10px;}
25% {bottom: 200px; top:30px;}
}
You can use animation infinite in css
div {
width: 10px;
height: 100px;
background: red;
position: relative;
animation: animateDiv 5s 2;
animation-direction: alternate;
animation-iteration-count: infinite; //You must add this to make it infinite
}
and also you can make this keyframe to 100% to see a smooth animation :D
#keyframes animateDiv {
0% {bottom: 0px; top: 50px;}
100% {bottom: 50px; top:0px;
}
You can use infinite for your animation. An example is below:
.container {
position: relative;
background-color: #eee;
height: 100px;
width: 500px;
}
#box {
position: absolute;
top: 0;
left: calc(50% - 5px);
animation: move 2s infinite;
background-color: red;
height: 10px;
transform: translateY(0);
width: 10px;
}
#keyframes move {
0%, 100% {transform: translateY(0)}
50% {transform: translateY(90px)}
}
<div class="container">
<div id="box"></div>
</div>
Use "infinite" instead of "2". This will make the animation repeat forever!
Related
Project Description: I am in quest to apply two animations to a nested images inside a div that actually The Div has the responsibility to move the image up and down because the image is captivated inside it And the image(img) which is nested inside the div, Has the responsibility to rotate successively while the div is bouncing the image up and down.
What I want:
1.the image inside the div should keep rotating 360 degrees
2.While the 1 is happening, The div should keep bouncing or moving up and down
.ground {
position: absolute;
width: 100%;
height: 20px;
background-color: gray;
top: 800px;
}
.ball-container {
position: relative;
width 100px;
height: 100px;
left: 50%;
animation-name: bounce;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-direction: forwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes bounce{
0% {
top: 0px;
}
50% {
top: 700px;
width: 130px;
height: 70px;
}
100% {
top: 0px;
}
}
img {
position: absolute;
width: 100px;
height: 100px;
animation-name: rotation;
animation-direction: forwards;
animation-duration: 1s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
#keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
<html>
<div class="ball-container" id="ball-container"><img src="https://image.flaticon.com/icons/svg/53/53283.svg" alt="ball" class="ball" id="ball"/>
</div>
<div class="ground"></div>
</html>
The problem: the bouncing process is awesome, but I dont know how to make the image rotating while it is bouncing.
Thanks.
Codepen Link
THE POST IS EDITED AND HAS NO PROBLEM AFTER APPLYING THE ANSWER
animation-iteration-count should be infinite on img rotation, to match the number of times it bounces as well, else the animation will run once and stop while the box is still bouncing. Also you have a typo, the semicolon in to {transform: rotate(360deg;)} should be outside to {transform: rotate(360deg);}. This is why it doesnt work.
Furthermore animation-direction:forwards is invalid, the correct value is animation-direction:normal.
With these corrections the code is:
.ground {
position: absolute;
width: 100%;
height: 20px;
background-color: gray;
top: 800px;
}
.ball-container {
position: relative;
width 100px;
height: 100px;
left: 50%;
animation-name: bounce;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-direction: normal;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes bounce{
0% {
top: 0px;
}
50% {
top: 700px;
width: 130px;
height: 70px;
}
100% {
top: 0px;
}
}
img {
position: absolute;
width: 100px;
height: 100px;
animation-name: rotation;
animation-direction: normal;
animation-duration: 1s;
animation-timing-function: linear;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
#keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
<html>
<div class="ball-container" id="ball-container"><img src="https://image.flaticon.com/icons/svg/53/53283.svg" alt="ball" class="ball" id="ball"/>
</div>
<div class="ground"></div>
</html>
I'm trying to make an animation where a picture moves to left and to the right in a loop.
By using keyframes I've achieved this, but my next step was to transform:scaleX(-1) the image instantly when the image reaches 25% and 50% and so on.. All help is appreciated!
div.container {
background-color: grey;
height: 500px;
position: relative;
width: 500px;
}
div.object {
animation-name: move;
animation-duration: 4s;
animation-iteration-count: infinite;
background-color: red;
height: 150px;
left: 40px;
position: absolute;
width: 150px;
}
#keyframes move {
0% {
left: 40px;
}
25% {
left: -60px;
}
50% {
left: 40px;
}
75% {
left: -60px;
}
100% {
left: 40px;
}
}
<div class="container">
<div class="object"></div>
</div>
I'm not clear about how you want to use transform: scaleX(-1); in your animation, but the principle of what you are looking to achieve is definitely valid.
Essentially, my understanding is that you want to run the animation that moves your element, and at specific intervals immediately apply a transform without it being gracefully animated.
In order to achieve this, add a second animation and run it along-side the first:
animation: move 4s infinite, transformScale 4s infinite;
#keyframes transformScale {
0% {
transform: scaleX(-0.25);
}
25% {
transform: scaleX(0.5);
}
50% {
transform: scaleX(-0.25);
}
75% {
transform: scaleX(0.5);
}
100% {
transform: scaleX(-0.25);
}
}
Of course, this will run exactly as the first animation, with the transition between keyframes. The solution is to use:
animation-timing-function: steps(1, end);
Which results in the animation CSS of:
animation: move 4s infinite, transformScale 4s infinite steps(1, end);
Here's a snippet that shows it in action.
div.container {
background-color: grey;
height: 500px;
position: relative;
width: 500px;
}
div.object {
animation: move 4s infinite, transformScale 4s infinite steps(1, end);
background-color: red;
height: 150px;
left: 40px;
position: absolute;
width: 150px;
}
#keyframes move {
0% {
left: 40px;
}
25% {
left: -60px;
}
50% {
left: 40px;
}
75% {
left: -60px;
}
100% {
left: 40px;
}
}
#keyframes transformScale {
0% {
transform: scaleX(-0.25);
}
25% {
transform: scaleX(0.5);
}
50% {
transform: scaleX(-0.25);
}
75% {
transform: scaleX(0.5);
}
100% {
transform: scaleX(-0.25);
}
}
<div class="container">
<div class="object"></div>
</div>
I have a png file of flags that I want to animate moving to the right side, off the screen then back onto the screen from the left side. Is there something in css that works for this specific purpose? or do I have to get creative with the design?
I have used keyframe animation to move the image from left to right so I can understand more about how animation works in css but I am still struggling.
<head>
<link rel="stylesheet" href="Ufatrue.css">
<title>Bashkorostan</title>
</head>
<body bgcolor="#E1E4E6">
<div id="Top">
<img src="Top.png" alt="7 Flags" align="middle">
</div>
<div id="Title">
<h>Volga Federal District News</h>
</div>
#Top {
position: relative;
animation: myanimation;
animation-duration: 8s;
animation-iteration-count: infinite;
}
#keyframes myanimation {
0% {left: -300px; top: 0px;}
25% {left: -300px; top: 0px;}
50% {left: 300px; top: 0px;}
75% {right: -300px; top: 0px;}
100% {right: 300px; top: 0px;}
}
You can use just marquee tag for HTML.
.box{
width:10em;
height:10em;
background:dodgerblue;
}
<marquee behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()" direction="right" scrollamount="50" scrolldelay="1"><div class="box"></div></maruquee>
I am not sure i understand exactly what you want. But take a look at the snippet below and please comment in the comment section below and tell me if this is what you wanted
.wrapper {
overflow: hidden;
}
#top {
position: relative;
animation: myanimation;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
height: 100px;
width: 100px;
background: red;
}
#keyframes myanimation {
0% {
left: 0;
transform: translateX(-100%)
}
100% {
left: 100%;
transform: translateX(100%)
}
}
<div class="wrapper">
<div id="top">
</div>
</div>
What about this?: https://jsfiddle.net/wwWaldi/tadyh6p9/14/
#Top {
width: 30px;
height: 30px;
background: blue;
position: relative;
animation: myanimation;
animation-duration: 8s;
animation-iteration-count: infinite;
}
#keyframes myanimation {
0% { right: 0; }
25% { right: -120%; }
85% { visibility: hidden; }
90% {
left: -20%;
visibility: visible;
}
100% {
left: 0;
}
}
I am trying to do a "simple" animation with css & html. I have an image, which I want to be hidden for the first 18 seconds when entering the page, after that, the image will be visible and the animation will begin.
The animation should go to the sides of the screen in square shape for about 30 seconds, and then it will disappear. (Like from bottom left to bottom right, to top right, right bottom in a loop).
I managed to do half of it, kinda. The image hidden thing isn't working, the animation is working but it is not stopping after 30 seconds and also, when I opened my website on another computer size, the img didn't touch the side like it did with my laptop (different screen size). If you could provide me with an answer I will appreciate it, THANKS!
What I tried:
HTML:
.col-5 {
width: 100px;
height: 100px;
position: relative;
-webkit-animation: myfirst 3s 100;
/* Safari 4.0 - 8.0 */
-webkit-animation-direction: normal;
/* Safari 4.0 - 8.0 */
animation: myfirst 3s 100;
animation-direction: normal;
animation-delay: 18s;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes myfirst {
0% {
bottom: 0px;
top: 440px;
left: 0px;
}
25% {
bottom: 0px;
top: 0px;
left: 0px;
}
50% {
bottom: 0px;
top: 0px;
left: 1020px;
}
75% {
bottom: 0px;
top: 440px;
left: 1020px;
}
100% {
bottom: 0px;
top: 440px;
left: 0px;
}
}
<div class='col-5'>
<img style="margin-left: 0%; margin-top: 31%;" src="..\static\kingjulien_iliketo1.gif" style="position:relative;" width="480" height="270" class="juliengif1"></img>
</div>
animation:bottomleft 1s linear 1s forwards, ..... second 1s is first start delay. you can do it 18s. i hope this is answer you want to.
body {
margin:0;
}
.box {
height:50px;
width:50px;
background:#262626;
animation:bottomleft 1s linear 1s forwards, rightbottom 1s linear 2s forwards, righttop 1s linear 3s forwards, lefttop 1s linear 4s forwards;
position:absolute;
visibility:hidden
}
#keyframes bottomleft {
to {margin-top:calc(100vh - 50px);visibility:visible}
}
#keyframes rightbottom {
to {margin-left:calc(100vw - 50px)}
}
#keyframes righttop {
to {transform:translateY(calc(-100vh + 50px))}
}
#keyframes lefttop {
to{margin-top:0px;margin-bottom:calc(100vh - 50px);transform:translateX(calc(-100vw + 50px));}
}
<div class="box"></div>
A couple of things to mention: you have more than one inline style on the image; if you are going to use inline style, list all attributes in one style ="" list. Preferably, use a class: you have a class juliengif1 named in the image, but not defined in the css. I have added the attributes to my snippet/ removed them from the inline style.
(which could be as style="margin-left: 0%; margin-top: 31%; position:relative; width:480px; height:270px;" - css is tidier!)
As for size, well you should investigate media-queries, and compose media queries to apply to your animation in order to accommodate different screen sizes.
I recommend an alt tag onto your image just in case the image doesn't show.
I changed the duration of the animation to 30s ("myfirst 30s"), so that the animation would stop as you wish, after 30 seconds. I have added background-colors to the transitional moves (which begin after an 18s delay). When you run it you will see that each side of the transition lasts approx 7.5 seconds (30s/4)
Hope this helps
Rachel
#juliengif1 {
margin-left: 0%;
top: 31%;
position: relative;
width: 480px;
height: 270px;
background-color:blue;
}
.col-5 {
width: 100px;
height: 100px;
position: relative;
-webkit-animation: myfirst 30s;
/* Safari 4.0 - 8.0 */
-webkit-animation-direction: normal;
/* Safari 4.0 - 8.0 */
animation: myfirst 30s ;
animation-direction: normal;
animation-delay: 18s;
}
/*Safari 4.0 - 8.0*/
#-webkit-keyframes myfirst {
0% {background: red; left: 0px; top: 0px;}
25% {background: yellow; left: 400px; top: 0px;}
50% {background: red; left: 400px; top: 300px;}
75% {background: yellow; left: 0px; top: 300px;}
100% {background: red; left: 0px; top: 0px;}
}
#keyframes myfirst {
0% {background: red; left: 0px; top: 0px;}
25% {background: yellow; left: 400px; top: 0px;}
50% {background: red; left: 400px; top: 300px;}
75% {background: yellow; left: 0px; top: 300px;}
100% {background: red; left: 0px; top: 0px;}
}
<div class='col-5'>
<img id="juliengif1" src="..\static\kingjulien_iliketo1.gif" alt="hi">
</div>
I have 2 elements one is rect and another is line. I move rect from left to right once that is done then I rotate line. Then what I want is that once the line is rotated then I want to change the background color of rect.
.rect {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: red;
animation: move 1s;
animation-fill-mode: forwards;
}
.line {
position: absolute;
top: 200px;
left: 100px;
height: 100px;
border-right: 2px solid green;
animation: rotate 1s;
animation-fill-mode: forwards;
animation-delay: 1.3s;
}
#-webkit-keyframes move {
to {
left: 200px;
}
}
#-webkit-keyframes rotate {
to {
transform: rotate(360deg);
}
}
<div class="rect"></div>
<div class="line"></div>
JSFiddle
you can multiple animation separated with comma.
Just add animation delay to second animation which changes the color
.rect {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: red;
animation: move 1s, colorChange 1s 2s;
animation-fill-mode: forwards;
}
.line {
position: absolute;
top: 200px;
left: 100px;
height: 100px;
border-right: 2px solid green;
animation: rotate 1s;
animation-fill-mode: forwards;
animation-delay: 1.3s;
}
#-webkit-keyframes move {
from {}
to {
left: 200px;
}
}
#-webkit-keyframes rotate {
from {}
to {
transform: rotate(360deg);
}
}
#keyframes colorChange {
to {
background-color: green;
}
}
<div class="rect"></div>
<div class="line"></div>
You don't need an additional animation, you just need to adjust the keyframe % and change the duration to 2.3s, which is 1s + 1.3s, if you want the color change to happen simultaneously at the end, if not then adjust the % accordingly:
.rect {
position: absolute;
left: 0;
width: 100px;
height: 100px;
animation: move 2.3s forwards;
}
.line {
position: absolute;
top: 200px;
left: 100px;
height: 100px;
border-right: 2px solid green;
animation: rotate 1s 1.3s forwards;
}
#-webkit-keyframes move {
43.48%, 100% {left: 200px} /* 100% / 2.3 = 43.48% (around), which is 1s duration (like before), then keep it there till the end (100%) */
0%, 99.99% {background: red} /* keep it red 99.99% of the time */
100% {background: blue} /* but not 100% */
}
#-webkit-keyframes rotate {
to {transform: rotate(360deg)}
}
<div class="rect"></div>
<div class="line"></div>
How's this?
In .rect, add a second animation:
.rect {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: red;
animation: move 1s, turnGreen 2.3s;
animation-fill-mode: forwards;
}
Then define the new animation:
#-webkit-keyframes turnGreen{
0% {background: red;}
99% {background: red;}
100% {background: green;}
}
I tested this on your JSFiddle and it seemed to work as you described.