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.
Related
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've tried searching for this but can't seem to describe it correctly--if this answer exits, please point me in the right direction!)
I'm playing around with some css rules. I wanted to make a specific, secondary 2px-wide border on a pseudo-element appear around nav anchors in the header, which open a modal and blur an absolutely-positioned background image div #bg, which sits as such:
<body>
<div id="#bg"></div>
<header id="global-header">
<nav>...</nav>
</header>
</body>
Since I wanted to transition the blur effect, I added translate3d(0,0,0) to #bg, which smoothed the fps by galvanizing the GPU for hardware accelerated processing of CSS. It worked! ...Until I noticed that the vertical (left & right) borders for the links had inconsistent widths across the nav. They were each set at 2px, but every other one looked 1.5(??)px wide. It took me a minute to narrow down why, which ultimately was because of the translate3d transformation. I took screenshots, but I centered and moved the pseudo-elements with border-left: 2px below the header (the effect persisted), and I removed the background image itself so the effect would be easier to see. Here they are:
Inconsistent 2px calculation (with translate3d(0,0,0) on #bg)
Consistent widths (without translate3d transform on #bg)
And for reference, here's the code for the left-bordered pseudo-elements:
#global-header nav ul li a:before {
content: '';
position: absolute;
display: block;
top: 100%;
left: 50%;
height: 100%;
width: 0;
border-left: 2px solid gray;
background-color: transparent;
}
I know that translate3d creates as well as solves a possible host of issues from my searches--but why is this happening? Does it have anything to do with "subpixel calculations"? And why would these calculations render inconsistently throughout the page with hardware acceleration, on something I would assume is hard to mess up?
Edit: So, even without translate3d, the problem-lines flicker to a smaller width when the blur transitions (seen in the code from screenshots) are triggered, and I can reproduce the original issue without translate3d if I add backface-visibility: hidden to the pseudo-element itself. This could hint at general pixel rounding issues, with specific properties as triggers only being a symptom.
After further fiddling, answering my own question: This is not caused caused by hardware acceleration, which was my revised suspicion. Though the use of these effects showcased the problem in my particular case, I was able to recreate a version of my issue without them.
By removing transform3d from the #bg element:
#bg {
.
.
.
/* transform: translate3d(0,0,0); */
}
And, without the backface-visibility property as well, I added some width to the pseudo-element in order to see what these borders would normally look like:
#global-header nav ul li a:before {
content: '';
position: absolute;
display: block;
/* top: 100%; */
/* left: 50%; */
height: 72px;
width: 1px;
border: 2px solid black;
/* backface-visibility: hidden; */
/* border-left: 2px solid black; */
background-color: transparent;
/* transition: height .2s ease; */
}
Duh: I should have expected the result, since earlier I had tried to use the element itself (by making it 1-2px wide and coloring it) instead of border-left, which at the time seemed to fix the issue. Of course, when I did it this time using the above css, the base problem reappeared.
Though I still don't know why the aforementioned properties showcased the problem with border-left as well, addressing this might be too sporadic/situation-dependent to field here, and likely still has more to do with browser rendering than anything else.
Anyway, my question was why transform3d caused this effect, and the answer is, at least in this case, it didn't--it just made it more obvious.
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
For few weeks I've been trying to repair unclickable tumblr buttons (for example like, reblog, edit theme), but I can't. When I changed theme, everything worked perfectly. Thing is, I don't want to change theme, I want to know where the problem is.
I tried to hid my buttons with body > iframe:first-child { display: none !important; }
And it did disappear. Then I deleted this code and it showed me buttons, but I still couldn't click at any of them.
Then I tried
.tmblr-iframe.tmblr-iframe--desktop-loggedin-controls.iframe-controls--desktop {
z-index:999999999 !important;
}
iframeiframe.tmblr-iframe--desktop-loggedin-controls.iframe-controls--desktop {
-webkit-filter:invert(100%);
-moz-filter:invert(100%);
-filter:invert(100%);
right:3px;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
z-index:999999;
}
But still, nothing changed. I also tried to clear my browser's cache and cookies. Still the same.
I don't know what to do anymore.
Edit. While trying to solve the problem by going into my page's html I found this after < / html >, in red
iframe scrolling="no" width="1"
height="1" frameborder="0" style="background-color:transparent;
overflow:hidden;
position:absolute; top:0; left:0; z-index:9999;" id="ga_target">
</iframe><script type="text/javascript">
And when I put this under < body >, buttons work, but my page disappears completly.
I checked if this code is on my main blog. It is, my not in red and before < / html >
Blog: smartchesters.tumblr.com
It is a little bit confusing what you are asking. Do you want to show the tumblr control buttons and have them clickable, or do you want to hide them entirely?
The reason you cannot click on the tumblr control buttons at the top right hand side is because of the properties of this element:
#bord {
position: fixed;
opacity: 1;
z-index: 9999999999;
width: 100%;
top: 0px;
height: 80px;
margin-left: -5px;
background-image: url("");
background-repeat: repeat;
}
If you toggle position:fixed on this element in the browser you will see that the tumblr control buttons become clickable. Or you can toggle the z-index attribute. Z-indexes in my opinion cause issues, there should be a way to lay out the document without needing to resort to z-indexes, except in an emergency.
I recently had one blog where I wanted to completely hide the tumblr controls (I was under the impression they were being added via javascript) however it seems that a pure css solution works:
iframe[class*="control"] {
display:none!important;
}
This looks for any iframe element whose class name contains "control"
Also the first part of this selctor looks off to me, is it definitely correct:
iframeiframe.tmblr-iframe--desktop-loggedin-controls.iframe-controls--desktop
Also, if you have code after your closing </html> you definitely need to fix or remove that. It looks like the google analytics code.
UPDATE
You have no closing </body> tag in your document. As well as the code falling outside the closing </html> tag. I would definitely run your html through a validator. It won't recognise the tumblr expressions like {PermalinkPage}
etc but it should help you pinpoint the tags that need closing properly.
https://validator.w3.org/
I've been messing around with images sliding with hover on a separate page from my main work and it worked like a charm. However, when I transfer it to my main page, it doesn't work, for some reason. I even copy-and-pasted so there should be absolutely no problem going on.
.pictureContainer2 img:hover {
top: 50px;
}
.pictureContainer2 img {
position: relative;
top: 0px;
transition: top .2s ease-in-out; }
And this is how it is in the body.
<div class="pictureContainer2">
<img src="icontag.png"></div>
I'm sorry if this is obvious or just plain silly. I just got into web development.
Thanks for you time.