Develop Reference

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");
}

Strange CSS transition behavior on adding class

Class Event 1 is what I am trying to achieve by just placing class directly and not adding hover properties, though it's working for Hover Elements.
Please check this pen and you can find the problem by following the below instructions:
Type anything in the "Name"
Click Tab
You should reach the 1st State(Orange border on left and bottom and some transition effect), in which it pulls itself from the right corner, I don't understand why it's doing that. It working completely perfect in the Hover Example which is referenced above as well.
Understanding of my CSS
.draw {
transition: color 0.25s;
It gives an imaginary border of 2px transparent, which we will highlight later
&::before,
&::after {
border: 2px solid transparent;
width: 0;
height: 0;
}
This is where you start the transition of ::before from top-left corner
/* This covers the top & right borders (expands right, then down) */
&::before {
top: 0;
left:0;
}
This will change the color of the text.
&.dj {
color: rgb(255,123,0);
}
Here I want to expand it till 66% width.
/* Class styles */
&.dj::before,
&.dj::after {
width: 66%;
height: 100%;
}
Is it mandatory to add/recommended ::after?
&.dj::before {
border-bottom-color: rgb(255,123,0);
border-left-color: rgb(255,123,0); // Make borders visible
transition:
height 0s ease-out, // Width expands first
width 0.25s ease-out; // And then height
}
}

I can see a couple of differences between your hover demo and your tab implementation.
The first is that in the hover demo a left border is applied to .draw:before and a bottom border to .draw:after. In your tab implementation both borders are applied to .draw:after, and since .draw:after is aligned to the bottom of the button this messes up the vertical animation, which you actually want to start from the top and animate in a downward direction. This is fixed by giving .draw:after top:0 instead of bottom:0.
The second problem is that you are applying the .draw and .dj classes simultaneously. As a consequence the border width and height is applied immediately. What you need to do is toggle between the width height start and end values. I suggest applying the .draw class directly to the button in your markup, and instead of toggling both classes, only toggle the .dj class when the user tabs.
Here is a forked pen with these changes applied: https://codepen.io/jnicol/pen/EbNavz
There are various other enhancements that could be made, but those changes should fix the immediate problem you have described.

CSS transition property does not take effect on div

This is my first question on stack exchange so feel free to let me know if I haven't included enough information. I've looked for a solution to my particular issue and found nothing relevant so here goes...
I'm trying to achieve a sidebar navigation that slides in upon a menu button being pressed. The rest of the page should slide with it so it flows smoothly. I have used some simple javascript to toggle on/off a .active class for the navigation sidebar div and the content-wrap div. For reference, this is what I'm trying to do: http://antrikshy.com/. The transition property is applied to both the sidebar div and content-wrap element but is only affecting the navigation bar. After inspecting the webpage, I can see the css properties have been applied to the content-wrap element successfully, but they don't work. This has been tested in safari and firefox with no change in results.
See the Pen sidebar transition example on CodePen.
Here is the individual css on the content-wrap:
.content-wrap {
position: relative;
transition: all ease 2.5s;
padding: 10px;
overflow: auto;
}

You need to define both sides of the transition. If you are transitioning on left you need the left attribute of 0 so the transition has a starting point.
.content-wrap {
position: relative;
transition: all ease 2.5s;
padding: 10px;
overflow: auto;
left:0 /* THIS */
}
On my browser that fixes your pen -- https://codepen.io/anon/pen/EvKQxR.

Stop jQuery hover effect when element is not hovered anymore

My script:
$(window).load(function(){
$(".inner").hover( function (e) {
$(this).find(".info").stop().fadeIn(410);
}, function() {
$(this).find(".info").stop().fadeOut(410);
});
});
When I mouseover the div .inner it will play the animation but when I quickly mouse out and mous in again it will stop on the place where I mouse out it, to make it easier.
http://www.sakesalverda.nl/projects/ and hover on a website image and quickly mouse out and hover the image of the website again and you will see it will not fully make the animation

There surely is a jQuery solution, but I would use CSS for this, it's much easier and im most cases the performance is better:
.inner .info {
opacity: 0;
-webkit-transition: opacity .42s;
transition: opacity .4s;
}
.inner:hover .info {
opacity: 1;
}
Works on all major browsers, but IE8 would need a fallback. One downside is, that IE8 and IE9 won't have the fading effect, but in my opinion, thats a death we can afford to die, as those browsers are at only 5% these days. And the showing / hiding will work, just not as nicely as with modern browsers.

Brighten images from dark to light on hover

I'm looking for a script of some sort that will select all images on a page within a certain div.class, apply a transparent black shadowing to it, and then fade it out on hover. Does anyone know of a system of doing this? I can't really modify the site itself (http://cargocollective.com/maureengriswold) or I'd have figured out some shoddy way of doing it already.

Typically you would do this by putting a black background behind your images and the set the opacity of the images to some value < 1.
On your site, you would add the following CSS:
.cardimgcrop {
background-color: black;
border-color: white;
}
.cardimgcrop img {
opacity: 0.7;
}
.cardimgcrop img:hover {
opacity: 1;
}
UPDATE:
If you want an animated fading, you would leave out the :hover CSS definition and add the following Javascript lines (using jQuery 1.4.2 as already used on your site):
$(document).delegate('.cardimgcrop img', 'mouseover', function() {
$(this).fadeTo(500, 1);
});
$(document).delegate('.cardimgcrop img', 'mouseout', function() {
$(this).fadeTo(500, 0.7);
});
Of course you could also native CSS transitions instead for this effect (as suggested in Howard's answer), but you would need to take care of browser capabilities.

Not entirely sure what you mean by transparent black shadowing, but I think you mean an effect like a veil over it, which lifts on hover and returns on mouseout?
You can probably achieve this effect entirely using css. Something like this:
DIV.myClass{
-moz-transition-property: background-color;
-moz-transition-duration: 2s;
background-color: rgba(0,0,0,0.6);
}
DIV.myClass:hover{
-moz-transition-property: background-color;
-moz-transition-duration: 2s;
background-color: rgba(255,255,255,1);
You'll want to play around with the exact CSS to achieve the effect you want, and also you'll want to test in various browsers as CSS transition support is not 100%.
You can read more on CSS Transitions at the MDN documentation site.

CSS filters are another option http://html5-demos.appspot.com/static/css/filters/index.html