I have a menu in an ul-list in a div-container:
<div class="box">
<div class="fullwidth-menu-nav">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</div>
</div>
Here is the CSS-stylesheet:
#-webkit-keyframes fadeIn { from { opacity:1; } to { opacity:0; } }
#-moz-keyframes fadeIn { from { opacity:1; } to { opacity:0; } }
#keyframes fadeIn { from { opacity:1; } to { opacity:0; } }
.fullwidth-menu-nav {
position:absolute;
width: 100%;
opacity:1;
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.fullwidth-menu-nav ul li {
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
animation-delay: 1.7s;
}
/*---make a basic box ---*/
.box{
width: 200px;
height: 200px;
position: relative;
margin: 10px;
float: left;
border: 1px solid #333;
background: #999;
}
html body div.box:hover {
opacity: 1;
visibility: visible;
border:8px solid #ff0;
}
When loading this side, the List-Menu is shown and disappers after a few millisecons. What I want to getist that if I hover over the Box-Div, the List-Menu is shown again.
So what is to do, to show the (invisible) li-Menu by hovering over another visible element (the Box-DIV)?
Yes, you could add another animation on hover to reverse the opacity you did:
.fullwidth-menu-nav:hover {
animation: appear 1s ease forwards;
}
#keyframes appear {
from { opacity:0; } to { opacity:1; }
}
Related
I'm using keyframes so fade in the items on click, but I want them to then fade out when I click again. How do I do this with keyframes? Maybe this is something you can't actually do with keyframes?
codepen
<div class="icon-wrap" onclick="bunAnimate(this)">
click me
</div>
<div class="primary__nav">
<ul id="primary" class="menu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
.primary__nav {
display: none;
&.open {
display: block;
}
}
.icon-wrap {
cursor: pointer;
}
ul {
position: relative;
list-style-type: none;
display: flex;
margin-bottom: 0;
li {
opacity: 0;
-webkit-animation: fadeInRight 0.5s linear forwards;
animation: fadeInRight 0.5s linear forwards;
-webkit-animation-delay: 0.35s;
animation-delay: 0.35s;
}
li:nth-of-type(2) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
li:nth-of-type(3) {
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
}
li:nth-of-type(4) {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
li:nth-of-type(5) {
-webkit-animation-delay: 0.55s;
animation-delay: 0.55s;
}
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
function bunAnimate(x) {
$(".icon-wrap").toggleClass("open");
$(".primary__nav").toggleClass("open");
}
You can make the list fade out item by item on click by more-or-less reversing the process.
There is one slight problem though, it's not possible to do this entirely in CSS as animations will not set the display property, so we can't get a keyframes declaration to set display: none on the primary nav element when the fading out has all completed. We get round this by introducing another class, display, which we call through Javascript. This is done rather crudely with a setTimeout, it may be possible to be more sophisticated by listening for the end of an animation, but it basically comes to the same thing.
function bunAnimate(x) {
document.querySelector(".icon-wrap").classList.toggle("open");
if (!document.querySelector(".primary__nav").matches('.open')) {
document.querySelector(".primary__nav").classList.add("open");
document.querySelector(".primary__nav").classList.add('display'); //display immediately it's open
}
else {
document.querySelector(".primary__nav").classList.remove("open");
setTimeout(function () {
document.querySelector(".primary__nav").classList.remove("display");
},550);//unpleasant but animations don't allow setting of display
}
}
.primary__nav {
display: none;
}
.primary__nav.display{
display: block;
}
.icon-wrap {
cursor: pointer;
}
ul {
position: relative;
list-style-type: none;
display: flex;
margin-bottom: 0;
}
li {
animation-name: fadeOutLeft;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
li:nth-of-type(1) {
animation-delay: 0.55s;
}
li:nth-of-type(2) {
animation-delay: 0.5s;
}
li:nth-of-type(3) {
animation-delay: 0.45s;
}
li:nth-of-type(4) {
animation-delay: 0.4s;
}
li:nth-of-type(5) {
animation-delay: 0.35s;
}
.open li {
display: block;
opacity: 0;
animation-name: fadeInRight;
}
.open li:nth-of-type(1) {
animation-delay: 0.35s;
}
.open li:nth-of-type(2) {
animation-delay: 0.4s;
}
.open li:nth-of-type(3) {
animation-delay: 0.45s;
}
.open li:nth-of-type(4) {
animation-delay: 0.5s;
}
.open li:nth-of-type(5) {
animation-delay: 0.55s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeOutLeft {
0% {
}
100% {
opacity: 0;
}
}
<div class="icon-wrap" onclick="bunAnimate(this)">
click me
</div>
<div class="primary__nav">
<ul id="primary" class="menu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
Note: I used pure CSS as I'm not familiar with SCSS.
I am trying to show one word at a time using the Li entries in a UL. The cycle is achieved with a CSS3 animation. I can show the words in sequence but not sure how hide the current word before the next one comes in:
#list {position:relative}
#list li {
animation: showWord 2.5s linear infinite 0s;
position:absolute;
opacity:0;
}
#list li:nth-child(2) {
animation-delay: 0.5s;
}
#list li:nth-child(3) {
animation-delay: 1s;
}
#list li:nth-child(4) {
animation-delay: 1.5s;
}
#list li:nth-child(5) {
animation-delay: 2s;
}
#keyframes showWord {
from,
49.9% {
opacity: 1;
}
50%,
to {
opacity: 0;
}
}
/* demo stylin' */
* {
list-style-type:none;
font-size:30px;
font-family:courier
}
<ul id="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
Nope
There is an animation-delay property, but that won't help us here. That delays the start of the animation, but after it's started it runs continuously.
#Solution: Keyframes with No Changes
You'll need to do a little mental math:
I want the animation to run for 10 seconds.
~ plus ~
I want the animation to delay for 2 seconds in between iterations.
~ equals ~
10 total seconds
So when you call the keyframe animation, you use the total seconds,
and the delay takes 2 seconds more each iteration:
#list {position:relative}
#list li {
animation: showWord 10s linear infinite 0s;
position:absolute;
opacity:0;
}
#list li:nth-child(2) {
animation-delay: 2s;
}
#list li:nth-child(3) {
animation-delay: 4s;
}
#list li:nth-child(4) {
animation-delay: 6s;
}
#list li:nth-child(5) {
animation-delay: 8s;
}
#keyframes showWord {
20%, 100% {
opacity: 0;
}
0% {
opacity: 0;
}
10% {
opacity: 1;
}
}
/* demo stylin' */
* {
list-style-type:none;
font-size:30px;
font-family:courier
}
<ul id="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
Hope it helps you
Just remove the position: absolute line
#list {position:relative}
#list li {
animation: showWord 2.5s linear infinite 0s;
opacity:0;
}
#list li:nth-child(2) {
animation-delay: 0.5s;
}
#list li:nth-child(3) {
animation-delay: 1s;
}
#list li:nth-child(4) {
animation-delay: 1.5s;
}
#list li:nth-child(5) {
animation-delay: 2s;
}
#keyframes showWord {
from,
49.9% {
opacity: 1;
}
50%,
to {
opacity: 0;
}
}
/* demo stylin' */
* {
list-style-type:none;
font-size:30px;
font-family:courier
}
<ul id="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
let me start by saying that I am a novice developer (maybe even below that), so, I apologize if I do not explain myself well.
I am trying to get several customer reviews about our product to splash onto the screen (FadeIn1, delay, FadeOut1), (FadeIn2, delay, FadeOut2) etc. I can get the fade-in and fade-out to work individually but I can't seem to get them to work together. The below code only fades it out. Can some one please let me know what I am doing wrong? Thanks in advance...
/* keyframes that tell the start state and the end state of our object */
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; }}
#-moz-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; }}
#-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; }}
#keyframes fadeOut { from { opacity:1; } to { opacity:0; }}
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.fade-out {
opacity:1; /* make things visible upon start */
-webkit-animation:fadeOut ease-out 1; /* call keyframe named fadeOut, use animattion ease-out and repeat it only 1 time */
-moz-animation:fadeOut ease-out 1;
animation:fadeOut ease-out 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 0)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
animation-delay: 3s;
}
.fade-in.fade-out.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.fade-in.fade-out.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}
.fade-in.fade-out.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}
/*---basic box ---*/
.box{
width: 200px;
height: 200px;
position: relative;
margin: 10px;
float: left;
border: 1px solid #333;
background: #999;
}
<body>
<div class="box fade-in fade-out one">
look at me fade in and out
</div>
<div class="box fade-in fade-out two">
i can fade too!
</div>
<div class="box fade-in fade-out three">
i can fade three!
</div>
</body>
Your original code is very close. Building upon the #ILoveCSS answer and your use of animation delay, I think this is the effect you are looking for:
#keyframes fade {
0% { opacity: 0 }
20% { opacity: 1 } /* 20% of 5 seconds = 1 second */
80% { opacity: 1 }
100% { opacity: 0 }
}
.fade {
opacity:0;
animation: fade ease-in-out 5s;
animation-fill-mode: forwards;
}
.fade:nth-child(2) { animation-delay: 0.25s; }
.fade:nth-child(3) { animation-delay: 0.5s; }
.box{
width: 100px;
height: 100px;
position: relative;
margin: 10px;
float: left;
border: 1px solid #333;
background: #999;
}
<div class="box fade">Box 1</div>
<div class="box fade">Box 2</div>
<div class="box fade">Box 3</div>
You can simplify the animation by using % frames instead.
You can control the speed of the animation under the .box animation selector.
#-webkit-keyframes myfade {
0% {
opacity: 0
}
20% {
opacity: 0
}
30% {
opacity: 1
}
40% {
opacity: 1
}
50% {
opacity: 1
}
60% {
opacity: 1
}
70% {
opacity: 0
}
80% {
opacity: 0
}
100% {
opacity: 0
}
}
#-moz-keyframes myfade {
0% {
opacity: 0
}
20% {
opacity: 0
}
30% {
opacity: 1
}
40% {
opacity: 1
}
50% {
opacity: 1
}
60% {
opacity: 1
}
70% {
opacity: 0
}
80% {
opacity: 0
}
100% {
opacity: 0
}
}
#keyframes myfade {
0% {
opacity: 0
}
20% {
opacity: 0
}
30% {
opacity: 1
}
40% {
opacity: 1
}
50% {
opacity: 1
}
60% {
opacity: 1
}
70% {
opacity: 0
}
80% {
opacity: 0
}
100% {
opacity: 0
}
}
.box {
width: 200px;
height: 200px;
position: relative;
margin: 10px;
float: left;
border: 1px solid #333;
background: #999;
animation: myfade 8s;
opacity: 0
}
<body>
<div class="box fade-in fade-out one">
look at me fade in and out
</div>
<div class="box fade-in fade-out two">
i can fade too!
</div>
<div class="box fade-in fade-out three">
i can fade three!
</div>
</body>
I am trying to create a logo transition with css however it only works in Chrome and not FF or even IE so what should i do ?
MY CSS
.logo {
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
background-image: url(../images/text.enter.png);
border-style: none;
height: 70px;
left: 50%;
margin-left: -138.5px;
margin-top: -35px;
position: absolute;
top: 50%;
width: 277px;
}
.logo:hover { background-image: url(../images/logo.png); }
Demo : http://jsfiddle.net/lotusgodkk/GCu2D/242/
CSS:
* {
margin: 0;
padding: 0;
}
#nav li:hover {
-webkit-animation: NAME-YOUR-ANIMATION 500ms;
/* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION 500ms;
/* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION 500ms;
/* Opera 12+ */
animation: NAME-YOUR-ANIMATION 500ms;
/* IE 10+, Fx 29+ */
}
#nav {
width: 400px;
margin: 40px auto;
}
#nav li {
list-style-type:none;
font-size:2em;
}
#nav li a {
background-image:url('http://css-tricks.com/examples/CSS-Sprites/Example1After/img/image_nav.gif');
background-repeat:no-repeat;
padding: 0 0 0 90px;
display: block;
height: 72px;
}
#nav li a.item1 {
background-position:0px 0px;
}
#nav li a:hover.item1 {
background-position:0px -72px;
}
#nav li a.item2 {
background-position:0px -143px;
}
#nav li a:hover.item2 {
background-position:0px -215px;
}
#nav li a.item3 {
background-position:0px -287px;
}
#nav li a:hover.item3 {
background-position:0px -359px;
}
#nav li a.item4 {
background-position:0px -431px;
}
#nav li a:hover.item4 {
background-position:0px -503px;
}
#nav li a.item5 {
background-position:0px -575px;
}
#nav li a:hover.item5 {
background-position:0px -647px;
}
#-webkit-keyframes NAME-YOUR-ANIMATION {
0% {
opacity: 1;
}
50% {
opacity:0.5;
}
100% {
opacity: 1;
}
}
#-moz-keyframes NAME-YOUR-ANIMATION {
0% {
opacity: 1;
}
50% {
opacity:0.5;
}
100% {
opacity: 1;
}
}
#-o-keyframes NAME-YOUR-ANIMATION {
0% {
opacity: 1;
}
50% {
opacity:0.5;
}
100% {
opacity: 1;
}
}
#keyframes NAME-YOUR-ANIMATION {
0% {
opacity: 1;
}
50% {
opacity:0.5;
}
100% {
opacity: 1;
}
}
HTML:
<ul id="nav">
<li><a class="item1" href="#" title="Some Link 1">Item 1</a>
</li>
<li><a class="item2" href="#" title="Some Link 2">Item 2</a>
</li>
<li><a class="item3" href="#" title="Some Link 3">Item 3</a>
</li>
<li><a class="item4" href="#" title="Some Link 4">Item 4</a>
</li>
<li><a class="item5" href="#" title="Some Link 5">Item 5</a>
</li>
</ul>
I used keyframes for animation. You can learn more about it here: http://css-tricks.com/snippets/css/keyframe-animation-syntax/
The example may not be perfect as per your needs but it can surely help you to achieve what you want.
I would like to add a FadeIn with CSS on #loader before my animation but it doesn't work.
You can test it here : http://codepen.io/AntoinePlu/pen/yLvdi
Any idea why ?
There is my HTML :
<div id="wrapper">
<ul id="loader">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
And here my CSS :
body{background-color:#39414D;}
#wrapper {
margin: 5% auto;
display:block;
width:300px;
}
#loader{
margin: auto;
width:100px;
height:100px;
list-style:none;
}
#loader li{
background-color:#ffffff;
width:8px;
height:40px;
float:left;
margin-right:6px;
border-radius: 8px;
-webkit-animation: fadein 4s;
}
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#-webkit-keyframes insights {
0%{
height: 10px;
margin-top: 90px;
}
50%{
height: 50px;
margin-top: 50px;
}
100%{
height: 10px;
margin-top: 90px;
}
}
#loader li:nth-child(1){
-webkit-animation: insights 1s ease-in-out infinite -0.8s;
}
#loader li:nth-child(2){
-webkit-animation: insights 1s ease-in-out infinite -0.6s;
}
#loader li:nth-child(3){
-webkit-animation: insights 1s ease-in-out infinite -0.4s;
}
#loader li:nth-child(4){
-webkit-animation: insights 1s ease-in-out infinite -0.2s;
}
#loader li:nth-child(5){
-webkit-animation: insights 1s ease-in-out infinite 0;
}
Thanks for you answer!
instead of #-webkit-keyframes 'fadein' and #-webkit-keyframes 'insights' write
#-webkit-keyframes fadein and #-webkit-keyframes insights
wrong syntx, no need for '' in your code
http://codepen.io/anon/pen/xjuyn