This question already has answers here:
What do commas and spaces in multiple classes mean in CSS?
(9 answers)
Closed 4 years ago.
I have a simple fading slideshow and I want it to stop animating when the viewport's width is below 800px. All I can find is animation: none !important; but it doesn't seem to work. Here's my code:
fiddle edited with a smaller max-width and simple bg color:
https://jsfiddle.net/alaisl/z2esy1uw/
HTML:
<div id="slide01">
<div class='sliderwrap'>
<div class="wmslogo">
<img src="img/wmslogo.png" id="wmsidlogo" /><br>
WORLDCLASS MANPOWER SERVICES
</div>
<div class='himg1'></div>
<div class='himg2'></div>
<div class='himg3'></div>
</div>
</div>
CSS:
/* -SLIDE01------------------------------------------------- */
#slide01 {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
background-color: transparent;
}
.sliderwrap {
max-width: 100%;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
align-items: center;
}
.wmslogo {
position: absolute;
width: 100%;
height: auto;
display: flex;
align-items: center;
flex-direction: column;
color: white;
font: 3vw copperplate;
z-index: -1;
}
#wmsidlogo {
max-width: 40vw;
height: auto !important;
}
.himg1, .himg2, .himg3 {
width: 100%;
height: 100vh;
position: absolute;
z-index: -2;
}
.himg1 {
background: url(img/01.jpg)no-repeat center;
background-size: cover;
animation: fade 28s infinite;
-webkit-animation: fade 28s infinite;
}
.himg2 {
background: url(img/02.jpg)no-repeat center;
background-size: cover;
animation: fade2 28s infinite;
-webkit-animation: fade2 28s infinite;
}
.himg3 {
background: url(img/03.jpg)no-repeat center;
background-size: cover;
animation: fade3 28s infinite;
-webkit-animation: fade3 28s infinite;
}
/* KEYFRAMES-------START */
#keyframes fade
{
0% {opacity:1}
33.333% { opacity: 0}
66.666% { opacity: 0}
100% { opacity: 1}
}
#keyframes fade2
{
0% {opacity:0}
33.333% { opacity: 1}
66.666% { opacity: 0 }
100% { opacity: 0}
}
#keyframes fade3
{
0% {opacity:0}
33.333% { opacity: 0}
66.666% { opacity: 1}
100% { opacity: 0}
}
/* KEYFRAMES-------END */
#media only screen and (max-width: 800px) {
.slide01 .himg1 .himg2 .himg3 {
animation: none !important;
-webkit-animation: none !important;
display: none;
}
.slide01 {
background-color: bisque;
background-size: cover;
}
}
I found this worked. Pass your keyframes to a media query:
#media only screen and (min-width: 801px) {
#keyframes fade
{
0% {opacity:1}
33.333% { opacity: 0}
66.666% { opacity: 0}
100% { opacity: 1}
}
#keyframes fade2
{
0% {opacity:0}
33.333% { opacity: 1}
66.666% { opacity: 0 }
100% { opacity: 0}
}
#keyframes fade3
{
0% {opacity:0}
33.333% { opacity: 0}
66.666% { opacity: 1}
100% { opacity: 0}
}
}
Related
I am currently working on an intro transition. Where the following should happen:
A Background-Color transition from a set of different background colors
A word swapping transition -> here should each word change with a fade in and out + blur transition
The basics are working pretty good here, but I can’t get my head around that the whole transition working simultaneously.
Especially the blur in and out transition isn't totally out of timing. I tried so many different values.
My Code:
(function(){
var words = ['Fade', 'Blur', 'Word'], i = 0;
setInterval(function(){
$('#swap-text').fadeOut(1250, function(){
$(this).html(words[i=(i+1)%words.length]).fadeIn(1250, "linear");
});
},3000);
})();
body{
font-family: sans-serif;
font-weight:100;
padding:0;
margin: 0;
}
#keyframes colorfont {
0% { color: #C0FF01; }
33% { color: #013334; }
66% { color: #C0FF01; }
100% { color: #C0FF01; }
}
#keyframes glow {
0% { background: #013334; }
33% { background: #C0FF01; }
66% { background: #8E7DD2; }
100% { background: #C0FF01; }
}
.intro-claim{
opacity: 1;
}
.intro-content{
width: 100vw;
height: 100vh;
display: flex;
position: relative;
align-items: center;
justify-content: center;
z-index: 0;
}
.intro-content p {
max-width: 1215px;
padding: 0 50px;
color: #C0FF01;
// opacity: 0;
text-align: left;
font-size: 45px;
line-height: 1.2;
animation: colorfont 9s infinite;
animation-delay: 3s;
animation-timing-function: linear;
}
.intro-background{
width: 100%;
z-index: -100;
height: 100vh;
display: flex;
position: fixed;
top:0;
background: #013334;
animation: glow 9s infinite;
animation-delay: 3s;
}
#swap-text{
margin-left: 12px;
font-weight:800;
animation: blur 4250ms linear 0s infinite normal none;
animation-delay: 3s;
}
#keyframes blur {
0%{
-webkit-filter: blur(0px);
}
20%{
-webkit-filter: blur(0px);
}
40%{
-webkit-filter: blur(8px);
}
60%{
-webkit-filter: blur(8px);
}
80%{
-webkit-filter: blur(0px);
}
100%{
-webkit-filter: blur(0px);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="intro-content">
<div class="intro-logo intro-claim">
<p>life is full of impressions. some of them remain. we create contemporary experiences, that people love to<span id="swap-text">Fade</span></p>
</div>
</header>
<div class="intro-background"></div>
Codepen:
https://codepen.io/Dennisade/pen/eYGBPjq
I think it is just a matter of having 4 different pendulums (animations) with varying time periods and balancing them. So I have made some changes to the time periods in your codepen, specifically css and js, see if this works for you.
CSS:
$transition: 500ms cubic-bezier(0.485, 0.355, 0.345, 0.950);
$green: #013334;
$lightblue: #E3EAF4;
$brightmood: #8E7DD2;
$yellow: #C0FF01;
$introvalue: 9s;
$introdelay: 3s;
body{
font-family: sans-serif;
font-weight:100;
padding:0;
margin: 0;
}
#keyframes colorfont {
0% { color: $yellow; }
33% { color: $green; }
66% { color: $yellow; }
100% { color: $yellow; }
}
#keyframes glow {
0% { background: $green; }
33% { background: $yellow; }
66% { background: $brightmood; }
100% { background: $green; }
}
.intro-claim{
opacity: 1;
}
.intro-content{
width: 100vw;
height: 100vh;
display: flex;
position: relative;
align-items: center;
justify-content: center;
z-index: 0;
p {
max-width: 1215px;
padding: 0 50px;
color: $yellow;
// opacity: 0;
text-align: left;
font-size: 45px;
line-height: 1.2;
animation: colorfont $introvalue infinite;
animation-delay: $introdelay;
animation-duration: 6s;
}
}
.intro-background{
width: 100%;
z-index: -100;
height: 100vh;
display: flex;
position: fixed;
top:0;
background: $green;
animation: glow $introvalue infinite;
animation-duration: 6s;
animation-delay: $introdelay;
}
#swap-text{
margin-left: 12px;
font-weight:800;
animation: blur 4250ms infinite;
animation-delay: $introdelay;
animation-duration: 2s;
}
#keyframes blur {
0%{
-webkit-filter: blur(0px);
}
50%{
-webkit-filter: blur(8px);
}
100%{
-webkit-filter: blur(0px);
}
}
JS:
(function(){
var words = ['Fade', 'Blur', 'Word'], i = 0;
setInterval(function(){
$('#swap-text').fadeOut(500, function(){
$(this).html(words[i=(i+1)%words.length]).fadeIn(500, "linear");
});
},2000);
})();
https://codepen.io/gamezordd/pen/oNGYQwp
I have created sample
CodePen here.
I tried below but didn't work.
.elementToFadeInAndOut {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
}
#-webkit-keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
#keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
As you will see this sample has 3 images. I give them id = "imge1", "imge2", "imge3"
img3 keeps rotating using keyframe.
I need to show img1 and img2 showing kinda fadein-fadeout effect.
so when img3 rotates to bottom that time may be fadeout img1 and fadeIn img2. (or other way around is fine)
basically 2 images should keep replacing with some fade effect and img3 keeps rotating.
Here is a link I tried but could not achieve solution.
CSS animation, fade in fade out opacity on automated slideshow
CSS how to make an element fade in and then fade out?
also, this needs to be done using pure-css only. I have to put this in nextjs project.
Thanks
You need animation-delay and animation-iteration-count to achieve that
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
figure{
width: 100vw;
height: 50vh;
position: relative;
background: green;
text-align: center;
}
picture{
position: relative;
display: inline-block;
width: 25%;
}
picture img{
width: 100%
}
picture:not(:last-of-type){opacity: 0}
picture:first-of-type{
background: red;
animation: fadeinout 4s linear forwards infinite;
}
picture:nth-child(2){
background: red;
animation: fadeinout 4s 2s linear forwards infinite;/*you need to add the delay here*/
}
picture:last-of-type{
animation: spin 4s linear infinite;
}
figcaption{
position: absolute;
bottom: 0;
left:0;
width: 100%;
}
#keyframes fadeinout {
50% { opacity: 1; }
}
#keyframes spin {
to { transform: rotate(360deg);}
}
<figure>
<picture>img1</picture>
<picture>img2</picture>
<picture>
<img class="img3" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81f928d7217864bf001225/img/login-radar-1.png" alt="img" />
</picture>
<figcaption>Css Labs</figcaption>
</figure>
See below. I added a background color to the third image to make it visible.
#img3 {
background-color: red; /* to make it visible */
}
.flexDisplay {
display: flex;
}
.wrapper {
display: flex;
justify-content: space-evenly;
}
.loginImage {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.img1 {
animation: spin 3s linear infinite;
opacity: 0.1;
width: 200px;
height: 200px;
align-items: center;
}
.elementToFadeInAndOut {
width: 200px;
height: 200px;
background: red;
animation: fadeinout 4s linear infinite;
}
#keyframes fadeinout {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
<div class="flexDisplay">
<div class="wrapper">
<img id="img1" class="elementToFadeInAndOut" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81fc3f75aec5860f52b6a0/img/loginsuper-rectangle-copy.png " class="loginImage" alt="branding logo" />
<img id="img2" class="elementToFadeInAndOut" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81fc3f75aec5860f52b6a0/img/loginsuper-rectangle.png" class="loginImage elementToFadeInAndOut" alt="branding logo" />
<img id="img3" class="img1" src="https://anima-uploads.s3.amazonaws.com/projects/5e81f9028ef92977fa0913c0/releases/5e81f928d7217864bf001225/img/login-radar-1.png" alt="img" />
</div>
</div>
Basically, you need to apply 2 different animation functions to the different elements.
I have used z-index to let the images overlap each other and
set the infinite property for the duration of your animation.
You can set an interval for your images using animation-delay.
.flexDisplay{
display: flex;
background: #f1f1f1;
}
.wrapper{
display: flex
}
.img1{
z-index:3;
}
.loginImage1{
width: 100%;
height: 100%;
position:absolute;
left:0;
top:0;
z-index:1;
}
.loginImage2{
width: 100%;
height: 100%;
position:absolute;
left:0;
top:0;
z-index:2;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.img1{
animation: spin 3s linear infinite;
width: 200px;
height: 200px;
align-items: center;
}
.img2{
position: relative;
width: 200px;
height: 200px;
}
.elementToFadeInAndOut1 {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear infinite;
animation: fadeinout 4s linear infinite;
}
#-webkit-keyframes fadeinout {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#keyframes fadeinout {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
.elementToFadeInAndOut2 {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear infinite;
animation: fadeinout 4s linear infinite;
animation-delay:5s;
}
#-webkit-keyframes fadeinout1 {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#keyframes fadeinout1 {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
Created this pen: https://codepen.io/spaceCadett/pen/wvKKowL
I have been trying to create a simple image slider showcasing four images for a website. I have managed to create the slideshow, however the transition between each images is really fast and I want a bit of a fade in effect so that it's smoother. A lot of the questions on here already suggest using jQuery but I am trying to do it with just CSS. I've also explored the animate.css but couldn't get it to work. Appreciate any/all help given. Thanks :)
Heres the code so far:
HTML
<div class="slider">
<div class="feature">
</div>
<div class="overlay">
</div>
</div>
and the CSS
.feature {
animation: slide 3s;
}
.slider {
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 80vh;
animation: slide 10s infinite;
}
.overlay {
color: #fff;
width: 100%;
height: 80vh;
background-color: rgba(0, 0, 0, 0.5);
}
#keyframes slide {
0%{
background-image: url(../resources/feature/Feature1.jpg);
}
25%{
background-image: url(../resources/feature/Feature1.jpg);
}
25.1%{
background-image: url(../resources/feature/Feature2.jpg);
}
50%{
background-image: url(../resources/feature/Feature2.jpg);
}
50.01%{
background-image: url(../resources/feature/Feature3.jpg);
}
75%{
background-image: url(../resources/feature/Feature3.jpg);
}
75.01%{
background-image: url(../resources/feature/Feature4.jpg);
}
100%{
background-image: url(../resources/feature/Feature4.jpg);
}
}
You have to set the opacity and transition of the "sliders" to get the effect.
.feature {
}
.slider {
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 80vh;
transition: all .2s ease-in-out;
animation: slide 10s infinite;
}
.overlay {
color: #fff;
width: 100%;
height: 80vh;
background-color: rgba(0, 0, 0, 0.5);
transition: all .2s ease-in-out;
}
#keyframes slide {
0%{
opacity: 0;
background-color: red;
}
20%{
opacity: 1;
background-color: red;
}
25%{
opacity: 0;
background-color: red;
}
25.1%{
opacity: 0;
background-color: blue;
}
45%{
opacity: 1;
background-color: blue;
}
50%{
opacity: 0;
background-color: blue;
}
50.01%{
opacity: 0;
background-color: yellow;
}
70%{
opacity: 1;
background-color: yellow;
}
75%{
opacity: 0;
background-color: yellow;
}
75.01%{
opacity: 0;
background-color: green;
}
95%{
opacity: 1;
background-color: green;
}
100%{
opacity: 0;
background-color: green;
}
}
<div class="slider">
<div class="feature">
</div>
<div class="overlay">
</div>
</div>
Just change the line
animation: slide 10s infinite;
to
animation: slide 20s infinite;
and it would give some time for transition.
you can try to manege animation Opacity and no any other way to create this slider will show & transition.
#keyframes slide {
0%{
background-image: url(https://image.flaticon.com/sprites/new_packs/178146-business-strategy.png);
}
48%{ opacity:0;
}
50%{
opacity:1;
background-image: url(https://images-eu.ssl-images-amazon.com/images/I/51TxXo0RLgL.png);
}
97%{ opacity:1;
98%{ opacity:0;
100%{
opacity:1;
background-image: url(https://image.flaticon.com/sprites/new_packs/178146-business-strategy.png);
}
}
https://jsfiddle.net/m4tsudc7/21/
I have been trying this multiple ways with no success. JavaScript, TweenLite, etc. I need to alternate two <div> tags, slide1 & slide2, that live inside slide. Fading one out to fading one in. A continuous loop. I can use a basic css #keyframes animation like bellow. It works fine, but they are clickable links and one <div> will always remain on top.
Is there a way to loop the z-index of each div in the #keyframes anim?
Or maybe a completely better method?
CSS
.slider {
max-width: 300px;
height: 200px;
margin: 20px auto;
position: relative;
}
.slide1,.slide2 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
animation:fade 8s infinite;
-webkit-animation:fade 8s infinite;
}
.slide2 {
animation:fade2 8s infinite;
-webkit-animation:fade2 8s infinite;
}
#keyframes fade
{
0% {opacity:1}
33.333% { opacity: 0}
66.666% { opacity: 0}
100% { opacity: 1}
}
#keyframes fade2
{
0% {opacity:0}
33.333% { opacity: 1}
66.666% { opacity: 0 }
100% { opacity: 0}
}
HTML
<div class="slider">
<div class="slide1"></div>
<div class="slide2"></div>
</div>
They seem to be working for me, check it out: https://codepen.io/giovannipds/pen/LzgYaa
<style>
.slider {
line-height: 1.5;
height: 200px;
margin: 20px auto;
position: relative;
width: 300px;
}
.slide {
padding: 20px;
position: absolute;
width: 100%;
height: 100%;
}
.slide,
.slide a {
color: #fff;
}
.slide1 {
animation: fade 8s infinite;
background: red;
}
.slide2 {
animation: fade2 8s infinite;
background: blue;
}
#keyframes fade
{
0% { opacity: 1 ; z-index: 2; }
33.333% { opacity: 0; z-index: 1; }
66.666% { opacity: 0; z-index: 1; }
100% { opacity: 1; z-index: 2; }
}
#keyframes fade2
{
0% { opacity: 0; z-index: 1; }
33.333% { opacity: 1; z-index: 2; }
66.666% { opacity: 1; z-index: 2; }
100% { opacity: 0; z-index: 1; }
}
</style>
<div class="slider">
<div class="slide slide1">
<ul>
<li>Google</li>
<li>Globo.com</li>
</ul>
</div>
<div class="slide slide2">
<ul>
<li>Love Mondays</li>
<li>Hotmail</li>
</ul>
</div>
</div>
I'm trying to create an animated text like bellow using css, how can i do this?
I already tried this:
span1 {
display: inline-block;
color: #e74c3c;
position: relative;
white-space: nowrap;
top: 0;
left: 0;
-webkit-animation: move 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 1s;
}
#keyframes move {
0% {
top: 0px;
}
20% {
top: -50px;
}
40% {
top: -100px;
}
60% {
top: -150px;
}
80% {
top: -200px;
}
100% {
top: -300px;
}
}
<span1>
web developer<br /> css cowboy<br /> self-facilitating media node<br /> box inside a box<br /> part of the problem
</span1>
but it has a delay after last text that i need to remove!
See This:
*{
box-sizing: border-box;
}
body {
background-color: skyblue;
}
div {
overflow: hidden;
color: #fff;
text-align: center;
font-size: 20px;
position: relative;
height: 100px;
margin-top: 100px;
}
div p {
height: 100px;
animation: move 7s infinite linear;
position: relative;
bottom: -100px;
font-size: 36px;
margin: 0;
}
#keyframes move {
0% {bottom: -100px;}
10%, 20% {bottom: 0px}
40%,50% {bottom: 100px;}
70%,80% {bottom: 200px;}
100% {bottom: 300px}
}
<div>
<p>50% OFF</p>
<p>Some Text</p>
<p>Write by: Ehsan Taghdisi</p>
</div>
.anim1 {
animation: anim1 1.5s infinite;
}
.anim2 {
animation: anim2 1.5s infinite;
}
#keyframes anim1 {
0% {
transform: translateY(-10px);
}
50% {
transform: translateY(-80px);
}
100% {
transform: translateY(-10px);
}
}
#keyframes anim2 {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-80px);
}
100% {
transform: translateY(0px);
}
}
<div style="height:40px;overflow:hidden">
<h1 class="anim1">Hello animation 1</h1>
<h1 class="anim2">Hello animation 2</h1>