I have an angular component that has a button and the button triggers a sidePanel and the side panels slidesOut over the component that has the button triggering the side panel to come out. I have 2 issues I can solve. The side panel has a width of 350px;
1) When the component with the button is loaded you can see the sidePanel doing the animation to hide
2) The slideIn works fine but the slideOut moves really fast
HTML
<div class="credit-card-container {{toggleSideBarFlag ? 'showSideBar': 'hideSideBar'}} {{ submittingPayment ? 'payment-success-container' : ''}}">
<app-bulk-pay-credit-card [ccTotalDue]="totalDue" [pickupAvailabilityList]='selectedEquipment' (submittingPayment)="isSubmittingPayment(true)"
(toggleSideBar)="onToggleSideBar(false)" (close)="onCloseBulkPay(false)"></app-bulk-pay-credit-card>
</div>
CSS
.bulk-pay-storage-container {
.showSideBar {
width: 100%;
display: block;
position: absolute;
z-index: 9999;
animation: slideIn 1s;
}
.hideSideBar {
width: 100%;
display: block;
position: absolute;
right: -350px;
z-index: 9999;
animation: slideOut 1s forwards;
}
}
#keyframes slideIn {
0% {
transform: translateX(350px);
}
100% {
transform: translate(0);
}
}
#keyframes slideOut {
100% {
transform: translateX(350px);
}
}
I would use transitions rather than animations in your example.
You can basically toggle between having showSideBar class and not having it.
Sidebar's start position is hidden outside of the viewport (left: -350px) and its visible state is left: 0.
Set left and transition properties on your sidebar and remove the animation property.
.bulk-pay-storage-container {
/ ... /
left: -350px;
transition: left 2s;
}
.bulk-pay-storage-container.showSideBar {
left: 0
}
Related
I am trying to make a loading animation. I am using css transition to transition into the loading by scaling and then using animation to scale out the x axis. But when I try to transition back to the original state it doesn't use the transition anymore it just snaps back. I could use animation for the whole thing but I want to account for the page continuing to load so I don't want to have to write extra javascript logic to handle it. It would be nice if It would just transition on its own.
When you click the following snippet the first time it works fine. But when you click it again it just snaps back to its original state and doesn't use the transition. If you use a different property like opacity in the animation part then it works fine so I'm assuming there is something with the browser not recognizing the current scaled value. Is this a bug or am I doing something wrong?
document.querySelector('.wrapper').addEventListener('click', () => {
document.querySelector('.wrapper').classList.toggle('loading')
})
.wrapper{
position:fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.wrapper > div{
color: white;
display:flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: blue;
transition: transform 500ms ease-out;
transform: scale(1);
}
.wrapper.loading > div{
transform: scale(0.2, 0.002);
animation: loading 1000ms ease-out infinite;
animation-delay: 500ms;
}
#keyframes loading {
0%{
transform: scale(0.2, 0.002)
}
50%{
transform: scale(0.5, 0.002)
}
100%{
transform: scale(0.2, 0.002)
}
}
<div class="wrapper">
<div>click me</div>
</div>
TL;DR
I believe that this happens because CSS transition eventually gives a class two states and transitions between them, when you remove your class you don't change its state, you remove it. my solution would be to add another class to set it back.
CSS transitions work by defining two states for the object using CSS. In your case, you define how the object looks when it has the class "loading" and you define how it looks when it doesn't have the class "saved" (it's normal look). When you remove the class "loading", it will transition to the other state according to the transition settings in place for the object without the "loading" class.
If the CSS transition settings apply to the object (without the "loading" class), then they will apply to both transitions.
your transition CSS settings only apply to .saved and thus when you remove it, there are no controls to specify a CSS setting. You may want to add another class ".fade" that you leave on the object all the time and you can specify your CSS transition settings on that class so they are always in effect.
I don't know a pure css fix for this.
But you can add a different class with a animation that restores to what it was before with JS
const wrapper = document.querySelector(".wrapper");
wrapper.onclick = () => {
if ([...wrapper.classList].includes("loading")) {
wrapper.classList.add("restore");
} else {
wrapper.classList.remove("restore");
}
wrapper.classList.toggle("loading");
};
.wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.wrapper>div {
color: white;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: blue;
animation: none;
transform: scale(1);
transition: transform 500ms ease-out;
}
.wrapper.restore>div {
animation: restore 500ms ease-out;
}
.wrapper.loading>div {
transform: scale(0.2, 0.002);
animation: loading 1000ms 500ms ease-out infinite;
}
#keyframes restore {
0% {
transform: scale(0.2, 0.002);
}
100% {
transform: scale(1);
}
}
#keyframes loading {
0% {
transform: scale(0.2, 0.002)
}
50% {
transform: scale(0.5, 0.002)
}
100% {
transform: scale(0.2, 0.002)
}
}
<div class="wrapper">
<div>click me</div>
</div>
You can use animation iteration count property:
div {
animation-iteration-count: 2;
}
or use fill mode to freeze the animation at the end:
-webkit-animation-fill-mode: forwards;
I want to display an animated loading icon when the user have submitted a search.
SEQUENCE OF EVENTS I'M LOOKING FOR:
USER SUBMITTED A SEARCH
MAKE LOADING ICON VISIBLE
MAKE LOADING ICON INVISIBLE ONCE THE SEARCH IS COMPLETED
The issue I'm facing is mostly css.
Firstly, the loading icon seems to be behind the form element.
Secondly, I cannot increase the size of the div (searchEngineForm) to have the same size as the form.
Lastly, I cannot set div (searchEngineForm) width to 100%. It goes outside of the form.
Here is my code:
HTML:
<form action="setJobFields" method="POST">
<div id="searchEngineForm" style="display: none;">
<div class="loader">
</div>
</div>
...
</form>
CSS:
#searchEngineForm{
position: absolute;
/* width: 100%; */
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
To set an html element above others, you could set its Z-index to a higher number than what’s around it.
For example, say you’re wanting to display your loading symbol in front of the rest of the page. You could contain the whole page in a single div, for the sake argument we give it a class of “page”, we can set it as:
.page{ z-index: -1 ;}
And the loader as
.loader{ z-index: 1; }
Then, to position it where you want, you can set the position to absolute and move it around with the top and left properties, such as
.loader{ z-index:1; position: absolute; top: 50%; left: 50%; }
I've been trying to find a solution for a while now but none seem to work.
The issue I am having happens when navigating to any and all the pages on the site- it's very annoying.
While I would expect that site images take time to load, this loading affects my navigation bar and the loading of my site's logo. For the time that it takes each page to load, my site's logo is completely absent- this causes my navigation bar to be shifted all the way up until the logo appears. This usually takes about a split second but it's also completely dependent on the user's internet connection).
How do I prevent this from happening? This causes my entire site to "bounce" when navigating, with all the content being shifted up for a brief moment while the logo is absent.
Give your image tag an absolute height attribute. This will make the browser keep the img tag the height it should be and allow the elements to load in the proper place.
You can also try tweaking a loader to have the page load only when all of the elements in the page have loaded. Something as simple as this:
<!DOCTYPE html>
<html>
<head>
<style>
/* Center the loader */
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#myDiv {
display: none;
text-align: center;
}
</style>
</head>
<body onload="myFunction()" style="margin:0;">
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Tada!</h2>
<p>Some text in my newly loaded page..</p>
</div>
<script>
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "block";
}
</script>
</body>
</html>
With some modification, can help the UI experience!
Source: W3 Schools
Hope it helps!
I have an animation where a div slides out the view, however when the animation is completed, the div just returns to its origin position in the view. How do I totally remove the div or hide it after the animation ends using just CSS?
Here is the markup:
<div class="container">
<div class="slide-box" id="slide-box""></div>
</div>
and the css:
.slide-box {
position: relative;
width: 100px;
height: 100px;
background-image: url(../pics/red.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation: slide 5s linear 1;
}
#keyframes slide {
0% {
left: 0;
}
20% {
left: 20%;
}
40% {
left: 40%;
}
60% {
left: 60%;
}
80% {
left: 80%;
}
100% {
left: 100%;
overflow: hidden;
visibility: hidden;
}
}
I don't want it to fade out over the duration of the animation, i just want it to disappear once it hits 100% in the keyframe. Thanks ahead of time!
Use the animation-fill-mode option. Set it to forwards and the animation ends at it's final state and stay like that.
Altered based upon comments Set opacity fade to just last 1% of animation... simplified keyframes. Added a jquery option to literally remove the div from the DOM. CSS alone won't alter the markup, where jQuery will.
Although you can't animate the display property. If you want the div totally gone, after the opacity fades to zero, you can then add the display property to remove the div. If you don't wait for opacity to end, the div will just vanish without any transition.
/*
This jquery is added to really remove
the div. But it'll essentially be
VISUALLY gone at the end of the
animation. You can not use, or
delete the jquery, and you really
won't see any difference unless
you inspect the DOM after the animation.
This function is bound to animation
and will fire when animation ends.
No need to "guess" at timeout settings.
This REMOVES the div opposed to merely
setting it's style to display: none;
*/
$('.slide-box').bind('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(e) { $(this).remove(); });
.slide-box {
display: block;
position: relative;
left: 0%;
opacity: 1;
width: 100px;
height: 100px;
background: #a00;
animation: slide 1s 1 linear forwards;
/*
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: forwards;
*/
}
#keyframes slide {
0% {
left: 0%;
opacity: 1;
}
99% {
left: 99%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
display: none;
}
}
#-webkit-keyframes slide {
0% {
left: 0%;
opacity: 1;
}
99% {
left: 99%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="slide-box" id="slide-box"></div>
</div>
animation: slide 5s linear forwards;
at 100%
opacity: 0;
display: none;
Try this.
Working fiddle: https://jsfiddle.net/jbtfdjyy/1/
UPDATE: JS mani
var slideBox = document.getElementById('slide-box');
setTimeout(function(){
slideBox.style.display = 'none';
}, 5000);
Try this. https://jsfiddle.net/jbtfdjyy/2/
Add something at 99% or so to your keyframes, and set opacity to 1 in that. If you have opacity: 1 at the start, then it will stay that way until 99%. Only at 100% will it change.
It's not technically fired at 100%. If you want that, I'd recommend using some JavaScript here, but this will at least give the illusion you want.
#keyframes slide {
0% {
left: 0;
}
20% {
left: 20%;
}
40% {
left: 40%;
}
60% {
left: 60%;
}
80% {
left: 80%;
}
99% {
opacity: 1;
}
100% {
left: 100%;
overflow: hidden;
opacity: 0;
display: none;
visibility: hidden;
}
}
UPDATE:
As per your request, here is a JavaScript version. Keep in mind, there are endless ways to accomplish such a task. I am using vanilla JS (no jQuery, etc.), and using ES6 syntax.
What we do here is set a timeout, and at the end of that timeout I broadcast an event animation_end. That event listener will handle the end of the animation (in this case, it adds a class which will handle the fading out). This is much more granular than you need it to be, you could simply do the adding of the class within the setTimeout, but I think it is slightly better this way as you can abstract you can do other things with events such as animation start, etc.
Here is the fiddle: https://jsfiddle.net/vmyzyd6p/
HTML:
<div class="container">
<div class="slide-box" id="slide-box""></div>
</div>
CSS:
.slide-box {
position: relative;
width: 100px;
height: 100px;
background-color: blue;
animation: slide 3s linear 1;
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
}
.animationEnd {
opacity: 0;
}
#keyframes slide {
0% {
left: 0;
}
20% {
left: 20%;
}
40% {
left: 40%;
}
60% {
left: 60%;
}
80% {
left: 80%;
}
100% {
left: 100%;
}
}
JavaScript:
// Create a function that handles the `animation_end` event
const animationEnd = () => {
// Grab the slidebox element
let slideBox = document.getElementById('slide-box');
// Get the class of the slidebox element
let slideClass = slideBox.getAttribute('class');
// Add the animation end class appended to the previous class
slideBox.setAttribute('class', slideClass + ' animationEnd');
};
// Create the animation end event
let animationEndEvent = new Event('animation_end');
// Cross browser implementation of adding the event listener
if (document.addEventListener) {
document.addEventListener('animation_end', animationEnd, false);
} else {
document.attachEvent('animation_end', animationEnd);
}
// Set the timeout with the same duration as the animation.
setTimeout(() => {
// Broadcast the animation end event
document.dispatchEvent(animationEndEvent);
}, 3000);
I am designing an HTML+CSS slider with automatic transition between slides and infinite duration. I have
this slider on different pages with different content (and number of divs), so I need
to write the same code for everything.
<div class="slide-container">
<div class="slide">div 1 goes here!</div>
<div class="slide">div 2 goes here!</div>
<div class="slide">div 3 goes here!</div>
</div>
I have started with this CSS code and tried with different animations, but I don't know how to do this
.slide-container {
-webkit-animation: transition 2s infinite linear;
-moz-animation: transition 2s infinite linear;
-o-animation: transition 2s infinite linear;
}
EDIT: This is the last transition I used to solve my issue:
#-webkit-keyframes animation {
20%,30% {-webkit-transform: translate(100%);}
70%,100% {-webkit-transform: translate(-100%);}
}
I want to get a div in screen for 5-10 seconds and a transition between divs of 2 seconds (in brackets div that must be on screen at these moment, width=100%, height=50px):
(-start-DIV1 5s)--2s-->(DIV2 5s)--2s-->...-->(DIVN 5s)--2s-->(DIV1 5s)-->...
The reason I do slider with CSS is because I'm trying to avoid JavaScript and JQuery functions.
Below where 12s is defined is the total slide time. This divided by the amount of slides (which in this demo is 3) gives us 4s a slide in this example. This is one method where you can toggle slide time. But like the other poster mentioned you'll still have to customize a bit. My method demonstrates a horizontal slide approach with a smooth transition and fast load time. In any case pure CSS3 is what your after.
JS Poodle.
CSS3 power:
body {
padding: 1em;
background: #999
}
.scrollable {
width: 333px;
margin: 0 auto;
padding: 0;
border:10px solid #fff;
background: #000;
position: relative;
overflow: hidden;
text-align: center;
}
img {
max-width: 333px;
margin: 0;
float:left;
}
.items {
width:999px;
-webkit-animation: hscroll 12s infinite;
-moz-animation: hscroll 12s infinite;
-ms-animation: hscroll 12s infinite;
}
#-webkit-keyframes hscroll {
0% { margin-left: 0; }
27.33% { margin-left: 0 }
33.33% { margin-left: -333px; }
60.66% { margin-left: -333px; }
66.66% { margin-left: -666px; }
94.99% { margin-left: -666px; }
100% { margin-left: 0 }
}
#-moz-keyframes hscroll {
0% { margin-left: 0; }
27.33% { margin-left: 0 }
33.33% { margin-left: -333px; }
60.66% { margin-left: -333px; }
66.66% { margin-left: -666px; }
94.99% { margin-left: -666px; }
100% { margin-left: 0 }
}
#-ms-keyframes hscroll {
0% { margin-left: 0; }
27.33% { margin-left: 0 }
33.33% { margin-left: -333px; }
60.66% { margin-left: -333px; }
66.66% { margin-left: -666px; }
94.99% { margin-left: -666px; }
100% { margin-left: 0 }
}
<div class="scrollable">
<div class="items">
<img src="http://placehold.it/333x500/E8117F/FFFFFF&text=Horizontal"/>
<img src="http://placehold.it/333x500/FFFFFF/E8117F&text=css3"/>
<img src="http://placehold.it/333x500/3D668F/FFFFFF&text=slide show"/>
</div>
</div>
Here is a quick demo that demonstrates some of the techniques you'll need to use. I've used the same HTML markup you provided. This is not a ready-to-go "copy and paste" solution -- you'll need to take some time to understand the code and apply the concept to your particular use-case.
The technique basically involved lining up all the slides side-by-side, then shift the entire row of them every few seconds. The edges will be cropped so that only one slide is shown at a time.
To start with, you'll need to define the size of your "viewing area", by applying a width and height to the .slide-container element. Then apply overflow: hidden to the container, so that slides which aren't in the "viewing area" aren't shown.
Each slide should fill the "viewing area", so apply a width and height of 100% to each .slide element. You'll also need make them display as inline-block elements, so that they are aligned side-by-side, but still fill their container.
Finally, the hard part: defining the animation. Keyframe animations are percentage-based. Basically, since there are three slides, we want to switch after 33% of the animation has elapsed, again after 66%, and return to the beginning after 100%. We want a smooth "slide", so we'll make the actual transition last 5% in total -- so the first one actually starts at 28% and ends at 33%. The keyframes code looks like this:
#keyframes slide {
/* modify percentages to match how many items you have */
0% { margin-left: 0; } /* initial position */
/* (stays in first position ) */
28.333% { margin-left: 0; } /* start sliding */
33.333% { margin-left: -100%; } /* done sliding */
/* (stays in second position ) */
61.667% { margin-left: -100%; } /* start sliding */
66.667% { margin-left: -200%; } /* done sliding */
/* (stays in third position ) */
95% { margin-left: -200%; } /* start sliding */
100% { margin-left: 0; } /* done sliding - back to initial position */
}
And it can be applied to the first slide like this (adjust transition time as desired):
.slide:first-of-type {
animation: slide 10s ease;
animation-iteration-count: infinite;
}
After you've done this, you'll just need to adjust to your preferences. Experiment with slide durations and transition types. Perhaps change how the animation repeats at the end. You can even use the animation-play-state property to pause the animation when you hover over the "viewing window". I've included a full demo below that includes the hover-to-pause feature. If you're not 100% clear about how it works, try removing the overflow: hidden property from the .slide-container element.
#keyframes slide {
0% { margin-left: 0; }
28.333% { margin-left: 0; }
33.333% { margin-left: -100%; }
61.667% { margin-left: -100%; }
66.667% { margin-left: -200%; }
95% { margin-left: -200%; }
100% { margin-left: 0; }
}
.slide-container {
overflow: hidden; /* try commenting this line out! */
width: 150px;
height: 100px;
border: 1px solid #000000;
}
.slide {
display: inline-block;
width: 100%;
height: 100%;
}
.slide:first-of-type {
animation: slide 10s ease;
animation-iteration-count: infinite;
}
.slide-container:hover .slide:first-of-type {
animation-play-state: paused;
}
<div class="slide-container">
<div class="slide" style="background: #ff0000">div 1 goes here!</div><div class="slide" style="background: #00ff00">div 2 goes here!</div><div class="slide" style="background: #0000ff">div 3 goes here!</div>
</div>
Here is the same demo on jsFiddle.