#keyframes drunk2anim {
0% {
opacity: 0;
}
17% {
opacity: 0;
}
33% {
opacity: 1;
}
50% {
opacity: 1;
}
67% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes drunk3anim {
0% {
opacity: 0;
}
17% {
opacity: 0;
}
33% {
opacity: 0;
}
50% {
opacity: 1;
}
67% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.drunk1 {
position: absolute;
width: 50%;
top: 150px;
left: 200px;
}
.drunk2 {
position: absolute;
width: 50%;
top: 150px;
left: 200px;
animation: drunk3anim 10s infinite;
}
.drunk3 {
position: absolute;
width: 50%;
top: 150px;
left: 200px;
animation: drunk3anim 10s infinite;
}
<div class="numberone">
<img class="drunk1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/PEO-drunk.svg/64px-PEO-drunk.svg.png">
</div>
<div class="numberone">
<img class="drunk2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/PEO-drunk.svg/64px-PEO-drunk.svg.png">
</div>
<div class="numberthree">
<img class="drunk2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/PEO-drunk.svg/64px-PEO-drunk.svg.png">
</div>
I was just creating a simple image slider, everything seems to be working apart from the fact the one image does not show up in the slider drunk002. If i take away position absolute on the css then all the images show up and you can see the animation working so how become when they are all stacked one of them does not show up? what am i doing wrong thanks.....
Related
I'm creating a CSS only slider with text content.
It's based on https://codepen.io/cassidoo/pen/MyaWzp
html,
body {
font-family: 'Droid Serif', serif;
}
h1 {
font-size: 60px;
text-align: center;
}
.content-slider {
width: 100%;
height: 360px;
}
.slider {
height: 320px;
width: 680px;
margin: 40px auto 0;
overflow: visible;
position: relative;
}
.mask {
overflow: hidden;
height: 320px;
}
.slider ul {
margin: 0;
padding: 0;
position: relative;
}
.slider li {
width: 680px;
height: 320px;
position: absolute;
top: -325px;
list-style: none;
}
.slider .quote {
font-size: 40px;
font-style: italic;
}
.slider .source {
font-size: 20px;
text-align: right;
}
.slider li.anim1 {
animation: cycle 15s linear infinite;
}
.slider li.anim2 {
animation: cycle2 15s linear infinite;
}
.slider li.anim3 {
animation: cycle3 15s linear infinite;
}
.slider li.anim4 {
animation: cycle4 15s linear infinite;
}
.slider li.anim5 {
animation: cycle5 15s linear infinite;
}
.slider:hover li {
animation-play-state: paused;
}
#keyframes cycle {
0% {
top: 0px;
}
4% {
top: 0px;
}
16% {
top: 0px;
opacity: 1;
z-index: 0;
}
20% {
top: 325px;
opacity: 0;
z-index: 0;
}
21% {
top: -325px;
opacity: 0;
z-index: -1;
}
50% {
top: -325px;
opacity: 0;
z-index: -1;
}
92% {
top: -325px;
opacity: 0;
z-index: 0;
}
96% {
top: -325px;
opacity: 0;
}
100% {
top: 0px;
opacity: 1;
}
}
#keyframes cycle2 {
0% {
top: -325px;
opacity: 0;
}
16% {
top: -325px;
opacity: 0;
}
20% {
top: 0px;
opacity: 1;
}
24% {
top: 0px;
opacity: 1;
}
36% {
top: 0px;
opacity: 1;
z-index: 0;
}
40% {
top: 325px;
opacity: 0;
z-index: 0;
}
41% {
top: -325px;
opacity: 0;
z-index: -1;
}
100% {
top: -325px;
opacity: 0;
z-index: -1;
}
}
#keyframes cycle3 {
0% {
top: -325px;
opacity: 0;
}
36% {
top: -325px;
opacity: 0;
}
40% {
top: 0px;
opacity: 1;
}
44% {
top: 0px;
opacity: 1;
}
56% {
top: 0px;
opacity: 1;
z-index: 0;
}
60% {
top: 325px;
opacity: 0;
z-index: 0;
}
61% {
top: -325px;
opacity: 0;
z-index: -1;
}
100% {
top: -325px;
opacity: 0;
z-index: -1;
}
}
#keyframes cycle4 {
0% {
top: -325px;
opacity: 0;
}
56% {
top: -325px;
opacity: 0;
}
60% {
top: 0px;
opacity: 1;
}
64% {
top: 0px;
opacity: 1;
}
76% {
top: 0px;
opacity: 1;
z-index: 0;
}
80% {
top: 325px;
opacity: 0;
z-index: 0;
}
81% {
top: -325px;
opacity: 0;
z-index: -1;
}
100% {
top: -325px;
opacity: 0;
z-index: -1;
}
}
#keyframes cycle5 {
0% {
top: -325px;
opacity: 0;
}
76% {
top: -325px;
opacity: 0;
}
80% {
top: 0px;
opacity: 1;
}
84% {
top: 0px;
opacity: 1;
}
96% {
top: 0px;
opacity: 1;
z-index: 0;
}
100% {
top: 325px;
opacity: 0;
z-index: 0;
}
}
<h1>Pure CSS3 Text Carousel</h1>
<div class="content-slider">
<div class="slider">
<div class="mask">
<ul>
<li class="anim1">
<div class="quote">Hello, this is a quote from a person.</div>
<div class="source">- Person</div>
</li>
<li class="anim2">
<div class="quote">Hello, this is a quote from another person.</div>
<div class="source">- Another person</div>
</li>
<li class="anim3">
<div class="quote">Hello, this is a quote from an animal.</div>
<div class="source">- Animal</div>
</li>
<li class="anim4">
<div class="quote">Hello, this is a quote from a plant.</div>
<div class="source">- Plant</div>
</li>
<li class="anim5">
<div class="quote">How do ya like that.</div>
<div class="source">- Cassidy</div>
</li>
</ul>
</div>
</div>
</div>
Everything works fine, but the pause on hover function pauses the animation in the current position, which can be in the middle of a cycle. This is the correct en obvious behavior, but not ideal for my slider.
The image below shows a cycle paused at about 50%:
Is there some way to get the active cycle to finish before pausing?
If not, would there be some trick to disable pointer-events during cycles?
UPDATE:
I have it working now in Chrome and Firefox, but Safari does not seem to accept pointer-events in keyframes.
I added a background to confirm the timing for the idle instances.
I actually added an extra keyframe for this on the .slider div and added step-start to remove the transition. This animation also pauses on hover, of course, otherwise the animations would run asynchronously after hovering the slider.
https://jsfiddle.net/8f1senmt/
Anyone know why Safari does not play along? Would it just be a restriction or is another setting messing this up?
I played a bit with your code, if you add these lines it will work.
I added pointer-events: none to the slider. Only in specific frames it will be set to auto.
I gave background-color to the slider in the frames where you can hover and only then it will stop. The only problem is :hover will only be recognised, if you move with your mouse. So if the mouse is in the slider, but not moving it won't work.
You will also need to adjust the time-frames, because the background-color is not on the right frame.
.slider {
height: 320px;
width: 680px;
margin: 40px auto 0;
overflow: visible;
position: relative;
pointer-events: none;
animation: slidercycle 15s linear infinite;
}
.slider:hover{
animation-play-state: paused;
}
#keyframes slidercycle {
0% {
pointer-events: none;
}
19% {
pointer-events: auto;
background-color: transparent;
}
20% {
pointer-events: auto;
background-color: red;
}
21% {
pointer-events: none;
background-color: transparent;
}
39%{
pointer-events: none;
background-color: transparent;
}
40% {
pointer-events: auto;
background-color: blue;
}
41% {
pointer-events: none;
background-color: transparent;
}
59%{
pointer-events: none;
background-color: transparent;
}
60% {
pointer-events: auto;
background-color: green;
}
61% {
pointer-events: none;
background-color: transparent;
}
79%{
pointer-events: none;
background-color: transparent;
}
80% {
pointer-events: auto;
background-color: yellow;
}
81% {
pointer-events: none;
background-color: transparent;
}
100%{
pointer-events: none;
background-color: transparent;
}
}
Im not sure about this, but I think you could also use only one cicle for each list element and work with animation-delay.
I'm working on my first portfolio website and wanted to add a text slider on the homepage that would cycle through a list.
Published draft is here: https://ryanpearson.website/
On desktop the list cycles through fine. When I use Chrome devtools to inspect and change screen size down to mobile, the list cycles fine. However, when I load the page on an actual cell phone or tablet, instead of using responsive sizing w/ devtools, the slider portion of this text disappears. I cant figure out why.
I thought maybe it was the elements needing a defined height, or that some of my animation isn't supported. . . but the phone i'm using is an iPHone XS, and the newest iPad.
HTML and CSS:
<div class="container-banner-text">
<span class="banner-text">Hi, I'm Ryan and I
<br>
<div class="content-slider">
<div class="slider">
<div class="mask">
<ul>
<li class="anim1">
<div class="quote">am a jr web dev.</div>
</li>
<li class="anim2">
<div class="quote">love learning.</div>
</li>
<li class="anim3">
<div class="quote">love organization.</div>
</li>
<li class="anim4">
<div class="quote">love beautiful design.</div>
</li>
<li class="anim5">
<div class="quote">love efficiency.</div>
</li>
</ul>
</div>
</div>
</div>
</span>
</div>
.container-banner-text {
position: absolute;
top:40%;
text-align: center;
width:100%;
}
.banner-text {
color: rgba(var(--white), 1);
font-family: Roboto, sans-serif ;
font-size: 2.5rem;
font-weight: 400;
margin:auto;
}
/* text carousel */
.slider {
text-align: center;
margin: 0 auto;
position: relative;
}
.mask {
overflow: hidden;
height: 45vh;
}
.slider ul {
margin: 0;
padding: 0;
position: relative;
}
.slider li {
position: absolute;
list-style: none;
margin:auto;
text-align:center;
width:100%;
background: rgba(var(--white), 1);
background: -webkit-linear-gradient(right, rgba(var(--red),1), rgba(var(--orange),1),rgba(var(--gold),1));
background-clip: border-box;
background-clip: text ;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.slider li.anim1 {
animation: cycle 15s linear infinite;
}
.slider li.anim2 {
animation: cycle2 15s linear infinite;
}
.slider li.anim3 {
animation: cycle3 15s linear infinite;
}
.slider li.anim4 {
animation: cycle4 15s linear infinite;
}
.slider li.anim5 {
animation: cycle5 15s linear infinite;
}
.slider:hover li {
animation-play-state: paused;
}
#keyframes cycle {
0% {
top: 0px;
}
4% {
top: 0px;
}
16% {
top: 0px;
opacity: 1;
z-index: 0;
}
20% {
top: 325px;
opacity: 0;
z-index: 0;
}
21% {
top: -325px;
opacity: 0;
z-index: -1;
}
50% {
top: -325px;
opacity: 0;
z-index: -1;
}
92% {
top: -325px;
opacity: 0;
z-index: 0;
}
96% {
top: -325px;
opacity: 0;
}
100% {
top: 0px;
opacity: 1;
}
}
#keyframes cycle2 {
0% {
top: -325px;
opacity: 0;
}
16% {
top: -325px;
opacity: 0;
}
20% {
top: 0px;
opacity: 1;
}
24% {
top: 0px;
opacity: 1;
}
36% {
top: 0px;
opacity: 1;
z-index: 0;
}
40% {
top: 325px;
opacity: 0;
z-index: 0;
}
41% {
top: -325px;
opacity: 0;
z-index: -1;
}
100% {
top: -325px;
opacity: 0;
z-index: -1;
}
}
#keyframes cycle3 {
0% {
top: -325px;
opacity: 0;
}
36% {
top: -325px;
opacity: 0;
}
40% {
top: 0px;
opacity: 1;
}
44% {
top: 0px;
opacity: 1;
}
56% {
top: 0px;
opacity: 1;
z-index: 0;
}
60% {
top: 325px;
opacity: 0;
z-index: 0;
}
61% {
top: -325px;
opacity: 0;
z-index: -1;
}
100% {
top: -325px;
opacity: 0;
z-index: -1;
}
}
#keyframes cycle4 {
0% {
top: -325px;
opacity: 0;
}
56% {
top: -325px;
opacity: 0;
}
60% {
top: 0px;
opacity: 1;
}
64% {
top: 0px;
opacity: 1;
}
76% {
top: 0px;
opacity: 1;
z-index: 0;
}
80% {
top: 325px;
opacity: 0;
z-index: 0;
}
81% {
top: -325px;
opacity: 0;
z-index: -1;
}
100% {
top: -325px;
opacity: 0;
z-index: -1;
}
}
#keyframes cycle5 {
0% {
top: -325px;
opacity: 0;
}
76% {
top: -325px;
opacity: 0;
}
80% {
top: 0px;
opacity: 1;
}
84% {
top: 0px;
opacity: 1;
}
96% {
top: 0px;
opacity: 1;
z-index: 0;
}
100% {
top: 325px;
opacity: 0;
z-index: 0;
}
}
There are two images, first is the boat, second the plane. The desired result is: Boat animates from left to right, at that time the plane is hidden. When the boat reaches the middle of the screen it disappears and the plane appears. This change should happen smoothly.
.image1 {
width: 259px;
height: 259px;
display: block;
position: absolute;
bottom: 135px;
margin: auto;
#include transition(all 1.2s);
background-size: contain;
-webkit-animation: helicopter-move-one 19s linear infinite;
animation: helicopter-move-one 19s linear infinite;
opacity: 1;
}
#-webkit-keyframes helicopter-move-one {
0% {
left: -300px;
}
60% {
opacity: 0;
}
100% {
left: 110%;
}
}
#keyframes helicopter-move-one {
0% {
left: -300px;
display: block;
}
59% {
display: none;
}
60% {
display: none;
}
100% {
left: 110%;
}
}
<div class="outer">
<div class="image1"><img src="" alt="boat"></div>
<div class="image2"><img src="" alt="plane"></div>
</div>
Since I don't have your images I'm using dogs. In this case "The desired result is: adult dog animates from left to right, at that time the puppy is hidden. When adult dog reaches the middle of the screen it disappears and the puppy appears. This change should happen smoothly." Please note that display is not animatable. You need to animate the opacity instead.
img {
width: 150px;
height: 150px;
}
[class ^="image"] {
width: 150px;
height: 150px;
display: block;
position: absolute;
left: 0;
right: 0;
background-size: contain;
}
.image1 {
z-index: 2;
animation: daAnimation1 19s linear infinite;
}
.image2 {
z-index: 1;
margin: auto;
left: 0;
right: 0;
opacity: 0;
animation: daAnimation2 19s linear infinite;
}
#keyframes daAnimation1 {
0% {
left: -150px;
opacity: 1;
}
45% {
left: calc(50vw - 75px);
opacity: 1;
}
50% {
left: calc(50vw - 75px);
opacity: 0;
}
100% {
left: 110%;
opacity: 0;
}
}
#keyframes daAnimation2 {
0% {
opacity: 0;
}
45% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
<div class="outer">
<div class="image1"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" alt="adult dog"></div>
<div class="image2"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/puppyBeagle300.jpg" alt="puppy"></div>
</div>
I hope this answers your question.
UPDATE:this is an answer to #Danish comment (see below)
img {
width: 150px;
height: 150px;
}
[class ^="image"] {
position:absolute;
background-size: contain;
}
.image1 {
z-index: 2;
opacity: 1;
animation: daAnimation1 19s linear infinite;
}
.image2 {
z-index: 1;
opacity: 1;
}
.outer{
width: 150px;
height: 150px;
display: block;
position: absolute;
animation: OuterAnimation 19s linear infinite;
}
#keyframes OuterAnimation{
0% {
left: -150px;
}
100% {
left: 110%;
}
}
#keyframes daAnimation1 {
0% {
opacity: 1;
}
45% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<div class="outer">
<div class="image1"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" alt="adult dog"></div>
<div class="image2"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/puppyBeagle300.jpg" alt="puppy"></div>
</div>
I am trying to adapt a pen from codepen that i found but it doesn't seem to work. The pen is a text slider with 3 slides and my goal is to make it work with 6 slides.
The original codepen is this
My pen is this
The problem that i think it is is that i got the percentage wrong in my code. My code for 6 slides is
#keyframes anim-1 {
0%,
4.15% {
left: -100%;
opacity: 0;
}
4.15%,
12.45% {
left: 25%;
opacity: 1;
}
16.66%,
100% {
left: 110%;
opacity: 0;
}
}
#keyframes anim-2 {
0%,
16.66% {
left: -100%;
opacity: 0;
}
20.75%,
29.17% {
left: 25%;
opacity: 1;
}
33.32%,
100% {
left: 110%;
opacity: 0;
}
}
#keyframes anim-3 {
0%,
33.32% {
left: -100%;
opacity: 0;
}
37.47%,
45.83% {
left: 25%;
opacity: 1;
}
49.98%,
100% {
left: 110%;
opacity: 0;
}
}
#keyframes anim-4 {
0%,
49.98% {
left: -100%;
opacity: 0;
}
54.13%,
62.43% {
left: 25%;
opacity: 1;
}
66.58%,
100% {
left: 110%;
opacity: 0;
}
}
#keyframes anim-5 {
0%,
66.58% {
left: -100%;
opacity: 0;
}
70.73%,
79.03% {
left: 25%;
opacity: 1;
}
83.18%,
100% {
left: 110%;
opacity: 0;
}
}
#keyframes anim-6 {
0%,
83.18% {
left: -100%;
opacity: 0;
}
87.33%,
95.85% {
left: 25%;
opacity: 1;
}
100% {
left: 110%;
opacity: 0;
}
}
I messed up the indentation here in this post but everything should be clearer in the codepen.
I don't think that i made any typos and i am still thinkin what could cause this.
In your CSS, you're not separating the different classes with a comma. Add these, and it will work.
Your Code
.item-1,
.item-2,
.item-3
.item-4
.item-5
.item-6 {
...
The Fix
.item-1,
.item-2,
.item-3,
.item-4,
.item-5,
.item-6 {
...
#import url(https://fonts.googleapis.com/css?family=Open+Sans:600);
body {
font-family: 'Open Sans', 'sans-serif';
color: #cecece;
background: #222;
overflow: hidden;
}
.item-1,
.item-2,
.item-3,
.item-4,
.item-5,
.item-6{
position: absolute;
display: block;
top: 2em;
width: 60%;
font-size: 2em;
animation-duration: 20s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.item-1{
animation-name: anim-1;
}
.item-2{
animation-name: anim-2;
}
.item-3{
animation-name: anim-3;
}
.item-4{
animation-name: anim-4;
}
.item-5{
animation-name: anim-5;
}
.item-6{
animation-name: anim-6;
}
#keyframes anim-1 {
0%, 4.15% { left: -100%; opacity: 0; }
4.15%, 12.45% { left: 25%; opacity: 1; }
16.66%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-2 {
0%, 16.66% { left: -100%; opacity: 0; }
20.75%, 29.17% { left: 25%; opacity: 1; }
33.32%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-3 {
0%, 33.32% { left: -100%; opacity: 0; }
37.47%, 45.83% { left: 25%; opacity: 1; }
49.98%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-4 {
0%, 49.98% { left: -100%; opacity: 0; }
54.13%, 62.43% { left: 25%; opacity: 1; }
66.58%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-5 {
0%, 66.58% { left: -100%; opacity: 0; }
70.73%, 79.03% { left: 25%; opacity: 1; }
83.18%, 100% { left: 110%; opacity: 0; }
}
#keyframes anim-6 {
0%, 83.18% { left: -100%; opacity: 0; }
87.33%, 95.85% { left: 25%; opacity: 1; }
100% { left: 110%; opacity: 0; }
}
<p class="item-1">This is your last chance. After this, there is no turning back.</p>
<p class="item-2">You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe.</p>
<p class="item-3">You take the red pill - you stay in Wonderland and I show you how deep the rabbit-hole goes.</p>
<p class="item-4">You take the red pill - you stay in Wonderland and I show you how deep the rabbit-hole goes.</p>
<p class="item-5">You take the red pill - you stay in Wonderland and I show you how deep the rabbit-hole goes.</p>
<p class="item-6">You take the red pill - you stay in Wonderland and I show you how deep the rabbit-hole goes.</p>
JSFiddle
My HomePage has under navigation bar a 1024x500px slideshow going on.
I want headings over that slideshow.
The headings should contain some sentences, for example "Digital art".
I would like to make transitions for those headings and text.
They should change every few seconds, fly in and out, or fade in and out, not sure.
How can I make that?
Thank you all.
Here is a screenshot if the situation. http://pokit.org/get/?9e3304f02be8142576ed1a0fa568efc1.jpg
Slider is not the problem. I want the headings to move over it.
This is the html section, the div that contains the slideshow, and I already put one h1
<div class="heroImg" id="heroImg">
<h1>
Graphic Design and Digital Art
</h1>
<div id=slidercontainer>
<div id=css3slider>
<img src="images/slideshowimg/malay.jpg" alt="White-tailed kite" >
<img src="images/slideshowimg/jkarta.jpg" alt="Hawk title=Hawk" >
<img src="images/slideshowimg/american.jpg" alt="Osprey" >
<img src="images/slideshowimg/aya.jpg" alt="Square-tailed kite" >
<img src="images/slideshowimg/malay.jpg" alt="White-tailed kite" >
</div>
</div>
</div>
This is the css -
#heroImg h1 {
color: rgba(255,102,0,1);
position: absolute;
top: 250px;
z-index: 99;
font-family: "Exo 2", "sans-serif;";
font-size: 2em;
left: 170px;
}
/* Slider CSS */
#-webkit-keyframes slider {
0% { left: 0; opacity: 0; }
2% { opacity: 1; }
20% { left: 0; opacity: 1; }
21% { opacity: 0; }
24% { opacity: 0; }
25% { left: -1024px; opacity: 1; }
45% { left: -1024px; opacity: 1; }
46% { opacity: 0; }
48% { opacity: 0; }
50% { left: -2048px; opacity: 1; } 70% { left: -2048px; opacity: 1; }
72% { opacity: 0; }
74% { opacity: 0; }
75% { left: -3072px; opacity: 1; }
95% { left: -3072px; opacity: 1; }
97% { left: -3072px; opacity: 0; }
100% { left: 0; opacity: 0; }
}
#-moz-keyframes slider {
0% { left: 0; opacity: 0; }
2% { opacity: 1; }
20% { left: 0; opacity: 1; }
21% { opacity: 0; }
24% { opacity: 0; }
25% { left: -1024px; opacity: 1; }
45% { left: -1024px; opacity: 1; }
46% { opacity: 0; }
48% { opacity: 0; }
50% { left: -2048px; opacity: 1; } 70% { left: -2048px; opacity: 1; }
72% { opacity: 0; }
74% { opacity: 0; }
75% { left: -3072px; opacity: 1; }
95% { left: -3072px; opacity: 1; }
97% { left: -3072px; opacity: 0; }
100% { left: 0; opacity: 0; }}
#-o-keyframes slider {
0% { left: 0; opacity: 0; }
2% { opacity: 1; }
20% { left: 0; opacity: 1; }
21% { opacity: 0; }
24% { opacity: 0; }
25% { left: -1024px; opacity: 1; }
45% { left: -1024px; opacity: 1; }
46% { opacity: 0; }
48% { opacity: 0; }
50% { left: -2048px; opacity: 1; }
70% { left: -2048px; opacity: 1; } 72% { opacity: 0; }
74% { opacity: 0; }
75% { left: -3072px; opacity: 1; }
95% { left: -3072px; opacity: 1; }
97% { left: -3072px; opacity: 0; }
100% { left: 0; opacity: 0; }}
#keyframes slider {
0% { left: 0; opacity: 0; }
2% { opacity: 1; }
20% { left: 0; opacity: 1; }
21% { opacity: 0; }
24% { opacity: 0; }
25% { left: -1024px; opacity: 1; }
45% { left: -1024px; opacity: 1; }
46% { opacity: 0; }
48% { opacity: 0; }
50% { left: -2048px; opacity: 1; }
70% { left: -2048px; opacity: 1; } 72% { opacity: 0; }
74% { opacity: 0; }
75% { left: -3072px; opacity: 1; }
95% { left: -3072px; opacity: 1; }
97% { left: -3072px; opacity: 0; }
100% { left: 0; opacity: 0; }}
div#slidercontainer {
position: relative;
overflow: hidden;
background: #000
}
div#slidercontainer {
width: 1024px;
height: 500px;
}
div#sidercontainer img {
width: 1024px;
height: 500px;
float: left;
}
div#css3slider {
position: absolute;
width:5120px;
-webkit-animation-name:slider;
-webkit-animation-duration:20s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:slider;
-moz-animation-duration:20s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count:infinite;
-o-animation-name:slider;
-o-animation-duration:20s;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count:infinite;
animation-name:slider;
animation-duration:20s;
animation-timing-function: ease-in-out;
animation-iteration-count:infinite;
}
div#css3slider img {
float: right;
}
div#slidercontainer:after {
font-size: 150px;
position: absolute;
z-index: 12;
color: rgba(255,255,255, 0);
left: 300px; top: 80px;
-webkit-transition: 1s all ease-in-out;
-ms-transition: 1s all ease-in-out;
-moz-transition: 1s all ease-in-out;
-o-transition: 1s all ease-in-out;
transition: 1s all ease-in-out;
}
div#slidercontainer:hover:after {
color: rgba(255,255,255, 0.6);
}
Try this
div#sidercontainer div.slidecontent {
width: 1024px;
height: 500px;
float: left;
}
div#css3slider div.slidecontent {
float: right;
}
Then add slide content div instead of image like
<div id=css3slider>
<div class="slidecontent">
<h1>Text to show</h1>
<img src="images/slideshowimg/image1.jpg" alt="" >
</div>
</div>