I am trying to show or hide the title of sidepanel while collapsing it to width:50%
I am using display: block to display:none;
Somehow I am not able to use the animation on it
Here is the code I am using
.fade-in {
animation: fade-in 0.5s ease-in-out both;
}
.fade-out {
animation: fade-out 0.6s ease-in-out both;
}
#keyframes fade-in {
0% {
opacity: 1;
display: block;
}
100% {
opacity: 0;
display: none;
}
}
#keyframes fade-out {
0% {
opacity: 0;
display: none;
}
100% {
opacity: 1;
display: block;
}
}
Any idea why display is not working
.fade-in {
animation: fade-in 0.5s ease-in-out both;
background:black;
height:200px;
width:200px;
margin-bottom:10px;
}
.fade-out {
animation: fade-out 0.6s ease-in-out both;
background:red;
height:200px;
width:200px;
}
#keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fade-out {
0% {
opacity: 1;
display: none;
}
100% {
opacity: 0;
}
}
<div class="fade-in"></div>
<div class="fade-out"></div>
Related
I have a React application that holds just a simple static website. I have some CSS animations using keyframes which work as expected when testing it in the node development server using npm start but when I push the project to my live site using Firebase hosting, all animations stop working as expected. The fade-in-* classes no longer slowly fade in, the text just 'pops' into place with no gradual opacity change. Can anyone see why this might be?
I have added -moz- and -webkit- keyframes also. This seems to be the case on all browsers. Tested in Edge, Chromew and Firefox, all give the same result.
main.css
.font-big {
font-size: 1.2rem!important;
}
.font-small {
font-size: 0.8rem;
}
.text-black {
color: black;
}
.hidden {
display: none;
}
.footer {
width: 100%;
height: 60px;
line-height: 60px;
background-color: #f5f5f5;
}
.welcome-fade-in {
-moz-animation: fade-in-welcome 1s ease-in;
-webkit-animation: fade-in-welcome 1s ease-in;
animation: fade-in-welcome 1s ease-in;
}
.welcome-name-in {
-moz-animation: fade-in-welcome-name 2s ease-in;
-webkit-animation: fade-in-welcome-name 2s ease-in;
animation: fade-in-welcome-name 2s ease-in;
}
.welcome-text-in {
-moz-animation: fade-in-welcome-text 3s ease-in;
-webkit-animation: fade-in-welcome-text 3s ease-in;
animation: fade-in-welcome-text 3s ease-in;
}
.welcome-text-explore {
-moz-animation: fade-in-explore-text 4s ease-in;
-webkit-animation: fade-in-explore-text 4s ease-in;;
animation: fade-in-explore-text 4s ease-in;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-image: url("./bg.gif");
}
#keyframes fade-in-welcome {
0% {
opacity: 0;
}
100% {
opacity: 100%;
}
}
#keyframes fade-in-welcome-name {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 100%;
}
}
#keyframes fade-in-welcome-text {
0% {
opacity: 0;
}
70% {
opacity: 0;
}
100% {
opacity: 100%;
}
}
#keyframes fade-in-explore-text {
0% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 100%;
}
}
#-moz-keyframes fade-in-welcome {
0% {
-moz-opacity: 0;
}
100% {
-moz-opacity: 100%;
}
}
#-moz-keyframes fade-in-welcome-name {
0% {
-moz-opacity: 0;
}
50% {
-moz-opacity: 0;
}
100% {
-moz-opacity: 100%;
}
}
#-moz-keyframes fade-in-welcome-text {
0% {
-moz-opacity: 0;
}
70% {
-moz-opacity: 0;
}
100% {
-moz-opacity: 100%;
}
}
#-moz-keyframes fade-in-explore-text {
0% {
-moz-opacity: 0;
}
75% {
-moz-opacity: 0;
}
100% {
-moz-opacity: 100%;
}
}
#-webkit-keyframes fade-in-welcome {
0% {
opacity: 0;
}
100% {
opacity: 100%;
}
}
#-webkit-keyframes fade-in-welcome-name {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 100%;
}
}
#-webkit-keyframes fade-in-welcome-text {
0% {
opacity: 0;
}
70% {
opacity: 0;
}
100% {
opacity: 100%;
}
}
#-webkit-keyframes fade-in-explore-text {
0% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 100%;
}
}
Landing.js
import React, {Component} from 'react';
import {Link} from "react-router-dom";
import * as ROUTES from "../constants/routes";
class Landing extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="container d-flex justify-content-center h-100">
<div className="row align-self-center">
<div className="col-12 text-center flex-wrap">
<h1 className="text-uppercase welcome-fade-in">Welcome to my website</h1>
<h2 className="welcome-name-in">My name is Adam Foot</h2>
<h3 className="welcome-text-in">A Front-End Developer from Stroud</h3>
<Link to={ROUTES.HOME} className="text-decoration-none text-black align-self-end"><h4 className="welcome-text-explore">Explore >>></h4></Link>
</div>
</div>
</div>
);
}
}
export default Landing;
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
Using UI Bootstrap, I have a modal window as shown below. As per normal behavior, the rest of the site is shaded with a backdrop when the modal is opened, a shown below:
This modal itself can open another second modal. When this happens, the first modal is shaded in the same color as the rest of the site, as shown below:
However, my desired behavior when the second modal is open is for the rest of the site to have a darker shade for the backdrop and the first modal to have the normal shading. For example, this effect can be seen with two modals are opened in Twitter, as shown below:
This is the code that is used to display the first modal:
$rootScope.modalInstance = $uibModal.open({
templateUrl: 'WebApp/modalOne.html',
controller: 'modalOneController',
backdrop: 'static',
windowClass: 'app-modal-window'
});
And this displays the second modal:
$rootScope.modalInstance = $uibModal.open({
templateUrl: 'WebApp/modalTwo.html',
controller: 'modalTwoController',
backdrop: 'true',
windowClass: 'center-modal',
animation: false
});
And this is the relevant CSS:
.modal-backdrop,
.modal {
opacity: 0;
}
.app-modal-window.modal.in-add {
-webkit-animation: fadeIn 0.3s ease-out;
animation: fadeIn 0.3s ease-out;
}
.modal.in {
opacity: 1;
}
.modal-backdrop.in-add {
-webkit-animation: fadeIn 0.3s ease-out;
animation: fadeIn 0.3s ease-out;
}
.modal-backdrop.in {
animation: fadeInBackdrop 0.3s !important;
}
.modal-backdrop.in {
filter: alpha(opacity=50);
opacity: .5;
}
.modal.in {
opacity: 1;
}
.app-modal-window.modal.in-remove {
-webkit-animation: fadeOut 0.2s ease-out;
animation: fadeOut 0.2s ease-out;
opacity: 0;
}
.modal-backdrop.in-remove {
-webkit-animation: fadeOutBackdrop 0.2s ease-out;
animation: fadeOutBackdrop 0.2s ease-out;
opacity: 0;
}
.modal.fade .modal-dialog, .modal.in .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadeInBackdrop {
from {
opacity: 0;
}
to {
opacity: 0.5;
}
}
#keyframes fadeInBackdrop {
from {
opacity: 0;
}
to {
opacity: 0.5;
}
}
#-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#-webkit-keyframes fadeOutBackdrop {
from {
opacity: 0.5;
}
to {
opacity: 0;
}
}
#keyframes fadeOutBackdrop {
from {
opacity: 0.5;
}
to {
opacity: 0;
}
}
.center-modal.modal {
text-align: center;
}
#media screen and (min-width: 768px) {
.center-modal.modal:before {
display: inline-block;
vertical-align: middle;
content: " ";
height: 100%;
}
}
.center-modal .modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
Regarding the CSS, please note that I had to do some experimenting to change UI Bootstap's default animation to my requirements. These requirements were to fade in/out both the backdrop and modal simultaneously with no vertical movement animation of the modal. Therefore, the CSS might be a little messy.
Any help/advice is appreciated.
Looking at Animista.net I would like to write some custom CSS animations. So I thought I would try by using one of their examples, and then tweaking it for my personal use.
.box {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation: fade-in 1.2s steps(80, end) both;
-moz-animation: fade-in 1.2s steps(80, end) both;
animation: fade-in 1.2s steps(80, end) both;
}
<div class="box"></div>
But I cannot get the animations to work at all.
What am I doing wrong?
Here you are. You must add animation.
#keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
Codepen
You also need to define the #keyframes to make the animation work. See the attached snippet.
.box {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation: fade-in 1.2s steps(80, end) both;
-moz-animation: fade-in 1.2s steps(80, end) both;
animation: fade-in 1.2s steps(80, end) both;
}
#-webkit-keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1.0;
}
}
#-moz-keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1.0;
}
}
#-o-keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1.0;
}
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1.0;
}
}
<div class="box"></div>
I try to use keyframe for show/hide menu with opacity and display property but the display property doesn't change at the end of animation..this is my code, here is the mistake?
#menu {
background-color: #c1e5ff;
position: fixed;
z-index: 10;
height: 100%;
width: 100%;
display: none;
-moz-animation: close_menu 600ms forwards;
-webkit-animation: close_menu 600ms forwards;
-o-animation: close_menu 600ms forwards;
-ms-animation: close_menu 600ms forwards;
animation: close_menu 600ms forwards;
}
#menu.open {
display: block;
-moz-animation: open_menu 600ms forwards;
-webkit-animation: open_menu 600ms forwards;
-o-animation: open_menu 600ms forwards;
-ms-animation: open_menu 600ms forwards;
animation: open_menu 600ms forwards;
}
#-moz-keyframes open_menu {
0% {
opacity:0;
display: none;
}
1% {
opacity:0;
display: block;
}
100% {
opacity:1;
display: block;
}
}
#-webkit-keyframes open_menu {
0% {
opacity:0;
display: none;
}
1% {
opacity:0;
display: block;
}
100% {
opacity:1;
display: block;
}
}
#keyframes open_menu {
0% {
opacity:0;
display: none;
}
1% {
opacity:0;
display: block;
}
100% {
opacity:1;
display: block;
}
}
#-moz-keyframes close_menu {
0% {
opacity:1;
display: block;
}
99% {
opacity:0;
display: block;
}
100% {
opacity:0;
display: none;
}
}
#-webkit-keyframes close_menu {
0% {
opacity:1;
display: block;
}
99% {
opacity:0;
display: block;
}
100% {
opacity:0;
display: none;
}
}
#keyframes close_menu {
0% {
opacity:1;
display: block;
}
99% {
opacity:0;
display: block;
}
100% {
opacity:0;
display: none;
}
}
because Timing-Function too fast, no mistake
you should set more time at:
-webkit-animation: open_menu 4s forwards;