I would like each <div> to stay on screen for 8 sec before it fades out.
Also I would like them to fade into each other, opposed to fading to black and then the other fades in.
This works great thanks to #giovannipds except for a pop and not on screen for 8 sec. If you remove the z-index change it transitions clean.
.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; }
}
<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>
Old question but I was recently confronted with the same POP problem and I managed to solve it by separating the image and caption markup on each slide and by assigning separate cross-fade animations to each:
image animation (with opacity but without z-index) => just like fade and fade2 in the snippet above but without z-index; this actually solved the POP
caption animation (with both opacity and z-index) => just like fade and fade2 in the snippet above, this would address links or any other HTML you might want on top of image
Related
I have a VueJs component and 2 classes with animations.
I have a v-bind:class on a div, but when the class changes, the animation doesn't run.
When the update_page computed property changes, the class changes as well.
What am I doing wrong?
The div:
<div
class="top-0 right-0 bottom-0
absolute h-full bg-primary"
:class="update_page ? 'detail-header-hide' : 'detail-header'"
></div>
The css class:
.detail-header {
width: 0;
animation: fadeIn 1500ms;
}
.detail-header-hide {
width: 100%;
animation: fadeIn 1500ms;
animation-direction: reverse;
}
#keyframes fadeIn {
0% {
width: 100%;
}
60% {
width: 100%;
}
100% {
width: 0;
}
}
I know snippet looks bad, but i mean problem will be at reusing one animation. Try to add one more to your project like me at snippet ('fadeOut')
let x = document.querySelector('div')
function toggle(){
x.classList.toggle('detail-header-hide')
x.classList.toggle('detail-header')
}
.detail-header {
width: 0;
animation: fadeIn 1500ms;
}
.detail-header-hide {
width: 100%;
animation: fadeOut 1500ms;
}
#keyframes fadeIn {
0% {
width: 100%;
}
60% {
width: 100%;
}
100% {
width: 0;
}
}
#keyframes fadeOut {
0% {
width: 0%;
}
60% {
width: 0%;
}
100% {
width: 100%;
}
}
<div
class="detail-header-hide"
>Some text Some text Some text Some text Some text</div>
<button onClick='toggle()'> btn </button>
I have a working animation that starts on load with pure CSS. The problem with both opacity and visibility is that even if the div is hidden, it still takes up space.
Question
How can I make the div disapear like display: none after the animation is done?
Notes
I would prefer to have a pure CSS solution. The less hackish solution, the better.
I've seen similar questions, but not exactly this case and no good answers for this problem.
I use animation and not transition because it animates on load.
.message.success {
background: #28a745;
color: #fff;
animation: autohide 2s forwards;
padding: 1rem;
}
#keyframes autohide {
0% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="message success">
Success!
</div>
This text below is expected to jump up after animation is done.
You could use the height property to achieve this effect:
#keyframes autohide {
0% {
opacity: 1;
}
90% {
opacity: 1;
}
99% {
height: auto;
padding: 1rem;
}
100% {
opacity: 0;
height: 0;
padding: 0;
}
}
height is kept auto until near the end of the animation (99%), then set to 0 as it completes.
You could set to zero the padding and the font-size at the last keyframe
.message.success {
background: #28a745;
color: #fff;
animation: autohide 2s forwards;
padding: 1rem;
}
#keyframes autohide {
0% {
opacity: 1;
}
85% {
opacity: 1;
}
95% {
opacity: 0;
padding: 1rem;
font-size: inherit;
}
100% {
padding: 0;
font-size: 0;
opacity: 0;
}
}
<div class="message success">
Success!
</div>
This text below is expected to jump up after animation is done.
There you go i think this is what you want.
By giving height to 0 works perfectly with transition
.message.success {
background: #28a745;
color: #fff;
animation: autohide 2s forwards;
transition: height 2s ease;
}
#keyframes autohide {
0% {
opacity: 1;
height: auto;
}
90% {
opacity: 1;
height: auto;
}
100% {
opacity: 0;
height: 0;
}
}
<div class="message success">
Success!
</div>
This text below is expected to jump up after animation is done.
You can play with transition as per req.
The code below is a part of my code :
.myBox:hover::after {
animation-name: underline;
animation-duration: 350ms;
animation-fill-mode: forwards;
}
#keyframes underline {
from { width: 0; }
to { width: 100%; }
}
It works nicley, but I want to do it vice versa when animation completed, I mean when it finished then width should be 0 again, In fact for this part I want to do it when my element is not hovered. Which property can help me ?
You need to use alternate and run 2 iterations of the animation:
.box {
height:200px;
background:red;
animation: underline 500ms alternate 2 forwards;
}
#keyframes underline {
from { width: 0; }
to { width: 100%; }
}
<div class="box">
</div>
Or consider the use of transition if you want the effect on hover:
.box {
height: 200px;
background: red;
width: 0;
transition: 500ms;
}
body:hover .box {
width: 100%;
}
<div class="box">
</div>
You can specify multiple values for animations rather then from and to using percentage:
#keyframes underline {
0%, 100% { width: 0; }
50% { width: 100%; }
}
More detailed information can be found here.
.myBox:hover::after {
animation-name: underline infinite;
animation-duration: 350ms;
animation-fill-mode: forwards;
}
#keyframes underline {
from { width: 0; }
to { width: 100%; }
}
You infinite for this
I am trying to achieve a CSS only slider.
When hovering left and right arrows, the slider has to slide. Of course.
I tried something using animation-play-state, animation-fill-mode (to keep the positions) and animation-direction but I'm not able to fully make it work.
Starting with animation-play-state: paused, hovering the arrows changes it to running.
On hover of the right arrow, everything is fine. We can hover, leave, hover again.
But, as soon as I hover the left arrow (that changes the animation-direction to reverse), it's broken.
Simplified snippet:
.wrapper {
overflow: hidden;
position: relative;
width: 500px;
}
.arrows {
z-index: 2;
position: absolute;
top: 0;
height: 100%;
background: #ddd;
opacity: 0.66;
}
.arrows:hover {
opacity: 1;
}
.arrow-l {
left: 0;
}
.arrow-r {
right: 0;
}
.sliding {
height: 160px;
width: 2000px;
background: linear-gradient(to bottom right, transparent 49.9%, gray 50.1%);
animation: slide 2s linear;
animation-play-state: paused;
animation-fill-mode: both;
}
.arrows:hover~.sliding {
animation-play-state: running;
}
.arrow-l:hover~.sliding {
animation-direction: reverse;
}
#keyframes slide {
0% {
transform: translate(0px, 0);
}
100% {
transform: translate(-1500px, 0);
}
}
<div class="wrapper">
<div class="arrows arrow-l">[ ← ]</div>
<div class="arrows arrow-r">[ → ]</div>
<div class="sliding"></div>
</div>
Can someone help me understand what is happening, and correct this unwanted behaviour?
The main issue here is that changing the direction will keep the current state of the animation BUT it will consider the new direction. Let's take an easy example:
Suppose you have an animation from left:0 to left:100%. If you first run the animation untill left:80% and then you change the direction to reverse you will have left:20%!
Why?
Because with the default direction you reached the 80% (left:80%) of the animation and 80% of the same animation with reverse direction is simply left:20%.
Hover on reverse and you will see that the position of the box is jumping to switch to the new state considering the new direction. It's obvious when the animation ends and you will be switching between the first and last state:
.sliding {
width:100px;
height:100px;
background:red;
left:0%;
position:relative;
animation:slide 5s linear forwards;
animation-play-state:paused;
}
.arrows {
margin:20px;
}
.arrow-r:hover~.sliding {
animation-play-state: running;
}
.arrow-l:hover~.sliding {
animation-direction: reverse;
}
#keyframes slide {
0% {
left: 0%;
}
100% {
left: 100%;
}
}
<div class="wrapper">
<div class="arrows arrow-r">move normal</div>
<div class="arrows arrow-l">reverse !!</div>
<div class="sliding"></div>
</div>
There is no fix for this since it's the default behavior of animation, but instead you can rely on transition to obtain a similar effect. The trick is to play with the duration that you increase/decrease to create the needed effect.
Here is an idea:
.wrapper {
overflow: hidden;
position: relative;
width: 500px;
}
.arrows {
z-index: 2;
position: absolute;
top: 0;
height: 100%;
background: #ddd;
opacity: 0.66;
}
.arrows:hover {
opacity: 1;
}
.arrow-l {
left: 0;
}
.arrow-r {
right: 0;
}
.sliding {
height: 160px;
width: 2000px;
background: linear-gradient(to bottom right, transparent 49.9%, gray 50.1%);
transition:all 2000s linear; /*This will block the current state*/
}
.arrow-r:hover ~ .sliding {
transform: translate(-1500px, 0);
transition:all 2s;
}
.arrow-l:hover ~ .sliding {
transform: translate(0px, 0);
transition:all 2s;
}
<div class="wrapper">
<div class="arrows arrow-l">[ ← ]</div>
<div class="arrows arrow-r">[ → ]</div>
<div class="sliding"></div>
</div>
I'm building something that is using the css slide animation to have some text slide in when the text display is set to "block", but I was wondering how I would go about doing the reverse (sliding it out) when it is set to "none"? Is it possible to slide in and slide out with CSS animations, or would I have to use Javascript?
Hope that makes sense! Let me know if you have any questions!
JSfiddle of give you a better idea https://jsfiddle.net/qjwqL236/
Thanks!
And code below:
document.getElementById("in-button").onclick = function(){
document.getElementById("text-container").style.display = "block";
}
document.getElementById("out-button").onclick = function(){
document.getElementById("text-container").style.display = "none";
}
#text-container{
height: 30px;
width:300px;
color: white;
background-color: blue;
float:left;
display:none;
position: relative;
left: -300px;
animation: slide 0.5sforwards;
-webkit-animation: slide 0.5s forwards;
}
#-webkit-keyframes slide {
100% {
left: 0;
}
}
#keyframes slide {
100% {
left: 0;
}
}
#in-button{
float:left;
}
#out-button{
float:left;
}
<button id="in-button">
Make Div slide in
</button>
<button id="out-button">
Make Div slide out?
</button>
<br>
<br>
<div id="text-container">
This is some text in a div.
</div>
In your case. It's easier to use transition than animation. This is how it works.
Everytime the button is click. It changes the value of the left property.
<button id="in-button">
Make Div slide in
</button>
<button id="out-button">
Make Div slide out?
</button>
<br>
<br>
<div id="text-container">
This is some text in a div.
</div>
CSS
#text-container{
height: 30px;
width:300px;
color: white;
background-color: blue;
float:left;
position: relative;
left: -400px;
transition: all 0.3s linear
}
#in-button, #out-button{
float:left;
}
JS
var tC = document.getElementById('text-container');
document.getElementById("in-button").onclick = function(){
tC.style.left = '0';
}
document.getElementById("out-button").onclick = function(){
tC.style.left = '-400px';
}
Working fiddle: https://jsfiddle.net/qjwqL236/1/
You should use css translate because it's more performant than positioning and then you need an animation in and an animation out that you can trigger with a class change instead of the display property.
document.getElementById("in-button").onclick = function(){
document.getElementById("text-container").className = "in";
}
document.getElementById("out-button").onclick = function(){
document.getElementById("text-container").className = "out";
}
#text-container{
height: 30px;
width: 300px;
color: white;
background-color: blue;
transform: translateX(-310px);
}
#text-container.in {
animation: in 0.5s both;
-webkit-animation: in 0.5s both;
}
#text-container.out {
animation: out 0.5s both;
-webkit-animation: out 0.5s both;
}
#-webkit-keyframes in {
100% {
transform: translateX(0);
}
}
#keyframes in {
100% {
transform: translateX(0);
}
}
#-webkit-keyframes out {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-310px);
}
}
#keyframes out {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-310px);
}
}
#in-button{
float:left;
}
#out-button{
float:left;
}
<button id="in-button">
Make Div slide in
</button>
<button id="out-button">
Make Div slide out?
</button>
<br>
<br>
<div id="text-container">
This is some text in a div.
</div>
Here is what you can do using animations. You need to create a slide-out animation just like you have a slide-in.
Note that it won't slide in/out automatically when you change the display to none or block.
document.getElementById("in-button").onclick = function() {
document.getElementById("text-container").setAttribute('class', 'slide-in');
}
document.getElementById("out-button").onclick = function() {
document.getElementById("text-container").setAttribute('class', 'slide-out');
}
#text-container {
height: 30px;
width: 300px;
color: white;
background-color: blue;
float: left;
position: relative;
left: -300px;
}
.slide-in {
animation: slide-in 0.5s forwards;
-webkit-animation: slide-in 0.5s forwards;
}
.slide-out {
animation: slide-out 0.5s forwards;
-webkit-animation: slide-out 0.5s forwards;
}
#-webkit-keyframes slide-in {
100% {
left: 0;
}
}
#keyframes slide-in {
100% {
left: 0;
}
}
#-webkit-keyframes slide-out {
0% {
left: 0;
}
100% {
left: -300px;
}
}
#keyframes slide-out {
0% {
left: 0;
}
100% {
left: -300px;
}
}
#in-button {
float: left;
}
#out-button {
float: left;
}
<button id="in-button">
Make Div slide in
</button>
<button id="out-button">
Make Div slide out?
</button>
<br>
<br>
<div id="text-container">
This is some text in a div.
</div>