i am using a bootstrap modal and i want it to slide left to right.
I tried to do it and i think i succeed (don't know if i did well so if i have to change say it)
.animate-left {
animation: animateleft 0.5s;
}
#keyframes animateleft {
from {
left: -300px;
opacity: 0;
}
to {
left: 0;
opacity: 1;
}
}
i did this so when i open the modal it slide from left to right. but when i close it it's bottom to top.
how can i change it ? (close = right to left)
Related
So I have two boxes called left panel and right panel and an overlay with position:absolute on top of right panel. There is a sign up button on right panel and on click I am adding a noghost class (so that the overlay is visible then).
What I am intending is the when I click on the button on the right side panel the overlay should translateX to the left. What I notice is that it happens instantaneously whenever this class comes up.
What am I doing wrong
Html
.overlay {
height: 100%;
width: 50%;
position: absolute;
left: 50%;
background: yellow;
top: 0%;
opacity: 0.7;
transition: all 1.8s linear;
z-index: 10;
}
.trigger.noghost .overlay{
transform: translateX(-250px);
}
<div
className={`trigger ${
activePanel === 'SignIn' ? 'noghost' : 'ghost'
}` }
>
<div className="overlay" />
</div>
The way I fix my issue was I did add a default position, like in your case:
transform: translateX(0);
This is also to help you understand what properties are changing in your element.
JSFiddle
CodeSandbox
I've been in the process of making a customise-able tooltip for Vue using SCSS, allowing a developer to specify the colour and placement of the tooltip, which is constructed from a pair of ::before and ::after pseudo-elements in a button element of variable size. The ::before acts as the tooltip's arrow, and the ::after the tooltip content.
There's four placements I want to make possible: top, bottom, left and right. The following two groups of classes apply to the top and bottom positions:
.tooltip-placement-top, .triangle-placement-top {
left: 50%;
transform: translate(-50%, 0);
}
.tooltip-placement-top {
bottom: calc(100% + 10px); // 3. 100% here is parent height, key point
}
.triangle-placement-top {
bottom: calc(100%); // 4. no need add 5px, because transparent border also takes place
border-top-color: var(--tooltip-border-color);
}
.tooltip-placement-bottom, .triangle-placement-bottom {
left: 50%;
transform: translate(-50%, 0);
}
.tooltip-placement-bottom {
top: calc(100% + 10px); // 3. 100% here is parent height, key point
}
.triangle-placement-bottom {
top: calc(100%);
border-bottom-color: var(--tooltip-border-color);
}
and these result in a centred tooltip above and below the button like so:
The next stage is to position the left and right hand tooltip classes to sit aligned with the horizontal centre of the button, but conforming to the left or right edge of the button rather than the top and bottom, as seen here:
Both the button and tooltip are likely to appear as different sizes depending on their context of use, so unfortunately this needs to be a scalable solution (i.e. increasing the size of either button or tooltip won't cause them to fall out of alignment). My current attempts to adapt the code has made the tooltip appear at 100% of its own width right of the button, which as you can imagine looked terrible.
Sorry I don't have screen-caps to share, but I hope the drawings make it clear what I'm trying to achieve! If you need any additional code then I can supply it, but the question was getting quite bulky as it is.
Sorted it!
Here's what I have for my right and left classes:
.tooltip-placement-left, .triangle-placement-left {
top: 50%;
}
.tooltip-placement-left {
right: 100%;
transform-origin: right;
transform: translate(-12px, -50%);
}
.triangle-placement-left {
right: 100%;
transform: translate(8.3px, -50%);
}
.tooltip-placement-right, .triangle-placement-right {
top: 50%;
}
.tooltip-placement-right {
left: 100%;
transform-origin: left;
transform: translate(12px, -50%);
}
.triangle-placement-right {
left: 100%;
transform: translate(-8.3px, -50%);
}
the exact distances in pixels depend on the dimensions of your tooltip arrow, but this is what worked for me. Hope it helps someone else!
I want to animate the button while waiting for an async call to finish. Disabling the button and putting a spinner in the middle or next to it obviously works, but feels a little boring these days. I thought it would be neat to have a little border animation on loop. Similar to
https://codepen.io/sarath-ar/pen/dMKxxM
Specifically, the 3rd button they have demoed. It fills the border nicely on hover, but what I'm imagining is after it fills the border, it then undoes the border color in the same direction. It "chases" the other animation if you will.
I was fiddling with their css, but I can't seem to figure out how to loop the border animation (I did successfully reverse the animation), but I'm struggling to loop it due to the :before and :after.
So I guess the primary quest is, how do you loop an animation when it relies on the ::before and ::after css selectors. To simplify, how would I loop the below css? (I realize that isn't all the css, but in general how would you loop that?)
.btn-1::before{
right: 0;
top: 0;
}
.btn-1::after{
left: 0;
bottom: 0;
}
.btn-1:hover::before, .btn-1:hover::after{
transition-delay: 0s;
}
What you want to use is CSS animation and have it continue looping through the animation via animation-iteration-count: infinite.
Here's what this would look like: https://codepen.io/jerrylow/pen/eXmroN?editors=1100
For simplicity imaging we want each edge's duration to be 1s. The total time becomes 8s because 1s per side for 4 sides times 2 because there's the unwind cycle. A side's animation looks like this:
#keyframes btn-border-top {
0% {
left: auto;
right: 0;
width: 0%;
}
12.5% {
left: auto;
right: 0;
width: 100%;
}
12.6% {
left: 0;
right: auto;
}
50% {
width: 100%;
}
62.5% {
width: 0%;
}
100% {
left: 0;
right: auto;
width: 0%;
}
}
The animation will run for the whole 8s so 1/8th is 12.5% after a full cycle (4s) you want to unwind for the 5th second which is 50% - 62.5% (12.5 * 5). After that we want to keep it at "winded" up until the next cycle.
Edit: If you want an overlap for the cycle to kick in before the next cycle starts you can play with the percentage by calculating the time yourself.
I have this strange bug in MSIE11, where an animated element disappears right after the end of an animation.
See this example
.cta-43274891247129739-info {
position: absolute;
left: 0;
top: 50px;
margin: 10px 10px;
animation: cta-43274891247129739 4s 1s both ease-out;
text-align: center;
}
#keyframes cta-43274891247129739 {
0% {
transform: translateY(1em);
opacity: 0;
}
16.6667%, 83.3333% {
opacity: 1;
transform: translateY(0em);
}
100% {
transform: translateY(-40px);
}
}
<div class="cta-43274891247129739-info">This animation fades in from the bottom, makes a short stop and then translates up to its final halt. But not on MSIE11, where it will dissappear apruptely at the end of the animation </div>
MSIE11 has issues with animations, particularly with calculations involving different units.
In your particular example, the animation works perfectly, until the very last keyframe. After reaching 100%, it seems like the text has disappeared, but its actually still there, only moved up by 40em.
So the workflow looks something like this:
moves up by 1em => moves up by 0em => moves up by 40px => moves up by 40em
So by the last point, the text is already far above the viewport it seems like it has disappeared.
The solution to this is not to mix px's and em's.
If you change -40px to -4em on the last keyframe, the animation will work okay, maybe won't be the pixel perfect, but at least it will work.
Using css animation I have an object that moves from the left to the right of the screen. However I've noticed that the animation is actually continuing after it has exited the right of the screen, which causes Chrome horizontal scroll bars to appear.
If you scroll right, it just shows the animated object no longer moving and a white background screen.
How do I kill the animation as soon as it leaves the view able screen?
The actual animation can be seen here. http://crea8tion.com/ChristmasMessage/index.html
The CSS code for the object is
.santa {
width: 1000px;
position: absolute;
top: -14%;
left: -55%;
-webkit-animation: santa-move 1s 1s ease-out forwards;
-webkit-animation-delay:5s;animation-delay:5s;
-webkit-animation-duration: 25s;
}
#-webkit-keyframes santa-move {
100% { left: 100%;}
}
There is a simple way to remove this extra scrollbar.
You can add a simple overlay: hidden to the parent div. In your case:
.columns {
overflow: hidden;
}
In this case, the santa animation didn't anymore add the horizontal scrollbar.