I have the following overlay
<div id="overlay"></div>
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
Which pops up instantly. I would like to make this overlay cover the screen with an animation effect, appear from right to left within 1000 miliseconds.
I understand this is feasible with jQuery but I dont want to install it in my Angular app. Is it possible to make it with typescript together with CSS?
Thanks.
Yes, you can use animation with #keyframes:
#overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
animation: slide-in 1s both;
}
#keyframes slide-in {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
<div id="overlay"></div>
Related
I have an absolutely positioned div that I want to have slowly increase in size (5s transition) on hover, to become a "border" for a relative-positioned div on top of it:
<div class="rectangle">
<div class="background"></div>
<div class="content">blah</div>
</div>
Styles (vendor prefixes removed for readability):
.rectangle {
position: relative;
}
.background {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.content {
height: 800px;
width: 200px;
}
Transitioning the overall .background size results in choppy animation but an even border:
.rectangle:hover .background {
width: calc(100% + 40px);
height: calc(100% + 40px);
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
transition: 5s linear all;
}
Transitioning a border is choppy animation, but (obviously) an even border
.rectangle:hover .content {
border: 20px solid red;
transition: 5s linear all;
}
Transitioning a transform-scale is smooth, but results in a larger top and bottom "border" because it is a rectangle:
.rectangle:hover .background {
transition: 5s transform;
transform: scale(1.1);
}
Any way to either get transform-scale to keep even dimensions, or any other way to create this effect?
You can try using box shadow as a border to achieve smooth transitions.
.rectangle {
position: relative;
width: 300px;
height: 300px;
top: 100px;
left: 30%;
}
.background {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.background::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: 0 0 0 0px #000;
transition: 5s linear box-shadow;
}
.content {
height: 300px;
width: 200px;
}
.rectangle:hover .background::before {
box-shadow: 0 0 0 20px #000;
transition: 5s linear box-shadow;
}
<div class="rectangle">
<div class="background"></div>
<div class="content">blah</div>
</div>
In my project I have screen which should ease-in from right side of the screen so for that thing I have used transform: translateX(100%) and then changing that to transform: translateX(0%). it works fine I able to achieve the ease-in effect but in that screen I have action button which has css property of Position: Fixed;Bottom: 0px; but this is not working I mean its not sticking in the bottom of the screen.
Here is my JSfiddle : https://jsfiddle.net/sureshpattu/a1seze4x/
Html:
<header>
Heading
</header>
<div class="page__popup page__popup--ease-in-right page__action-btn--visible" style="height: 382px;">
<div class="container">
</div>
<button class="js-action-btn">
SELECT ROOMS
</button>
</div>
Css:
header {
background: #fff;
height: 60px;
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 10;
box-shadow: 2px 2px 10px #000;
}
.container {
height: 382px;
}
.page__popup {
position: absolute;
top: 100vh;
z-index: 8;
display: block;
overflow-y: scroll;
max-height: 100vh;
width: 100%;
height: 0;
background: #ffffff;
.js-action-btn {
position: relative;
bottom: -50px;
transition: all 0.25s ease-in-out;
}
//Themes
&--ease-in-bottom {
&.visible {
transition: height 0.25s ease-in-out;
top: 54px;
right: 0;
bottom: 0;
left: 0;
}
}
&--ease-in-right {
transform: translateX(100%);
height: 100vh;
top: 60px;
&.visible {
transition: transform 0.25s ease-in-out;
transform: translateX(0);
}
}
}
.page__action-btn--visible {
.js-action-btn {
background: red;
width: 100%;
height: 30px;
position: fixed;
bottom: 0;
z-index: 10;
box-shadow: 0 7px 4px 10px rgba(0, 0, 0, .12);
}
}
This is not a bug.
Take a look at the spec: The Transform Rendering Model
Specifying a value other than ‘none’ for the ‘transform’ property
establishes a new local coordinate system at the element that it is
applied to.
So according to the spec: the element with fixed positioning will become relative to the element with the transform - not the viewport
As a workaround you could:
1) Use transitions (eg. on the left property) instead of transform (translateX)
2) Remove the position:fixed button from the container which uses transforms
I am trying to create a class which adds opacity and a trnasparent prelodaer spinner when a button gets clicked, so far I have the following:
.button-processing{
opacity: .5;
cursor: default;
&:before{
content: url("#{$image-path}hostelbookers/icons/loader-submit.GIF");
position: absolute;
top: 48px;
left: 88px;
width: 64px;
height: 64px;
z-index: 1;
}
}
I want to be able to only add a class to achieve the effect.
However I am struggling as the spinner is not transparent is there a CSS solution for it or a good looking transparent gif?
Actually SVGs/CSS animation are the better way to go, since it's cleaner & smaller file size.
http://code.tutsplus.com/tutorials/mobile-web-create-an-svg-loading-spinner--mobile-13556
I have ended up doing like so:
.button-processing{
position: relative!important;
.static-newsletter-pod,
button,
input[type="submit"],
input[type="button"] {
opacity: .5;
}
input[type="submit"],
input[type="button"]{
margin-bottom: 0;
}
button,
input[type="submit"] {
cursor: wait!important;
}
&:before{
content: "";
border-radius: 100%;
margin: auto;
border: 2px solid $white;
border-bottom-color: transparent;
height: 25px;
width: 25px;
background: 0 0!important;
display: inline-block;
-webkit-animation: rotate .75s 0s linear infinite;
animation: rotate .75s 0s linear infinite;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
}
}
I wanted to do a smooth transition of a fullscreen lightbox, my actual code is
<a href="#_" class="lightbox" id="img1">
<img src="images/photo.jpg">
</a>
And my style:
.lightbox {
display: none;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
}
.lightbox img {
max-width: 90%;
max-height: 80%;
margin-top: 2%;
}
.lightbox:target {
outline: none;
display: block;
transition:all 1s;
}
It's really simple, but transition:all seems to don't work with display block/none... Any idea?
display block/none does not allow any transition to run.
You must use visibility and opacity(for cross browser support).
So your code would look like this:
.lightbox {
display: block;
visibility: hidden;
opacity: 0;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
transition:all 1s;
}
.lightbox img {
max-width: 90%;
max-height: 80%;
margin-top: 2%;
}
.lightbox:target {
outline: none;
visibility: visible;
opacity: 1;
}
If I recall correctly, transition doesn't work with display. It's not time to give up hope, however! There's opacity! Use opacity: 0 and opacity: 1 in combination with display: none and display: block. Also, your transition is on the .lightbox:target, not the .lightbox. When it's on .lightbox:target, it's too late to start the transition.
Corrected CSS:
.lightbox {
display: none;
opacity: 1;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
transition: opacity 1s;
}
.lightbox img {
max-width: 90%;
max-height: 80%;
margin-top: 2%;
}
.lightbox:target {
outline: none;
display: block;
opacity: 1;
}
you can't transition display since it has no interim values, it is either displayed or hidden (of course there are many different ways of display)
It can't be 25% displayed
in order to create fade in transition with css only, you'll need to use the opacity attribute
function toggle(){
var element = document.getElementById("element");
if(element.className==""){
element.className = "out";
} else {
element.className = "";
}
}
#element{
transition: all 1s;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
opacity: 1;
}
#element.out{
opacity:0
}
button{z-index: 2; position: relative}
<div id="element">Element</div>
<br />
<button onclick="toggle()">click to fade in/out</button>
I have a DIV on top of another DIV.
What I want to achieve is hide the DIV on top to be able to access the DIV below.
I've tried opacity, but since the top DIV is still there, just transparent, It won't allow me to interact with the content of the DIV below.
I've also tried display:none;, visibility: hidden; and z-index. None of those would work.
How do I achieve this with CSS3, so I can also use a transition?
HTML:
<li class="panel-box">
<div class="front box-style"> </div>
<div class="back"> </div>
</div> </li>
CSS:
.panel-box {
margin: 5px;
padding: 0;
display: inline-block;
clear: none;
float: left;
width: 310px;
height: 200px;
position: relative;
}
.box-style {
background-color: red;
}
.front {
width: 310px;
height: 200px;
z-index: 5;
opacity: 0;
display: block;
position: absolute;
top: 0;
left: 0;
}
.front:hover {
opacity: 0;
display: none;
}
.back {
width: 310px;
height: 200px;
background-color: rgba(57, 54, 55, 0.95);
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
Thanks a bunch.
I've put together a bit of a workaround that seems to do some of this, but it will likely fail miserably on IE.
Tested and works reasonably on Chrome… YMMV :)
It uses a combination of z-index and sibling selectors to allow the front/back divs to swap places in the stacking context.
I had to swap places with front/back to use the CSS sibling selectors. I don't claim this is a perfect example, but perhaps it'll get the ideas flowing.
Basically what is happening here is:
As the mouse enters - trigger .front:hover
front z-index goes to -1 triggering .back:hover
back z-index immediately goes to 100 keeping it on top of the stack
sibling selector back:hover + front keeps the front opacity at 0
When the mouse transitions out, this all reverses
The reverse transition is not very smooth - haven't quite figured out if that can be fixed yet.
Demo
CSS
.panel-box {
margin: 5px;
padding: 0;
display: inline-block;
clear: none;
float: left;
width: 310px;
height: 200px;
position: relative;
}
.front {
width: 310px;
height: 200px;
padding: 10px;
z-index: 5;
opacity: 1;
display: block;
position: absolute;
background-color: red;
top: 0;
left: 0;
-webkit-transition: opacity .5s ease;
}
.front:hover {
opacity: 0;
z-index: -1;
}
.back {
width: 310px;
height: 200px;
padding: 10px;
color: white;
background-color: rgba(57, 54, 55, 0.95);
position: absolute;
top: 0;
left: 0;
z-index: 0;
opacity: 0;
-webkit-transition: opacity .5s ease;
}
.back:hover + .front {
opacity: 0;
}
.back:hover {
z-index: 100;
opacity: 1;
}
HTML
<li class="panel-box">
<div class="back">content goes here</div>
<div class="front box-style"></div>
</li>