(I'm not english. Hope you understand.)
Hi,
I need the animated div not to overlap the text.
<span>TEXT</span>
<div></div>
div {
width: 10000px;
height: 10000px;
background: red;
animation: div 5s linear infinite;
position:relative;
}
#keyframes div{
0% {top: 0%; left: 0%;}
50% {top: 0%; left: 100%;}
100% {top: 0%; left: 0%;}
}
span {
font-size:50px;
position:absolute;
}
Thanks for answers, Andrew
If you want the text hover the div you can set on the text element a bigger z-index than the div.
div { z-index: 1 }
span { z-index: 2 }
Use z-index for span in the CSS, it helps to specify the stack order of an element or the layer.
Code Sample:
span {
font-size:50px;
position:absolute;
z-index:1;
}
Full code:
div {
width: 10000px;
height: 10000px;
background: red;
animation: div 5s linear infinite;
position:relative;
}
#keyframes div{
0% {top: 0%; left: 0%;}
50% {top: 0%; left: 100%;}
100% {top: 0%; left: 0%;}
}
span {
font-size:50px;
position:absolute;
z-index:1;
}
<span>TEXT</span>
<div></div>
Related
I am trying to move the image from right to left and loop it (by sliding it). Currently, the image isn't showing up in the browser. This is the code I was testing:
Html:
<div class="slideshow">
<div class="imgslide"></div>
</div>
CSS:
.slideshow {
position: relative;
overflow: hidden;
}
.imgslide {
background: url(images/image.png);
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
animation: slideshow 10s linear infinite;
}
#keyframes slideshow {
0% { left: 0; }
100% { left: -200%; }
}
You don't see the picture because your containers have no width and height definitions. Here is your code with size definitions.
.slideshow {
position: relative;
overflow: hidden;
/* Here is where you set a size so it will be visible. */
width: 200px;
height: 300px;
}
.imgslide {
background: url(https://picsum.photos/200/300);
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
animation: slideshow 10s linear infinite;
}
#keyframes slideshow {
0% {
left: 0;
}
100% {
left: -200%;
}
}
<div class="slideshow">
<div class="imgslide"></div>
</div>
However, I want to suggest a change. Since you have a background image, why not simply set the animation to the background itself and not the container?
.imgslide {
background: url(https://picsum.photos/200/300);
width: 200px;
height: 300px;
animation: slideshow 10s linear infinite;
}
#keyframes slideshow {
0% {
background-position-x: 0;
}
100% {
background-position-x: -200px;
}
}
<div class="slideshow">
<div class="imgslide"></div>
</div>
Instead of giving the width and height for the .imgslide as a percentage, give it in px or em. You could also delete the overflow:hidden; from the .slideshow.
This will show if your image is not appearing or if it is appearing and being hidden.
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 am making another site and this time I want to create an image introduction
Here is what i have tried:
<style>
#keframes intro {
0% {background-image: url('intro1.jpg'); top: 0px; left: 0px;}
25% {background-image: url('intro1.jpg'); top: 0px; left: 200px;}
50% {background-image: url('intro1.jpg'); top: 200px; left: 200px;}
75% {background-image: url('intro1.jpg'); top: 0; left: 100px;}
100% {background-image: url('intro1.jpg); top: 0px; left: 0px;}
}
body {
animation-name: intro;
animation-delay: 0.002s;
position: relative;
animation-iteration-count: 1;
animation-duration: 5s;
height: auto;
}
</style>
<div>
</div>
And nothing appears. Is it possible to make an image introduction like GMail does?
Thanks,
Ring Games
The reason for the image not showing up is maybe because it was not yet loaded, because at each keyframe, it load the background-image, and since it doesn't need to be animated (and by the way background images are not animable.). A solution would be to put the background-image outside the keyframes.
<style>
#keframes intro {
0% { top: 0px; left: 0px;}
25% { top: 0px; left: 200px;}
50% { top: 200px; left: 200px;}
75% { top: 0; left: 100px;}
100% { top: 0px; left: 0px;}
}
body {
animation-name: intro;
animation-delay: 0.002s;
position: relative;
animation-iteration-count: 1;
animation-duration: 5s;
height: auto;
background-image: url('intro1.jpg'); /* Put this here instead, it doesn't change and can't animate and on each animation it is being loaded so it might take time to be loaded and rendered, that's why you probably won't see it at all. */
}
</style>
<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 want to create a rectangle and animate the drawing of lines. The lines should grow vertically up and down from the rectangle. Totally, I want to have 2 lines growing up, and 2 lines growing down.
This is my current script:
.content {
position: fixed;
background-color: #dd8341;
top: 40%;
width: 100%;
height: 20%;
padding: 20px;
}
.vertline {
width: 2px;
margin-left: 10%;
background-color: #dd8341;
top: 40%;
animation:lineup 3s forwards;
position: relative;
}
#keyframes lineup {
0% {
height: 0px;
}
100% {
height: 200px;
}
}
<div class="content"></div>
<div class="vertline"></div>
I cannot align all elements correctly. What is the correct way to do this simple task?
You can do it without additional elements, using the :before and :after pseudo-elements to grow up and down, and background: linear-gradient() to create two lines:
.content {
position: fixed;
background-color: #dd8341;
top: 40%;
width: 100%;
height: 20%;
padding: 20px;
}
.content:before,
.content:after {
content: "";
width: 6px; /* color white ("no color") color (each 2px wide); here you can adjust the width */
height: 0;
background: linear-gradient(to right, #dd8341, #dd8341 33.33%, #fff 33.33%, #fff 66.66%, #dd8341 66.66%); /* here you can adjust the spacing */
margin-left: 10%;
position: absolute; /* needs to be absolute */
top: 0;
animation: lineup 3s forwards;
}
.content:after {
top: 100%;
animation: linedown 3s forwards;
}
#keyframes lineup {100% {top: -200px; height: 200px}}
#keyframes linedown {100% {height: 200px}}
<div class="content"></div>
Addition:
/* recommended */
* {box-sizing: border-box}
body {margin: 0}
.content {
position: fixed;
background-color: #dd8341;
top: 40%;
width: 100%;
height: 20%;
padding: 20px;
}
.content:before,
.content:after,
.linedown1,
.linedown2 {
content: "";
width: 2px;
height: 0;
background: #dd8341;
left: 20%;
position: absolute;
top: 0;
animation: lineup 3s forwards;
}
.linedown1, .linedown2 {top: 100%; animation: linedown 3s forwards}
.content:after, .linedown2 {left: 80%; animation-delay: 1s}
#keyframes lineup {100% {top: -200px; height: 200px}}
#keyframes linedown {100% {height: 200px}}
<div class="content">
<span class="linedown1"></span>
<span class="linedown2"></span>
</div>
Here is an idea with only background and gradient:
.content {
position: fixed;
width:100%;
height:100vh;
background-image:
linear-gradient(#dd8341,#dd8341),
linear-gradient(#dd8341,#dd8341),
linear-gradient(#dd8341,#dd8341);
background-position:center, 10% center,calc(10% + 4px) center;
background-size:100% 40%,2px 0,2px 0;
background-repeat:no-repeat;
animation:lineup 2s forwards linear;
}
#keyframes lineup {
to {
background-size:100% 40%,2px 100%,2px 100%;
}
}
<div class="content"></div>
UPDATE
To add delay simple add more states to the animation:
.content {
position: fixed;
width:100%;
height:100vh;
background-image:
linear-gradient(#dd8341,#dd8341),
linear-gradient(#dd8341,#dd8341),
linear-gradient(#dd8341,#dd8341);
background-position:center, 20% center,80% center;
background-size:100% 40%,2px 0,2px 0;
background-repeat:no-repeat;
animation:lineup 2s forwards linear;
}
#keyframes lineup {
50% {
background-size:100% 40%,2px 100%,2px 0%;
}
to {
background-size:100% 40%,2px 100%,2px 100%;
}
}
<div class="content"></div>