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.
Related
I'm using css to make an image appear after a certain delay time. I want to make it disappear after another delay time. I have the appear part working, but once I add the disappear part, neither of them work. Can someone tell me what I'm doing wrong, please?
html:
<img class="anim-object anim-smallcar bluebag" src="img/bluebag.gif" />
css:
.bluebag {
position: absolute;
bottom: 160px;
left: 42.25%;
opacity: 0;
animation-name: opacityOn;
animation-duration: 100ms;
animation-delay: 13.7s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-name: opacityOff;
animation-duration: 100ms;
animation-delay: 17.7s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
#keyframes opacityOn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes opacityOff {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
You can add more CSS animation iterations while changing the value of your opacity on the #keyframes the 0% to 25% to 50% to 75% and finally 100%
.bluebag {
opacity: 0;
background: blue;
height: 100px;
width: 100px;
animation: opacityOn 5s normal forwards;
animation-delay: 2s;
}
#keyframes opacityOn {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
50% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="anim-object anim-smallcar bluebag" src="img/bluebag.gif">aa</div>
The only change I would make to Alexandre's code is to make the opacity keyframe all one thing like this:
#keyframes opacityOnAndOff {
0% {
opacity: 0;
}
50%{
opacity: 1;
}
100% {
opacity: 0;
}
}
Depending on how long you want to spend on going to full opacity and then clearing out, you can change the percentages, so if you want a longer closing, you could change the code above to something like
#keyframes opacityOn {
0% {
opacity: 0;
}
30%{
opacity: 1;
}
100% {
opacity: 0;
}
}
Something like that ?
.bluebag {
opacity: 0;
background: blue;
height: 100px;
width: 100px;
animation: opacityOn 1s normal forwards step-end;
animation-delay: 2s;
}
#keyframes opacityOn {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="anim-object anim-smallcar bluebag" src="img/bluebag.gif">aa</div>
CSS is not an iterative language. When you write that:
animation-name: opacityOn;
animation-duration: 100ms;
animation-delay: 13.7s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-name: opacityOff;
animation-duration: 100ms;
animation-delay: 17.7s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
your second section override the first one.
I'm trying to animate a pseudo class before the parent class.
For example,
.parent {
opacity: 0;
animation: fadeIn 1s linear 2s;
animation-fill-mode: forwards;
&:before {
content: 'something';
position: absolute;
left: 50%;
opacity: 0;
visibility: hidden;
animation: fadeInOut 2s linear;
animation-fill-mode: forwards;
}
#keyframes fadeInOut {
0% {
opacity: 0;
visibility: visible;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
visibility: hidden;
}
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
So in my mind, this should fade in and out something then parent gets loaded.. however, that's not the case... I tried taking out visibility but still fails... what am I doing wrong?
I have added on my site loading animation prepared in CSS code. I have a problem because when the animation ends it all on the page is locked and nothing can be a click away.
.loader2 {
height: 100%;
position: absolute;
top: 0;
z-index: 400;
width: 100%;
-webkit-animation: loader2 2s linear 0s;
-moz-animation: loader2 2s linear 0s;
-o-animation: loader2 2s linear 0s;
animation: loader2 2s linear 0s;
}
#-webkit-keyframes loader2{ 0%{ background-color: #0000FF; opacity: 1; }
100%{ background-color: #ffffff; opacity: 0; }}
and in html (at the bottom of the code): <div class="loader2"></div>
I solved this problem, but it adds additional animations, which I do not need.
#-webkit-keyframes loader2{ 0%{ background-color: #0000FF; opacity: 1; width: 100%; }
100%{ background-color: #ffffff; opacity: 0; width: 0%; }}
try to change the z-index property on the last keyframe, setting a negative value
#-webkit-keyframes loader2{
0% { background-color: #0000FF; opacity: 1; z-index: 400; }
99.9% { background-color: #ffffff; opacity: 0; z-index: 400; }
100% { z-index: -1; }
}
I am having a look at CSS3 keyframes and want to have a box that eases in then eases out for the specified iteration-count, this is what I have so far it eases in then disappears then eases in again.
I want the box to ease in then ease out. See my fiddle. What do I need to do to achieve this?
<div id="content">
<span class="aniamte"></span>
</div>
#keyframes reset {
0% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes fade-in {
0% { opacity: 0; }
60% { opacity: 0; }
100% { opacity: 1; }
}
.aniamte {
background: red;
display: inline-block;
height: 100px;
width: 100px;
animation-name: reset, fade-in;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: 5;
animation-delay: 0, 1s;
}
I believe you're looking for animation-direction:alternate, but your question is not very clear. This will make your element use the keyframes from 0% to 100% for the specified duration then go from 100% to 0% after the first iteration is complete
#keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
.animate {
background: red;
display: inline-block;
height: 100px;
width: 100px;
animation-name: fade-in;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-direction:alternate;
animation-iteration-count: 5;
}
Demo
I'm trying to create a rotating background using css keyframe animation, but I can't get it to rotate at all. I'm not to sure what I'm getting wrong.
Here's my code:
.main-header {
width: 100%;
Height: 128px;
}
.main-header, background {
position: absolute;
z-index: -1;
top: -1px;
height: 248px;
background-color: #ffffff;
background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPgoJPHJhZGlhbEdyYWRpZW50IGlkPSdnJyBjeD0nNTAlJyBjeT0nNTAlJyByPSc1MCUnPgoJCTxzdG9wIG9mZnNldD0nMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiNmZmZmZmY7JyAvPgoJCTxzdG9wIG9mZnNldD0nNTAlJyBzdHlsZT0nc3RvcC1jb2xvcjojNTJjNWZmOycgLz4KCQk8c3RvcCBvZmZzZXQ9JzEwMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiMwNzkxYjM7JyAvPgoJPC9yYWRpYWxHcmFkaWVudD4KCTxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbGw9J3VybCgjZyknLz4KCTxzdmcgeD0nNTAlJyB5PSc1MCUnIG92ZXJmbG93PSd2aXNpYmxlJz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgyMCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSg0MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSg2MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSg4MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgxMDApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMTIwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDE0MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgxNjApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMTgwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDIwMCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgyMjApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMjQwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDI2MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgyODApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMzAwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDMyMCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgzNDApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMzYwKScvPgoJPC9zdmc+Cjwvc3ZnPg==');
-webkit-animation-name: spin;
-webkit-animation-duration: 40000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 40000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 40000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-transition: rotate(3600deg);
}
#-webkit-keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Here is a JSEDIT link as requested: http://jsbin.com/OMeSaGAp/1/edit
Most probably, that is not what you want, but here you got it working in Chrome
fiddle
You missed the webkit in the transform
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
Most probably you want something like that
changed demo (webkit)
CSS
.main-header {
width: 100%;
Height: 128px;
}
.main-header {
position: absolute;
z-index: -1;
top: -1px;
height: 248px;
overflow: hidden;
}
.main-header:after {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPgoJPHJhZGlhbEdyYWRpZW50IGlkPSdnJyBjeD0nNTAlJyBjeT0nNTAlJyByPSc1MCUnPgoJCTxzdG9wIG9mZnNldD0nMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiNmZmZmZmY7JyAvPgoJCTxzdG9wIG9mZnNldD0nNTAlJyBzdHlsZT0nc3RvcC1jb2xvcjojNTJjNWZmOycgLz4KCQk8c3RvcCBvZmZzZXQ9JzEwMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiMwNzkxYjM7JyAvPgoJPC9yYWRpYWxHcmFkaWVudD4KCTxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbGw9J3VybCgjZyknLz4KCTxzdmcgeD0nNTAlJyB5PSc1MCUnIG92ZXJmbG93PSd2aXNpYmxlJz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgyMCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSg0MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSg2MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSg4MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgxMDApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMTIwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDE0MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgxNjApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMTgwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDIwMCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgyMjApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMjQwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDI2MCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgyODApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMzAwKScvPgoJCTxyZWN0IHdpZHRoPScyMDAwJScgaGVpZ2h0PScyMDAwJScgZmlsbC1vcGFjaXR5PScwLjEnIGZpbGw9JyNmZmZmZmYnIHRyYW5zZm9ybT0ncm90YXRlKDMyMCknLz4KCQk8cmVjdCB3aWR0aD0nMjAwMCUnIGhlaWdodD0nMjAwMCUnIGZpbGwtb3BhY2l0eT0nMC4xJyBmaWxsPScjZmZmZmZmJyB0cmFuc2Zvcm09J3JvdGF0ZSgzNDApJy8+CgkJPHJlY3Qgd2lkdGg9JzIwMDAlJyBoZWlnaHQ9JzIwMDAlJyBmaWxsLW9wYWNpdHk9JzAuMScgZmlsbD0nI2ZmZmZmZicgdHJhbnNmb3JtPSdyb3RhdGUoMzYwKScvPgoJPC9zdmc+Cjwvc3ZnPg==');
-webkit-animation-name: spin;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes spin {
from {
-webkit-transform: scale(1.5) rotate(-10deg);
}
to {
-webkit-transform: scale(1.5) rotate(10deg);
}
}
I have displayed the image in a pseudo element that rotates inside the base element. this one has clip enabled, and to have enough image everywhere, I applied a zoom, and limited the degrees of rotation.