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>
Related
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!
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;
}
}
How do I make the animation switch frames directly? There's has to be no timing-function like linear or whatsoever. I need the frames to switch directly between frames without going through any in between values.
eg:
0% -> top: 20px
100% -> top: 400px
Should directly go to 400px in time t without going through 100, 200, 245 or what ever.
You can use animation delay:
.a{
width: 50%;
height: 100px;
position: absolute;
top: 20px;
background-color: #1F8CCA;
margin-top: 20px;
animation:anim 0s 1;
-webkit-animation:anim 0s 1;
animation-fill-mode: forwards;
animation-delay:2s;
-webkit-animation-delay:2s; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
}
#keyframes anim{
from {top: 20px;}
to {top: 400px;}
}
#-webkit-keyframes anim{
from {top: 20px;}
to {top: 400px;}
}
<div class="a">
<div>
You can define multiple animations with different delays. Not sure it's the best way, but it works.
.a{
width: 50%;
height: 100px;
position: absolute;
top: 20px;
background-color: #1F8CCA;
margin-top: 20px;
animation:anim 0s 1, anim-back 0s 1, anim 0s 1;
-webkit-animation:anim 0s 1, anim-back 0s 1, anim 0s 1;
animation-fill-mode: forwards;
animation-delay:1s, 2s, 3s;
-webkit-animation-delay:1s, 2s, 3s; /* Safari and Chrome */
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
}
#keyframes anim{
from {top: 20px;}
to {top: 400px;}
}
#-webkit-keyframes anim{
from {top: 20px;}
to {top: 400px;}
}
#keyframes anim-back{
from {top: 400px;}
to {top: 20px;}
}
#-webkit-keyframes anim-back{
from {top: 400px;}
to {top: 20px;}
}
<div class="a">
<div>
You can also use step-end as the animation-timing-function. It basically tell CSS to render the element at its initial state until the time runs out, and then immediately render the end state. According to Mozilla's documentation:
The animation stays in its initial state until the end, at which point it jumps directly to its final state. This keyword represents the timing function steps(1, end).
div.box {
position: absolute;
width: 40px;
height: 40px;
top: 40px;
animation-name: changePosition;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#a {
left: 0;
background-color: red;
animation-timing-function: linear;
}
#b {
left: 50px;
background-color: green;
animation-timing-function: step-end;
}
#keyframes changePosition {
0% {
top: 40px;
}
100% {
top: 200px;
}
}
<div id="a" class="box"></div>
<div id="b" class="box"></div>
In that case, you don't need an animation. You can just have 2 css classes and toggle them with JS when needed. Like this...you can modify TIME_TO_WAIT to change the time to what you like.
const item = document.getElementById('target-item');
const TIME_TO_WAIT = 1000; // this is in ms
setTimeout(() => {
item.classList.add('container__item--moved');
}, TIME_TO_WAIT);
.container {
position: relative;
width: 100%;
height: 200px;
background: lightblue;
}
.container__item {
position: absolute;
top: 20px;
width: 50px;
height: 50px;
background: red;
}
.container__item--moved {
top: 100px;
}
<div class="container">
<div id="target-item" class="container__item">
</div>
</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.
I have created a simple loading grid in my application, and added an animation over it. This animation seems to work in every browser except IE11.
Can somebody help me understand why it doesn't work and how to get it working in IE11?
.loading {
background-color: #ededed;
height: 12px;
width: 500px;
overflow: hidden;
}
.animation {
animation: loading 1.2s linear;
animation-iteration-count: infinite;
background-color: #e0e0e0;
height: 100%;
left: 0;
position: relative;
top: auto;
width: 300px;
}
#keyframes loading {
from {left: -30rem}
to {left: calc(100% + 30rem)}
}
<div class="loading">
<div class="animation"></div>
</div>
JSFiddle if you're interested: https://jsfiddle.net/9shufwsL/
Apparently calc() does not work in this context.
I changed the value of left in keyframes to use a percent based endpoint and it works in IE11.
.loading {
background-color: #ededed;
height: 12px;
width: 500px;
overflow: hidden;
}
.animation {
animation: loading 1.2s linear;
animation-iteration-count: infinite;
background-color: #e0e0e0;
height: 100%;
left: 0;
position: relative;
top: auto;
width: 300px;
}
#keyframes loading {
from {left: -30rem}
to {left: 110%}
}
<div class="loading">
<div class="animation"></div>
</div>
calc() does not work in IE you could change the #keyframes to:
#keyframes loading {
from {left: -30rem}
to {left: 30rem}
}
you could use -moz-calc and it would work but honestly not the best thing to do.
your keyframes would look like so:
#keyframes loading {
from {left: -30rem}
to {left: -moz-calc(100% + 30rem)}
}