I am trying to create a slideshow in CSS, and it works, BUT...
The 2nd image stays longer than the others, and when it switvhes to the 3rd, it switches right away to the 4th. I don't know what is wrong with my codes, on paper, everything should work fine.
HTML:
<div id="slideshow">
<div id="img1" class="gallery" style="background-image: url('https://i.pinimg.com/originals/7a/d6/80/7ad680c2aeaf6f89496a174c4e0a92db.jpg');"></div>
<div id="img2" class="gallery" style="background-image: url('https://cdn.wallpapersafari.com/69/19/nhvSi4.png');"></div>
<div id="img3" class="gallery" style="background-image: url('https://cdn.idropnews.com/wp-content/uploads/2018/04/26081105/Look-Wide-iPhone-Wallpaper-720x480.jpg');"></div>
<div id="img4" class="gallery" style="background-image: url('https://cdn.idropnews.com/wp-content/uploads/2018/04/23084736/God-is-Real-iPhone-Wallpaper-720x480.jpg');"></div>
<div id="img5" class="gallery" style="background-image: url('https://www.wallpaperuse.com/wallp/15-154924_m.jpg');"></div>
</div>
CSS:
#slideshow{
height: 60%;
}
.gallery{
display: flex;
align-items: center;
height: 60%;
width: 65%;
background-position: center center;
background-size: cover;
}
#img1{
position: absolute;
z-index: 5;
animation: crossfade 25s -0s infinite;
animation-timing-function: ease-in-out;
}
#img2{
position: absolute;
z-index: 4;
animation: crossfade 25s -5s infinite;
animation-timing-function: ease-in-out;
}
#img3{
position: absolute;
z-index: 3;
animation: crossfade 25s -10s infinite;
animation-timing-function: ease-in-out;
}
#img4{
position: absolute;
z-index: 2;
animation: crossfade 25s -15s infinite;
animation-timing-function: ease-in-out;
}
#img5{
position: absolute;
z-index: 1;
animation: crossfade 25s -20s infinite;
animation-timing-function: ease-in-out;
}
#keyframes crossfade{
0% {opacity: 0;}
20% {opacity: 1;}
33% {opacity: 1;}
53% {opacity: 0;}
100% {opacity: 0;}
}
The ombination of z-indexes plus the timing seems to be slightly muddling things - for example it takes 5 seconds to bring an image to full opacity, shows it then another 5 seconds to fade it - so there is overlap in timing between non-adjacent images.
This snippet removes the difference in z-index so all slides are equal in that respect (whether or not you need to set z-index at all is outside the scope of this question as we don't know the full surrounding context). It brings an image in over 2 seconds and takes it out over two seconds so the overlap is just with adjacent slides. It also displaces the starts by anothe 2 seconds so at the very beginning a fully opaque image is shown.
#slideshow {
height: 60%;
}
.gallery {
display: flex;
align-items: center;
height: 60%;
width: 65%;
background-position: center center;
background-size: cover;
}
#img1 {
position: absolute;
z-index: 1;
animation: crossfade 25s -2s infinite;
animation-timing-function: ease-in-out;
}
#img2 {
position: absolute;
z-index: 1;
animation: crossfade 25s -7s infinite;
animation-timing-function: ease-in-out;
}
#img3 {
position: absolute;
z-index: 1;
animation: crossfade 25s -12s infinite;
animation-timing-function: ease-in-out;
}
#img4 {
position: absolute;
z-index: 1;
animation: crossfade 25s -17s infinite;
animation-timing-function: ease-in-out;
}
#img5 {
position: absolute;
z-index: 1;
animation: crossfade 25s -22s infinite;
animation-timing-function: ease-in-out;
}
#keyframes crossfade {
0% {
opacity: 0;
}
8% {
opacity: 1;
/* fade in for 2 second */
}
20% {
opacity: 1;
/* stay fully visible for 3 seconds */
}
28% {
opacity: 0;
/* fade out for 2 second */
}
100% {
opacity: 0;
}
}
<div id="slideshow">
<div id="img1" class="gallery" style="background-image: url('https://i.pinimg.com/originals/7a/d6/80/7ad680c2aeaf6f89496a174c4e0a92db.jpg');"></div>
<div id="img2" class="gallery" style="background-image: url('https://cdn.wallpapersafari.com/69/19/nhvSi4.png');"></div>
<div id="img3" class="gallery" style="background-image: url('https://cdn.idropnews.com/wp-content/uploads/2018/04/26081105/Look-Wide-iPhone-Wallpaper-720x480.jpg');"></div>
<div id="img4" class="gallery" style="background-image: url('https://cdn.idropnews.com/wp-content/uploads/2018/04/23084736/God-is-Real-iPhone-Wallpaper-720x480.jpg');"></div>
<div id="img5" class="gallery" style="background-image: url('https://www.wallpaperuse.com/wallp/15-154924_m.jpg');"></div>
</div>
Related
I would like to have some text next to an element that has a position of relative and children with positions of absolute.
Following Tania Rascia's tutorial I have created 2 crossfading images, it uses position:absolute to put the images on top of each other, so that they can fading into each other. However, because position:absolute takes the iamges out of the 'flow' or the page, this means that the text from the page is behind the crossfading images.
I have tried applying display:inline-block to the parent of the images and the images themselves, but this hasn't changed anything. I am still new to CSS any tips would be helpful.
.cross-fade {
position: relative;
}
.cross-fade img {
position: absolute;
width: 510px;
height: 350px;
}
.top {
animation-name: fade;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-direction: alternate;
}
#keyframes fade {
0% {
opacity: 1;
}
25% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.crossfade-images img.top {
animation-name: crossfade;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
<div class="img-text-container">
<section class="cross-fade">
<img class="bottom" alt="" src="//unsplash.it/300/300">
<img class="top" alt="" src="https://picsum.photos/300/300">
</section>
/*This is the text that is being hidden by the images*/
<div>
<div>
<pre><div id="pre-div">Text goes in here. Hello! Welcome to my website.</div></pre>
</div>
</div>
</div>
I resolved this by moving the width and height properties off the child images, to the parent container that held the slideshow.
This should be aesthetically the same but help the document understand how large the slideshow is.
.cross-fade {
position: relative;
width: 510px;
height: 350px;
}
.cross-fade img {
position: absolute;
height: 100%;
width: 100%;
}
.top {
animation-name: fade;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-direction: alternate;
}
#keyframes fade {
0% {
opacity: 1;
}
25% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.crossfade-images img.top {
animation-name: crossfade;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
<div class="img-text-container">
<section class="cross-fade">
<img class="bottom" alt="" src="//unsplash.it/300/300">
<img class="top" alt="" src="https://picsum.photos/300/300">
</section>
/*This is the text that is being hidden by the images*/
<div>
<div>
<pre><div id="pre-div">Text goes in here. Hello! Welcome to my website.</div></pre>
</div>
</div>
</div>
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 have successfully made my animation banner, but I need to repeat the entire animation from the beginning for an infinite times. But animation iteration count infinite is not working for me because I have individual animations for all my children elements(3 birds, 2 texts). Can anyone help me, how can I repeat the entire animation from the beginning again and again?
My PEN
HTML
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="canvas">
<h2 class="bye">Good Bye</h2>
<div class="canvas-inner">
<div class="text">Welcome</div>
<img class="people" src="https://i.imgsafe.org/9967e45cc8.png" alt="">
<img class="bird-1" src="https://i.imgsafe.org/996ac926a0.png" alt="">
<img class="bird-2" src="https://i.imgsafe.org/996bc03236.png" alt="">
<img class="bird-3" src="https://i.imgsafe.org/996cfb24a4.png" alt="">
</div>
</div>
</body>
</html>
CSS
body{
margin: 0;
}
.canvas{
background-color: lightgrey;
width: 300px;
height: 250px;
position: relative;
left: 30%;
top: 20%;
overflow: hidden;
}
.canvas-inner{
opacity:1;
animation-name: final;
animation-duration: 6s;
animation-timing-function: linear;
animation-delay: 3s;
animation-fill-mode: forwards;
}
.bye{
position: absolute;
left:0;
right:0;
margin:0 auto;
width:120px;
top: -50px;
-webkit-animation: bye 2s 6s linear forwards;
}
.logo,
.people{
position: absolute;
}
.text{
position: absolute;
right: -100px;
top: 50px;
-webkit-animation: text 2s 2s linear forwards;
}
.bird-1{
position: absolute;
width: 50px;
-webkit-animation: first 2s linear forwards;
animation: first 2s linear forwards;
top: -70px;
left: 55px;
}
.bird-2{
position: absolute;
width: 50px;
-webkit-animation: second 2s linear forwards;
animation: second 2s linear forwards;
top: 165px;
left: -50px;
}
.bird-3{
position: absolute;
width: 50px;
-webkit-animation: third 2s linear forwards;
animation: third 2s linear forwards;
top: 163px;
right: -50px;
transform: rotateY(180deg);
}
#-webkit-keyframes first{
0%{top: -70px;}
100%{top:65px;}
}
#-webkit-keyframes second{
0%{left: -50px;}
100%{left:15px;}
}
#-webkit-keyframes third{
0%{right: -50px;}
100%{right:135px;}
}
#-webkit-keyframes text{
0%{right:-100px;}
100%{right:50px;}
}
#-webkit-keyframes bye{
0%{top:-50px;}
100%{top:110px;}
}
#-webkit-keyframes final{
0%{opacity:1;}
100%{opacity:0;}
}
I am aiming to build a background image slider / fade in - fade out javascript and I am stuck on the CSS part.
I have the following code:
<div class="col-md-3">
<div class="feature">
<div class="feature-header slide-0" style="background-image: url('http://placehold.it/125/150')">
<div class="feature-meta">
<i class="fa fa-camera"></i> 3
</div>
</div>
<div class="feature-header slide-1" style="background-image: url('http://placehold.it/125/150')">
<div class="feature-meta">
<i class="fa fa-camera"></i> 3
</div>
</div>
<div class="feature-header slide-2" style="background-image: url('http://placehold.it/125/150')">
<div class="feature-meta">
<i class="fa fa-camera"></i> 3
</div>
</div>
<div class="feature-body">
<h2>JK Simmons</h2>
<p>JK Simmons 'Whiplash' interview</p>
View
</div>
</div>
</div>
What I would like to do here is stack the three divs with background images in such a way that the images can fade in and out showing the user all three images but one at a time.
I need help with the CSS on this, the javascript I think I am ok on.
Thanks
My first thought would be to use CSS animations, along with position: absolute to 'stack' the relevant elements in the correct place. This would give, as a demonstration, the following code (with the &ndash necessary in practice – vendor-prefixed CSS properties and rules omitted, showing only the standards-compliant non-prefixed version in the code here, though with vendor-prefixes in place in the demos):
/*
because there are three elements we show each
element for only the first 33% of the animation
duration: */
#keyframes slideFade {
0 {
opacity: 1;
}
33% {
opacity: 0;
}
}
/*
Setting the default properties: */
.feature-header {
background-repeat: no-repeat;
background-color: #fff;
height: 150px;
width: 150px;
position: absolute;
}
/*
setting a specific background-image for each element
in order to make the transition visible: */
.slide-0 {
background-image: url(http://lorempixel.com/150/150/nightlife);
/*
animation-name ('slideFade'),
animation-duration ('30s' -> 30 seconds),
animation timing function ('linear'),
animation-delay ('20s')
animation-iteration-count ('infinite'):
animation: slideFade 30s linear 20s infinite;
}
.slide-1 {
background-image: url(http://lorempixel.com/150/150/nature);
animation: slideFade 30s linear 10s infinite;
}
.slide-2 {
background-image: url(http://lorempixel.com/150/150/people);
animation: slideFade 30s linear 0 infinite;
}
.feature-body {
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
font-weight: bold;
margin-left: 150px;
}
#-moz-keyframes slideFade {
0 {
opacity: 1;
}
33% {
opacity: 0;
}
}
#-webkit-keyframes slideFade {
0 {
opacity: 1;
}
33% {
opacity: 0;
}
}
#keyframes slideFade {
0 {
opacity: 1;
}
33% {
opacity: 0;
}
}
.feature-header {
background-repeat: no-repeat;
background-color: #fff;
height: 150px;
width: 150px;
position: absolute;
}
.slide-0 {
background-image: url(http://lorempixel.com/150/150/nightlife);
-moz-animation: slideFade 30s linear 20s infinite;
-webkit-animation: slideFade 30s linear 20s infinite;
animation: slideFade 30s linear 20s infinite;
}
.slide-1 {
background-image: url(http://lorempixel.com/150/150/nature);
-moz-animation: slideFade 30s linear 10s infinite;
-webkit-animation: slideFade 30s linear 10s infinite;
animation: slideFade 30s linear 10s infinite;
}
.slide-2 {
background-image: url(http://lorempixel.com/150/150/people);
-moz-animation: slideFade 30s linear 0 infinite;
-webkit-animation: slideFade 30s linear 0 infinite;
animation: slideFade 30s linear 0 infinite;
}
.feature-body {
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
font-weight: bold;
margin-left: 150px;
}
<div class="col-md-3">
<div class="feature">
<div class="feature-header slide-0">
<div class="feature-meta"> <i class="fa fa-camera"></i> 3</div>
</div>
<div class="feature-header slide-1">
<div class="feature-meta"> <i class="fa fa-camera"></i> 3</div>
</div>
<div class="feature-header slide-2">
<div class="feature-meta"> <i class="fa fa-camera"></i> 3</div>
</div>
<div class="feature-body">
<h2>JK Simmons</h2>
<p>JK Simmons 'Whiplash' interview</p> View
</div>
</div>
</div>
External JS Fiddle demo, for experimentation.
Here you go, Erswell.
Online JSfiddle Demo.
Now a days you want this; pure CSS3 animation (no JS).
.slide {
position:absolute;
}
.slide:nth-child(1) {
-webkit-animation: fade 24s 0s infinite;
z-index:40;
}
.slide:nth-child(2) {
-webkit-animation: fade 24s 6s infinite;
z-index:30;
}
.slide:nth-child(3) {
-webkit-animation: fade 24s 12s infinite;
z-index:20;
}
.slide:nth-child(4) {
-webkit-animation: fade 24s 18s infinite;
z-index:10;
}
#-webkit-keyframes fade {
0%{
opacity: 1;
}
15% {
opacity:1;
}
25%{
opacity: 0;
}
90% {
opacity:0;
}
100% {
opacity:1;
}
}
I am trying to slide an image across the screen and then stay at a fixed point. I have looked online and found a few variants on what I have but nothing seems to work.
Have a look at this fiddle.
http://jsfiddle.net/lharby/ysgzpuer/
I had to pass in
-webkit-animation: mini 2s normal;
-moz-animation: mini 3s normal;
-o-animation: mini 3s normal;
animation: mini 2s normal;
to the .mini class to animate the div.
Update: This also has the opacity animated:
http://jsfiddle.net/lharby/ysgzpuer/1/
By editing:
#-webkit-keyframes mini {
from {
left:0px;
opacity:0;
}
to{
left:404px;
opacity:1;
}
#-webkit-keyframes mini {
from {
left:-166px;
}
}
.mini {
background-image: url("http://placehold.it/150x150");
position: absolute;
top: 10px;
left: 404px;
width: 166px;
height: 70px;
z-index: 7;
-webkit-animation: mini 2s linear;
}
<div class=mini></div>
Or this if you don't have overflow: hidden on the parent to avoid the scrollbar
#-webkit-keyframes mini {
from {
left:0px;
-webkit-transform: translateX(-166px)
}
}
.mini {
background-image: url("http://placehold.it/150x150");
position: absolute;
top: 10px;
left: 404px;
width: 166px;
height: 70px;
z-index: 7;
-webkit-animation: mini 2s linear;
}
<div class=mini></div>
this will keep the last frame of the animation after its done
animation-fill-mode: forwards;
#-webkit-keyframes mini {
from{
opacity:0;
}
to{
opacity:1;
}
from {
left:0px;
}
to{
left:404px;
}
}
.frame1 {
-webkit-animation: mini 2s normal forwards;
-moz-animation: mini 30s normal forwards;
-o-animation: mini 30s normal forwards;
animation: mini 2s normal forwards;
opacity:1;
}
.mini {
background-image: url("http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png");
position: absolute;
top: 10px;
left: -404px;
width: 166px;
height: 70px;
z-index: 7;
}
<div class="frame1 mini">
</div>
hope this is what you are looking for
Html
<div class="stage">
<figure class="ball"></figure>
</div>
CSS
#keyframes slide {
0% {
left: 0;
top: 0;
}
100% {
left: 488px;
top: 0;
}
}
.stage {
background: #eaeaed;
border-radius: 6px;
height: 150px;
position: relative;
min-width: 538px;
}
.stage:hover .ball {
animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: .5s;
animation-fill-mode: forwards;
}
.stage:active .ball {
animation-play-state: paused;
}
.ball {
background: #2db34a;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}
Fiddle Demo