I've implemented a CSS solution to animate a style that is set inline with the guidance from CSS-Tricks. Also used help from SO to have the text blend with CSS
I have the animation of the label going both ways (on load and reset) but the progress bar itself immediately goes to Zero
The width of the div gets set inline like this:
<div class="progress-black" ng-style="{width:progress}"></div>
And the onload animation is simple
.progress-black {
background: black;
animation: progress-bar .5s linear;
z-index: 2;
}
#keyframes progress-bar {
0% { width: 0; }
}
Here is my jsfiddle
It seems like #keyframe animations need a 100% value, which is set dynamically, so not sure how to express that in CSS.
My particular app has the ability for a user to click 'reset'. Is there a way to have the animation happen back to 0?
You have few problems in your code and there is two solutions for you:
first solution: - and the better one
in your case there is no need to use animation, its enough if you will use transition: width 2s; - and you should do that.
you checking if the value "exist" with if (scope.value) and when you reset the width of the progress remain as it was and not changed
you adding .zero class that color
see here
second solution:
1.. in your case there is no need to use animation, its enough if you will use transition: width 2s; - and you should do that.
2.. if you have zero class set .progress-black { width: 0 !important; } so the width will be 0 (important because you want it to be stronger then the inline css).
see here
Related
I want to show a image preview of a link using CSS. The behavior is something like this, when an user hovers over the link, the image preview appears after 1sec, but on hovering out, the preview is removed immediately. Now to ensure the preview appears after 1sec, I have used the transition property as
transition-property: visibility; transition-delay: 1s. While this is ensuring the preview gets visible after 1sec, it's transition from visible to hidden is also delayed for 1sec for obvious reason. Can I make sure that only the transition from hidden to visible does take 1sec, and not the vice versa using CSS?
You sadly showed no code.
But I assume you had the transition property on a class or id... and the :hover just changing a property, which is good in order to apply the transition on mouse in and out.
Weird thing is you mention the visibility property, which cannot be transitionned because it is not a "number" property. Maybe you meant opacity...
If you have the transition property in the :hover rule... It apply on hover (read on mouse enter) but squarely do not apply no "not hover" (read mouse out).
#target{
opacity: 0;
height: 400px;
width: 400px;
background: blue;
}
#target:hover{
opacity: 1;
transition: 1s;
}
<div id="target"></div>
I'm working in an Angular 9 app and I need to make an accordion menu. Everything works fine with my code except for the animation of the sub menus. I want to animate the content of a sub-menu item when display is change from'block' to 'none' and also animate it when is changing from 'block' to 'none'.
here is a couple of examples of what I need
https://codyhouse.co/demo/multi-level-accordion-menu/index.html
https://primer.fusepx.com/angular/
I also want to keep the code structure as much as possible. I just really need the content animation
Here is an stackblitz example with my code.
https://stackblitz.com/edit/angular-ivy-t6rbdp
Try this
.content {
padding: 10px;
background-color: blue;
height: 0 !important;
overflow-y: hidden;
transition: height 0.5s ease-in-out;
}
.content-open {
opacity: 1;
height: 100px !important;
}
As display which doest represent numeric values you cant do transition on that. So use properties like height.
This question already has answers here:
CSS how to make an element fade in and then fade out?
(5 answers)
How to fade out a div, then fade in another in the same location. CSS only
(1 answer)
CSS Transition - Fade Element on Hover only
(2 answers)
How to play CSS3 transitions in a loop?
(2 answers)
Closed 3 years ago.
I have two div elements that each contain text. I want to fade one div into another div such that as one disappears the other appears and the cycle repeats. Does anyone know how to do that? I don't even know where to start.
<div>
<div>Expand your knowledge</div>
<div>Blah Blah Blah</div>
</div>
Those are the two div elements that should transition from one to another in a cycle.
First things first, I am going to add classes to your HTML elements to use as styling hooks that will make working with them easier. It is also just the best practice to use classes for the majority of styling in CSS. The wrapping class, or "stage" for the animation, will get the class fader-stage. Every "slide" (what I am going to be calling each div element that will fade out and into another) gets the same general class applied to it, fader-slide, and I also apply a unique class for each individual slide that denotes its number in the presentation order (fader-slide--1, fader-slide--2, and so on if you were to add more elements).
<div class="fader-stage">
<div class="fader-slide fader-slide--1">Expand your knowledge</div>
<div class="fader-slide fader-slide--2">Blah Blah Blah</div>
</div>
Now for the CSS! 🎉🎈 ...I am going to start with styling the wrapping div element by using the class hook, fader-stage, we added to the HTML in the above step.
.fader-stage {
border: 2px solid #000;
height: 12rem;
margin: 2rem auto;
position: relative;
width: 50%;
}
The only part of this style that you absolutely have to keep "as is" here is position: relative. We use this on a containing element so that when we use position: absolute on the child elements in the next step, it doesn't make them position themselves according to the root element of the document, they will instead position themselves according to closest relatively positioned ancestor element (this one). Everything else in this wrapper class can be changed according to your taste, or the particular specifications of the project.
Now we create a simple animation using #keyframes that will take the opacity level from 1 to 0. Seems like we can keep it simple and just call the effect fade-out. We will use this identifier with the animation property in the next step. You can read more about keyframes here if you'd like to know more about this CSS at-rule.
#keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
Now we need to style the "slide" elements that you want to fade into one another. We will be using the general class that we have applied to all the slides, fader-slide.
I set some pretty general styles on fader-slide. I wanted to make each slide take up the maximum amount of space in the wrapping div, and to center all of each slide's content.
I use position: absolute as a way to take each slide out of the normal flow of the document, which will effectively allow them to sit on top of one another. I then set the top and left properties to 0 in order to position the element start at the top left corner of the stage. Had we not set the position property to relative on the fader-stage element in the previous step, doing this would instead position the slides in the top left corner of the document.
I used flexbox properties to easily ensure that everything that is inside the slides gets centered horizontally and vertically.
Most importantly though, I also applied the fade-out animation we made in the keyframes step above. I tell the animation to go through the keyframes animation named fade-out, for that animation to have a duration of 2.5s, to use the ease-out animation-timing-function when animating, to run an infinite amount of times, and to alternate back and forth when it gets to the end of the animation. I do all of that in one line of CSS by using the animation shorthand property.
.fader-slide {
align-items: center;
animation: fade-out 2.5s ease-out infinite alternate;
background: #015e89;
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
For each individual slide, I then apply an increase of the animation-delay property of 2.5s for each subsequent slide. You can obviously change the animation duration, delay, and timing function to anything you'd like. If you want each slide to begin to fade out as soon as it fully appears then it would be best if the animation duration and each delay increment were equal to one another. For any additional slide you wanted to add, you would just add the delay amount you've chosen to the previous delay amount and then just keep increasing it. This is the way I have done it. I add the z-index property with a value of 1 to the first slide so that it sits on top of the others at the start of the animation after the page loads. Otherwise, the last slide in the DOM order will be on top at the beginning. To make the fading effect more obvious, I would also change the background-color on each subsequent slide.
.fader-slide--1 {
animation-delay: 2.5s;
z-index: 1;
}
.fader-slide--2 {
animation-delay: 5s;
background-color: #018970;
}
Here is a codepen so you can see it all working together. 🚨
🚨 STROBE WARNING: If you have epilepsy, or suffer from seizures or headaches caused by pulsing light, you may want to avoid viewing this example. The effect is mild in my estimation, but it will automatically play when you follow the above link so I believe it fair to give warning to anyone sensitive to such things.
And here is all the CSS from above in one, easy to copy/paste snippet:
.fader-stage {
border: 2px solid #000;
height: 12rem;
margin: 20px auto;
position: relative;
width: 50%;
}
#keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.fader-slide {
align-items: center;
animation: fade-out 2.5s ease-out infinite alternate;
background: #015e89;
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.fader-slide--1 {
animation-delay: 2.5s;
z-index: 1;
}
.fader-slide--2 {
animation-delay: 5s;
background-color: #018970;
}
There is a lot more we could do with it if we kept going, but I believe this achieves the specifications laid out in your question as I understand them.
If you are not using something like Autoprefixr or Prefixfree to apply vendor prefixes to your CSS then you may want to add the -webkit (and possibly -moz and -ms) prefix to the animation property, as well as animation-delay, the #keyframes, and potentially also the flexbox properties (display: flex, align-items: center, and justify-content: center), but only if you want to cast a wide net for backwards browser compatibility. If you don't know how to do this or what I'm talking about let me know and I'll edit to include the browser prefixes.
Autoprefixer also has an online tool for adding vendor prefixes, if you don't want to set it up with PostCSS as package dependency for your project. To use the online tool you just give the app a string describing the browsers you want to target, paste in your CSS, and it will return your CSS with the vendor prefixes necessary to (mostly) ensure compliance with your target browsers added.
If you have any other questions about this method just let me know and I would be happy to help. 🤓👨🏼💻
The #keyframes rule specifies the animation code.
The animation is created by gradually changing from one set of CSS styles to another.
During the animation, you can change the set of CSS styles many times.
Specify when the style change will happen in percent or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.
#keyframes animate {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
#keyframes animation {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
.div1{
animation: animation 1s infinite;
}
.div2 {
animation: animate 1s infinite;
}
<div class="div1">Expand your knowledge</div>
<div class="div2">Blah Blah Blah</div>
I have simple markup like http://jsfiddle.net/2nzp8835/1/. After clicking on expand content becomes "full screened". Then I added fade in animation using animate.css like on http://jsfiddle.net/ph1rvh6p/1/ and expand was stop working.
I can't figure out why. Is it possible to use both animate.css with fixed positioned elements?
I fix it, but there is some reason that I can't still figure it out.
My solution is here: JSFiddle.
The key attribute is vw and vh
.fullscreen-mode{
height: 100vh;
left: -10px;
position: fixed;
top: -10px;
width: 100vw;
z-index: 99999;
}
it's CSS3 attribute. If you consider IE8~IE9, It's may be ineffective. But on Chrome and FF, it works well.
I try it to find the detail reason.
Here is some clue:
In the animation.css, you used these class
.fadeInRight {
animation-name: fadeInRight;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
I remove some of these. And the effective will be back. So, I guess the animtion redefine the page flow so that make your purpose effect doesn't work.
Here is a attach question:
How the class named animated and .fadeInRight effects page flow in animation.css?
Hope someone can help.
I know that you can make hovering over a div affect the div directly after it with '+' and any div after it with '~'. But I have a situation where I need a div directly before and after the div I'm hovering over to be affected. What I am trying to do is have 4 circles grow on hover (which works fine), and the adjacent circles should be pushed aside.
Here is a codepen that may make it more apparent what I am trying to do:
http://codepen.io/anon/pen/Bojug
Here is a snippet of code with the issue.
#circ2:hover + #circ3{
margin: 100px 0px 100px 8%;
}
#circ2:hover ~ #circ1{
margin: 100px 2% 100px 13%;
background: blue;
}
As you can see, when you hover over circle number 2, circle number 3 is pushed aside but circle number 1 is not. Does anyone have a way around this. I know some of you may suggest JS or JQuery which I am not familiar with. In that case could you point me in the right direction? Also, I know there are many threads that address similar issues but I havent seen one that asks about affecting preceding divs. Thanks in advance!
From what I understood from your question I think you want to shift the preceding elements like the post elements.
If I am correct, just use the simple technique .Shift parent relatively on hover - >
#circles:hover{
position:relative;
right:40px;
}
Demo
Update with transition
#circles{
position:relative;
right:0px;
}
#circles:hover{
position:relative;
right:40px;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
Demo 2
I'm too lazy to change youre code, since it's quite big, but the following idea should help:
You have
#circ2:hover + #circ3 //Affects circ3, when circ2 is hoverd
Now you want to affect #circ1, when circ2 is hoverd.
Try this:
#circ1 //Set the rules you want to see applied when circ2 IS hovered
#circ1 + :not(:hover) //Set the standard style here.
That way, since #circ2 isn't ususally hovered, you see the standard style. But as soon as you hover over it, the :not()-selector will no longer apply - and the hover styles will apply.