Develop Reference

Css Transition doesn't work for the content. Its applied to the button but not to the content. The content doesn't hide/show smoothly [duplicate]

I'm having an issue which seems to be preventing CSS transitions from playing on an element which is simultaneously changing from display:none.
In the following example, the divs have identical CSS, except that hovering over the first one hides the other two. The second div is hidden using visibility:hidden, and the third is hidden using display:none.
When you mouse over the first div, the behaviour is as expected: the first div transitions and the other two are hidden. When you mouse out, the behaviour is different from what I would expect: the first div transitions back to normal, the second div is unhidden then transitions back to normal, but the third div is unhidden and still in the normal state.
I was expecting for the third div to match the behaviour of the second and also be unhidden, then transition back to normal.
div{
width:100px;
height:50px;
background:red;
border-radius:50%;
transition: border-radius 1s;
}
#hover:hover, #hover:hover ~ div{
border-radius:0%;
}
#hover:hover ~ #hide1{
visibility:hidden;
}
#hover:hover ~ #hide2{
display:none;
}
<div id="hover">hover me for transition</div>
<div id="hide1">I transition back</div>
<div id="hide2">but I don't</div>
Since the second div works as expected, it's fairly easy to come up with alternate solutions using visibility:hidden and some positioning CSS, but is it possible to accomplish this in just CSS using display:none? If not, why does display:none affect other transitions in this way?
Note: This seems like something that would be easy to find, but my searches only turned up questions about attempting to transition the display property itself, not its side-effects on other transitions.

A simple explanation of display: none:
Turns off the display of an element (it has no effect on layout); all
descendant elements also have their display turned off. The document
is rendered as though the element did not exist.
(Emphasis mine)
The transition is not triggered because it was never started. The div was removed completely on hover and returned in its initial state with border-radius: 50%.
Workaround
The only possible way to achieve this affect with display: none using just CSS is to use an animation that will be triggered each time the display: none div appears.
div {
width: 100px;
height: 50px;
background: red;
border-radius: 50%;
transition: border-radius 1s;
animation: display 1s;
}
#hover:hover,
#hover:hover ~ div {
border-radius: 0%;
}
#hover:hover ~ #hide1 {
visibility: hidden;
}
#hover:hover ~ #hide2 {
display: none;
}
#keyframes display {
0% {
border-radius: 0;
}
100% {
border-radius: 50%;
}
}
<div id="hover">hover me for transition</div>
<div id="hide1">I transition back</div>
<div id="hide2">but I don't (unless I have an animation)</div>

No, you cannot use display:none;
Reason:
When using display:none; - The element will be hidden, and the page will be displayed as if the element is not there. So when you hover over it - the element is totally removed...and border-radius:0%; never gets applied. When you hover away - the element shows immediately as the css tells it to - with border-radius:50%;
visibility:hidden; hides an element, however the element will still take up the same space as before. The element will be hidden, but still affect the layout.

You just can use transition for numerical properties in CSS, So you should use opacity and transition: all 1s to do this:
div{
width:100px;
height:50px;
background:red;
border-radius:50%;
transition: all 1s;
}
#hover:hover, #hover:hover ~ div{
border-radius:0%;
}
#hover:hover ~ #hide1{
visibility:hidden;
}
#hover:hover ~ #hide2{
opacity: 0;
}
<div id="hover">hover me for transition</div>
<div id="hide1">I transition back</div>
<div id="hide2">but I don't</div>

div{
width:100px;
height:50px;
background:red;
border-radius:50%;
transition: border-radius 1s;
}
#hover:hover, #hover:hover ~ div{
border-radius:0%;
}
#hover:hover ~ #hide1{
visibility:hidden;
}
#hover:hover ~ #hide2{
visibility: hidden;
}
<div id="hover">hover me for transition</div>
<div id="hide1">I transition back</div>
<div id="hide2">but I don't</div>
This will work. On mouse out third div also have transition.

