I'd like to make a transition between two pages using only CSS.
I tried two solutions :
Once we clic on the button I use the pseuo element "active" and I create a transition with the opacity of my .body (.full_width in my case) to make disappear the whole page.
.button {
&:active + .full_width {
opacity: 0;
transition: opacity 2s;
}
}
When I try this CSS without the condition it works perfectly, my page beautifully disappears. But when I put the "active" condition it's not working.
I created a :after of my button with no content, but a background that takes the whole screen
.button::after {
content:'';
position: fixed;
z-index: -10;
top: 0;
bottom: 0;
right:0;
left:0;
width: 100%;
opacity: 0;
background-color: #DFE3E5;
transition: opacity 2s;
}
And then, when I activate the button, I change the z-index to bring the ::after in the foreground and change the opacity. The animation works perfectly once again, but my link doesn't work. It doesn't load the new page.
.button:active::after
{
z-index: 1;
opacity: 1;
}
Do you have any idea how to solve my issue ? I am so close it's very frustrating ^^
Thank you !
Related
Please can you help troubleshoot the transition in this CSS? My browser can see the code in the inspector but no transition is taking place. I have tried operating the transition on different properties including width and position but nothing works.
#header-image {
position: absolute;
top: 30px;
right: 30px;
background: transparent;
width: 250px;
margin-left: 10px;
opacity: 1;
transition: opacity 2s linear 1s;
}
I know I'm probably being thick so apologies in advance.
In order for the transition to work.. the property value should change. only then it will trigger the transition.
i.e) lets say #header-image initially has opacity: 0; width: 50px;.
but when you hover it you want to increase the opacity and width opacity: 1; width: 250px;
so your css will look like..
#header-image {
position: absolute;
top: 30px;
left: 30px;
background: blue;
width: 100px;
height: 100px;
margin-left: 10px;
animation: fadeIn 2s linear;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="header-image"></div>
Then your transition will work. So basically transition will work only when there is a change in the value. But in your case you are setting the opacity:1 initially by default.
If you want to add this effect on page load then you have to use css animation or javascript. Below I have given an example snippet on how it can be achieved using css animation.
However if you are planning to use many animations then I recommend to use some popular libraries like Animista, Animate.css, wow.js
I created a menu that slides in on hover.
When i move the mouse away from the menu it doesn't return to the pre hover state even though I've specified the container width and height so anywhere the mouse moves outside that it should return.
#menucontrol {
width:500px;
height: 800px;
}
#menucontrol:hover #navdiv {
left: 23px;
transition: all .3s ease-in-out;
opacity: 1.0;
}
#menucontrol:hover #dashes {
transform: rotate(360deg);
transition: all .3s ease-in-out;
opacity: 0;
}
#navdiv {
position: absolute;
top: 68px;
left:-55px;
z-index:999999;
opacity: 0;
width: 555px;
transition: all .3s ease-in-out;
}
The reason this is happening is that your #menucontrol div is taking up the entire page except for the area of your logo. I would suggest trying the :hover psuedo element on your #dashes id. I also noticed your z-indexes are set on some elements and not others. I think this could also be causing you some issues. Without seeing your html it is hard to duplicate and make changes to help you solve this issue.
I am building a lightbox based on the CSS3 selector :target which selects an element based on the hash in the url. I want to animate the target element on the :target event, but this doesn't seem to work.
Let's say we have a div #banana which is shown when a link to #banana is pressed.
#banana {display: none;}
#banana:target {display: block;}
This works fine. But when trying to animate the element, that doesn't work. See this fiddle.
div#banana {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
opacity: 0;
transition: opacity 5s linear 1s;
}
div#banana:target {
display: block;
opacity: 1;
}
The element won't fade in. It is as if the browser skips the animation and immediately triggers the end result.
The problem is that you are changing the display property. The display property can't be transitioned since you can't really animate an element turning from nothing into a block.
The display property can be left out altogether. You will however need to give your element visibility: hidden so that it will not prevent the link from being clicked, then transition it to visibility: visible:
div#banana {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
opacity: 0;
transition: opacity 5s linear 1s;
visibility: hidden;
}
div#banana:target {
opacity: 1;
visibility: visible;
}
Updated fiddle
It's not possible to animate display property. There is simply no gradual stages between none and block.
In your case you can "hide" element by using huge negative top position and revert it back to 0 on target event. Actual transition will be handled by changing opacity.
div#banana {
position: fixed;
left: 0;
top: -1000px;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
opacity: 0;
transition: opacity 1s linear;
}
div#banana:target {
top: 0;
opacity: 1;
}
<div id="banana">
close
</div>
Do you want a banana? Click me!
I'm using css transitions to cause a fade-in and fade-out effect on a background-image property. The property gets changed via jquery when the user scrolls.
It initially did not work on any browser. I found that setting an completley empty/transparent PNG file on the original element made chrome work, but the other browsers still don't.
Here's an example of the code:
nav {
background:url(/img/empty.png);
background-origin:border-box;
background-position:top;
background-repeat:repeat;
background-size:50px 50px;
transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-webkit-transition: background 1s ease-in-out;
}
.contrast {
background:#3a3a3a url(/img/xnav.jpg);
background-origin:border-box;
background-position:top;
background-repeat:repeat;
background-size:50px 50px;
}
The contrast class gets applied to the nav element via jquery. It only seems to fade out on most browsers, but not fade in. It works properly in chrome.
Q1: Is there a cleaner way to do this? Adding a transparent PNG as a background element to the nav element seems like a hack.
Q2: This still doesn't work on firefox, IE or Safari. Can anyone suggest a clean fix?
You can "fake" the background-image opacity with pseudo-element on your:
nav{
position:relative;
}
nav::before{
content: "";
background: url(/img/xnav.jpg);
background-origin:border-box;
background-position:top;
background-repeat:repeat;
background-size:50px 50px;
opacity: 0;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
transition: opacity 1s ease-in-out;
}
.contrast{ // applied on nav::before
opacity: 1;
}
Thanks to Nicolas Gallagher for this.
I'm making a web app and I want to switch between different tabs, which I have set up in section with the data-role set to page. I am able to switch through the tabs fine, but when I try to add a CSS transition it doesn't do anything. The app responds the same way whether I have a transition set or not, it doesn't even give me an error message of why no transition is taking place.
Here is my CSS:
[data-role=page]{
postion: absolute;
top: 0;
left: 0;
display:none;
transition: left 0.8s ease; /* faulty transition */
}
.active{
display:block;
}
.hide{
display: none;
}
The hide and active classes showed above in the CSS is what I use to toggle between tabs.
The transition property for css3 works only when the transition value changed.
In your case, if you want your transition to work, you would have to change the left property of your element. Maybe you could use opacity 0 and 1 instead of hiding/showing your element and put your transition on this property.
[data-role=page] {
position: absolute;
top: 0;
left:0;
display:none;
transition:opacity 0.8s ease
}
.active{
opacity:1;
}
.hide{
opacity:0;
}
If you want your transition on the left property. You should have values for this that change.
.active{
left:0;
}
.hide{
left:-100%;
}