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;
Related
it works fine on desktop but on mobile im getting the static state instead of the fading in and out.
I put the code here...
https://codepen.io/anon/pen/jvKZGW
#keyframes flickerAnimation {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-o-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-moz-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-webkit-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
.loading {
-webkit-animation: flickerAnimation 1s infinite;
-moz-animation: flickerAnimation 1s infinite;
-o-animation: flickerAnimation 1s infinite;
animation: flickerAnimation 1s infinite;
background: #215c87;
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
top: 10px;
right: 10px;
}
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>
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'm trying to create a fullscreen slideshow:
http://codepen.io/jdvs1/pen/ZbpJvJ
There's a really long delay between the first slide and the second slide, about a second of a blank, black screen
I want the transition between images to be relatively quick, <1s, and not include a delayed view of a blank, black screen. How can I do this? I've been playing around with the keyframes for hours.
Here's the HTML:
<html>
<body>
<ul class="slideshow">
<li>
<h3>The Seasons</h3>
<!-- By Keven Law from Los Angeles, USA (Long Hot Summer......) [CC-BY-SA-2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons, http://commons.wikimedia.org/wiki/File%3AFlickr_-_law_keven_-_Long_Hot_Summer.......jpg -->
<span>Summer</span>
</li>
<li>
<!-- By http://www.ForestWander.com [CC-BY-SA-3.0-us (http://creativecommons.org/licenses/by-sa/3.0/us/deed.en)], via Wikimedia Commons, http://commons.wikimedia.org/wiki/File%3ARed-fall-tree-lake_-_West_Virginia_-_ForestWander.png -->
<span>Fall</span>
</li>
<li>
<!-- By Valerii Tkachenko [CC-BY-2.0 (http://creativecommons.org/licenses/by/2.0)], via Wikimedia Commons, http://commons.wikimedia.org/wiki/File%3AWinter_wonderland_Austria_mountain_landscape_(8290712092).jpg -->
<span>Winter</span>
</li>
<li>
<!-- By Arman7 (Own work) [CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0) or GFDL (http://www.gnu.org/copyleft/fdl.html)], via Wikimedia Commons, http://commons.wikimedia.org/wiki/File%3ABoroujerd_spring.jpg -->
<span>Spring</span>
</li>
</ul>
</body>
</html>
Here's the CSS:
html {
min-height: 100%;
}
body {
height: 100%;
background: black;
}
.slideshow {
list-style: none;
z-index: 1;
}
.slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-animation: imageAnimation 12s linear 0s infinite;
-moz-animation: imageAnimation 12s linear 0s infinite;
animation: imageAnimation 12s linear 0s infinite;
}
.slideshow li:nth-child(1) span {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/summer-slide.jpg);
}
.slideshow li:nth-child(2) span {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/fall-slide.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
animation-delay: 6s;
}
.slideshow li:nth-child(3) span {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/winter-slide.jpg);
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
animation-delay: 9s;
}
#-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
12.5% {
opacity: 1;
-moz-animation-timing-function: ease-out;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
12.5% {
opacity: 1;
-moz-animation-timing-function: ease-out;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
12.5% {
opacity: 1;
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes titleAnimation {
0% {
opacity: 0;
}
12.5% {
opacity: 1;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-moz-keyframes titleAnimation {
0% {
opacity: 0;
}
12.5% {
opacity: 1;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes titleAnimation {
0% {
opacity: 0;
}
12.5% {
opacity: 1;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.no-cssanimations .slideshow li span {
opacity: 1;
}
Here i think i fixed it for you. there were some wonky css:
http://codepen.io/anon/pen/KdgvEq
I fixed this particularly:
#-webkit-keyframes imageAnimation {
1.6% {
opacity: 1;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
img {
text-align: center;
width: 20px;
margin: auto;
display: block;
-webkit-animation: rotateSpinner 1.2s linear infinite;
}
demo http://jsfiddle.net/cfe2ym54/
What is the problem here?
you forgot to add keyframes
img {
text-align: center;
width: 20px;
margin: auto;
display: block;
-webkit-animation: rotateSpinner 1.2s linear infinite;
animation: rotateSpinner 1.2s linear infinite;
}
#-webkit-keyframes rotateSpinner {
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes rotateSpinner {
to {
transform: rotate(360deg);
}
}
<div class="loading">
<img src="http://assets.57square.com/img/loading.png">
</div>