Using CSS Animations to keep element hidden for n seconds after page load

A few years back we added a note to our web page for users who are blocking JS. I would really like the note to stay hidden for folks who have JS on. The note's visibility relies on the body having a class body class="noJS". In order to remove that as swiftly as possible I have a JS as the very first item in the body tag that does not rely on anything but fires right away.
<!-- BODY element exists! -->
<script type="text/javascript">
/*<![CDATA[*/
document.body.className = document.body.className.replace(new RegExp(\'(?:^|\\s)\'+ \'no-js\' + \'(?:\\s|$)\'), \' \');
/*]]>*/
</script>
In Firefox I still see the note as a red flickering, for example on the top of the main page here https://www.colorperfect.com
Annoying, which leads to my question can I use CSS3 animations to fade in that note say after a one second delay? That should fix it I guess but I have never done anything with CSS animations so I figured I'd ask rather than fiddle... If that does not work other ideas would be welcome, too.
Edit:
This is the CSS that produces the red block. A simple matter of exchaning background and height.
body.noJS .single_navi_zeile
{
background-color:#BB0000;
height:12.7em;
background-position: left 0.5em bottom 0.3em;
background-repeat: no-repeat;
background-image: url("../grafik/nojs.png");
}

This should provide you the fade in effect you are after. Animation delays postpone when an animation starts and so you might end up with the element appearing, then vanishing suddenly only to fade back in again.
If you begin the animation right away but start from opacity: 0 and then after 1s (50% of a 2s duration) fade it back in you should get what you're after.
#keyframes fade-in {
0% {opacity: 0}
50% {opacity: 0}
100% {opacity: 1}
}
.anim-fade-in {
animation-name: fade-in;
animation-duration: 2s;
}
<p class="anim-fade-in">Some content</p>
Worth noting that the element is only hidden using opacity by this approach and so you may find that the page content moves as the element itself is present before being removed. You could experiment with sliding the element in instead.

did you try css for that?
.redBanner {
display: none;
}
body.no-js .redBanner {
display: block;
}
or with your example
body.no-js .single_navi_zeile {
background-color:#BB0000;
height:12.7em;
background-position: left 0.5em bottom 0.3em;
background-repeat: no-repeat;
background-image: url("../grafik/nojs.png");
}

Prevent CSS animation after re-showing element

I have an element that will show some animation upon initial page load. After that, the element should be hidden and never show again.
This element is wrapped inside a parent container. Some user interactions may hide the parent container (display:none or hidden attribute). Every time after the parent container is re-shown, the element is animated again, which I would like to prevent. Why is the element re-animated every time it is re-shown? Any CSS rule to disable this behavior?
Here is an example. Once you hover over the link and hover out, the element is animated again.
Is it possible to prevent it through pure CSS, not involving any Javascript? How?

If the goal is for the animated element to basically be gone and not overlap anything after the animation is complete, you can take out the forwards state of your animation, and make the inherent height of your .block element 0px. Then set the 0% and 100% keyframes to the height you want (100px), and after the animation is done the block will be gone, for all intents and purposes, having a height of 0 and no clickable area.
#keyframes drop {
0% {
transform: translateY(-150%);
opacity: 0;
height: 100px;
}
15% {
transform: translateY(10%);
}
20% {
transform: translateY(-10%);
}
25% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(1);
opacity: 1;
height: 100px;
}
}
.block{
width:100px;height:0px;background:black;
animation: 1.3s 2 alternate drop;
}

Fade in Scale effect but for pages

I want to implement the fade and scale effect shown here:
http://tympanus.net/Development/ModalWindowEffects/
but for a page (with width and height of 100% of the browser) not a modal.
How can I do that using jquery or css? I tried copying the code on the page but it works best for modals not for pages that have width and height of 100%.
On the page are elements with minimum width of 1024px.

