This question already has answers here:
'transform3d' not working with position: fixed children
(10 answers)
Closed 3 years ago.
I have an element, that appears in the page with fade-in animation. Element has an overlay on the whole page when it is clicked (something like modal). It works fine in every browser except Firefox.
Removing animation-fill-mode: both fixes the problem, but I need this property.
const element = document.getElementById('element');
let isClicked = false;
element.addEventListener('click', handleClick, false);
function handleClick() {
if (isClicked) {
element.classList.add('isVisible');
} else {
element.classList.remove('isVisible');
}
isClicked = !isClicked;
}
.element {
width: 200px;
height: 40px;
background: red;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
animation-delay: 100ms;
animation-timing-function: ease;
animation-duration: 200ms;
animation-name: fadeIn;
/* animation-fill-mode: both; */
}
.isVisible {
::after {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: tomato;
z-index: -1;
animation-timing-function: ease;
animation-duration: 300ms;
animation-name: fadeIn;
}
}
#keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
<div class="element" id="element">
<p>
element
</p>
</div>
Please add animation delay for that.. it will may be work.
css
.element {
animation-delay: 1s;
}
Related
I'm hiding an element which holds text with position absolute since some screen readers won't read it if the opacity is zero. I want to use a fade in animation like the first box, so I used a simple animation function, but I can't get the fade out animation to work. Do you guys know why?
Thanks in advance!
p {
color: red;
}
.card {
position: relative;
width: 100px;
height: 100px;
text-align: center;
border: 2px solid red;
}
.card.using-opacity .text-container {
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.card.using-opacity:hover .text-container {
opacity: 1;
}
.card.using-position-absolute .text-container {
position: absolute;
top: -9999px;
left: -9999px;
width: 100%;
-webkit-animation: fadeOut 1s;
animation: fadeOut 1s;
}
.card.using-position-absolute:hover .text-container {
top: 0px;
left: 0px;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<p>This is how it's supposed to work in terms of animation/transition but it's not accessible</p>
<div class="card using-opacity">
<div class="text-container">
<p>Some text</p>
</div>
</div>
<p>This is accessible, but I can't get the mouse out animated</p>
<div class="card using-position-absolute">
<div class="text-container">
<p>Some text</p>
</div>
</div>
This the css for my modal overlay and the container
.overlay {
position: fixed;
background-color: rgba(20, 20, 21, 0.5);
top: 0;
left: 0;
right: 0;
bottom: 0;
animation-name: fadeIn;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-duration: 350ms;
animation-timing-function: ease-in-out;
}
.container {
background: var(--color-white);
max-height: 94vh;
max-width: 62.5rem;
z-index: 2;
transform: none;
border-radius: 4px;
overflow: hidden;
animation-name: slideUp;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-duration: 350ms;
animation-timing-function: var(--animation-sharp);
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes slideUp {
from {
opacity: 0;
transform: translateY(50%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
Basically, the overlay will fade in and at the same time the container will slide up. At moment, when the modal is being opened, animation is working as expect but there's no animation at all when it's being closed. How can I make sure that there will be reverse animation when closing? So when closing, the container will slide down and overlay will fade out.
I want to animate opacity from 0 to 1 so it show fade out to white animation, First I've used before pseudo element but it didn't work so I replaced it with div but got the same results here is the code:
body {
background: black;
}
.tv {
height: 100vh;
position: relative;
}
.white {
height: 100%;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: white;
z-index: 1;
opacity: 0;
/* infinite while debugging */
animation: opacity 5s ease-out infinite;
animation-fill-mode: forwards;
}
#keyframes opacity {
0%: { opacity: 0 }
100%: { opacity: 1; }
}
<div class="tv">
<div class="white"></div>
</div>
My first keyframe was like this:
#keyframes opacity {
to: { opacity: 1; }
}
What's wrong with this animation?
Remove colons after 0% and 100% and you will get the animation. Try like this:
#keyframes opacity {
0% { opacity: 0 }
100% { opacity: 1; }
}
I'm trying to slide a few elements one after the other on the page.
Basically, I need to slide the first element in, and then the second after and then the third one etc etc.
Something like this:
This is what i have so far:
https://jsfiddle.net/npvsrkcy/3/
In the fiddle above, all the elements/images will slide in all at the same time which is not what i am looking for.
This is my entire code:
img {
position: relative;
margin-left: 0%;
margin: 1em;
animation: slide 4s 1;
width:100%;
}
#keyframes slide {
from { right: -150%; }
to { right: 0%; }
}
Could someone please advise on this?
EDIT:
Ok, since I'm trying to use the slide animation on dynamically created elements, I can't use the normal nth-child~(number) scenario.
So I tried to do this:
img:nth-child(1n+3) {
-webkit-animation-delay: 0;
animation-delay: 0;
}
img:nth-child(2n+2) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
img:nth-child(3n+3) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
but that seems to only work for the first 3 elements/images!
This is the new fiddle: https://jsfiddle.net/npvsrkcy/9/
You might try to leverage the nth-child(number) selector to delay the animation, like so:
img {
position: relative;
margin-left: 0%;
margin: 1em;
animation: slide 4s 1;
width:100%;
/* Fix the elements being visible before the animation */
opacity: 0;
/* After the animation remain visible */
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
}
img:nth-child(1) {
-webkit-animation-delay: 0;
animation-delay: 0;
}
img:nth-child(2) {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
img:nth-child(3) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#keyframes slide {
from { right: -150%; opacity: 0;}
to { right: 0%; opacity: 1; }
}
This would delay the animation of the second and third image element by the set amount of seconds.
Hope it helps!
Edit: just played with the fiddle, and it seems that an edit to the animation would be desirable to prevent them from showing before loading. Allow me to come up with a fix;
Edit 2: Fixed it by setting the animation-fill-mode to forwards and added an opacity effect. Another solution would be to place the image off-screen to starty with.
PS. Some further info:
https://www.w3schools.com/cssref/sel_nth-child.asp
you can try this :
img {
position: relative;
margin-left: 0%;
margin: 1em;
animation: Aslide 4s 1;
width:100%;
}
img + img {
animation: Bslide 4s 1;
}
img + img + img {
animation: Cslide 4s 1;
}
#keyframes Aslide {
0% { right: -150%; }
33.333333% { right: 0%; }
66.666666% { right: 0%;}
100% { right: 0%;}
}
#keyframes Bslide {
0 { right: -150%; }
33.333333% { right: -150%; }
66.666666% { right: 0%;}
100% { right: 0%;}
}
#keyframes Cslide {
0% { right: -150%; }
33.333333% { right: -150%; }
66.666666% { right: -150%; }
100% { right: 0%;}
}
Delay the animation for each div (and)
Add a fill-mode and set right value to -150% for img tag by default
img {
position: relative;
margin-left: 0%;
margin: 1em;
animation: slide 4s 1 forwards;
width:100%;
right: -150%;
}
img:nth-child(1) {
animation-delay:0s;
}
img:nth-child(2) {
animation-delay:1s;
}
img:nth-child(3) {
animation-delay:2s;
}
#keyframes slide {
from { right: -150%; }
to { right: 0%; }
}
is it possible to use css keyframes animation to pseudo-element such as 'before' and 'after'?
I am developing webservice for smartphone, and want to blink element. but do not want to blink element itself.
so, ways I came up with are two;
one is to cover element with another element, and blink that element;
and another is to use pseudo-element, but it seems not working.
css:
.fadeElement {
background-color: #000000;
width: 60px;
height: 60px;
}
.fadeElement:after {
display: block;
content: '';
position: relative;
height: 100%;
width: 100%;
z-index: 500;
background-color: rgba(249, 4, 0, 0.5);
animation-name: 'fade';
animation-duration: 2s;
animation-iteration-count: infinite;
-webkit-animation-name: 'fade';
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
#keyframes 'fade' {
0% {
opacity: 0;
}
40% {
opacity: 0.5;
}
60% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes 'fade' {
0% {
opacity: 0;
}
40% {
opacity: 0.5;
}
60% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}
html:
<div class="fadeElement"></div>
Firefox, Chrome, and IE10+ support this.
See more info at Chris Coyier's site: http://css-tricks.com/transitions-and-animations-on-css-generated-content/