Updated the jsFiddle to show it containing elements that are at least 1024px.
You'll want to put your entire page into a wrapper element, and then give it the animation class on DOM Ready.
The CSS will be something like:
body,html{
height:100%;
margin:0;
}
.page-wrapper{
height:100%;
overflow:auto;
overflow-y:auto;
overflow-x:hidden;
transform:scale(0);
opacity:0;
transition: transform 1s ease, opacity 1s ease;
}
.page-wrapper.fade-and-scale{
transform:scale(1);
opacity:1;
}
And the jQuery will be something like this:
$(document).ready(function(){
$('.page-wrapper').addClass('fade-and-scale');
});
This solution has the benefit of:
"Growing" from the centre of the page, and falling back gracefully on older browsers
Falling back gracefully on older browsers
Not animating any fundamental css properties (ie. width or height)
Fiddle: https://jsfiddle.net/gk5c08rc/4/

Did you mean something like this?
https://jsfiddle.net/rn8ho7wL/
Wrap your page in a wrapper, and set a smaller (or whichever style you like to go FROM) into the base styles for that wrapper. Add in a transition-duration property.
#wrapper {
transition: all 2s;
-webkit-transition: all 2s;
width: 10%;
height: 10%;
background: red;
margin: 0 auto;
opacity: 0;
}
Then, define a class where you want the page to go TO. Styled the same way.
#wrapper.open {
width: 100%;
height: 100%;
opacity: 1;
}
And in your javascript file (assuming jQuery is loaded), simply apply the style.
$(function(){
$('#wrapper').addClass('open');
});
Bear in mind that CSS3 transitions are not supported by IE9 and below, and also require some vendor prefixes to be largely compatible. For using the transform, as described in another answer, apply the following:
-webkit-transform: scale(0); /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
-ms-transform: scale(0); /* IE 9 */
transform: scale(0);
Edit:
The issue with the min-width can easily be solved by adding overflow: auto to your wrapper element.
https://jsfiddle.net/rn8ho7wL/2/

How to reduce circle size?

I have a div which is circle in shape.I have done animation things with CSS .Now i want to do when circle go to bottom then circle size remain same (now this is ok for me) but when circle bounce back to top then circle reduce it's size.I don't know, is it possible with CSS ? I am very week in JS .Can anyone solve my problem or suggest me the right way?
JsFiddle Link
Thanks in advance.
HTML:
<div class="hello"></div>
CSS:
.hello{
width:100px;
height:100px;
border:5px solid black;
border-radius:55px;
}
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
animation-name: example;
animation-duration: 4s;
}
#keyframes example {
0% {background-color:red; left:0px; top:0px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

A couple of things. There's a JSFiddle at the bottom which shows everything I list:
To reduce the circle size, just add height: <whatever>px; and width:<whatever>px; to the last stage of your animation.
Note that if you want it to only decrease over the last section (where it bounces back up to the top), you will need to specify that the height and width values are still the starting values at the 75% stage.
Because you're changing the size of the circle, the animation will "jump" at the end back to its existing form. This is because, by default, CSS animations aren't persistent. Whatever changes you make only last as long as the animation before reverting to normal.
If you want the change to be persistent and stay after the end of the animation, you need to use animation-fill-mode: forwards;.
I've created an edit on your original JSFiddle with all of the above changes Here.

Try this - fiddle
100% {background-color:red; left:0px; top:0px; width:50px;height:50px}

You can modify width and height of the div in your keyframes to get desired effect.
#keyframes example {
0% {background-color:red; left:0px; top:0px;}
75% {background-color:green; left:0px; top:200px;width:100px;height:100px;}
100% {background-color:red; left:0px; top:0px;width:50px;height:50px}
}
FIDDLE
We are reducing the width and height of circle in the keyframe 100% so when the ball bounces back i.e. from keyframe 75% to 100% ball is animated to a smaller size. Note that to keep the size of the ball same till keyframe 75% we are again defining height:100px and width:100px in that keyframe.