Safari ignoring inline styles for keyframe animations - css

When setting #keyframes using CSS transform in Safari (desktop and iOS) with just an end frame, and then updating the starting transform position programmatically (inline via JS), Safari appears to continue to execute the animation from the initial position (i.e. using the initial transform value in the stylesheet) - not using the inline style.
In short, Safari keyframe animations don't appear to update to reflect any changes to inline styles that are added programmatically
The below snippet (reduced test case) works in both Firefox and Chrome, but Safari just animates to the position of 0. My question is whether or not there is a workaround for this? Is this an intended representation of the spec by Apple, and should programmatic inline styles be ignored for keyframe animations? I can't imagine that they should.
I have tried cloning and replacing the element, to no avail. I also tested with the inline style being included onLoad, and this did work in Safari, so the bug seems to only be when the style is added programmatically.
I appreciate I can animate entirely using JS and requestAnimationFrame, which is my fallback solution if the above fails. (Likewise, a great solution is to use the Web Animation API, which seems exactly made for this purpose. But support for that is patchy, so a no-go for now). What I am really interested in is a solution to the above bug, rather than alternative suggestions.
(As an aside, the <marquee> tag still works as a cross-browser solution... *shudder*)
// Get slides
let marquee = document.querySelector('.mock-marquee__content');
// Transform slides for initial offset
marquee.style.transform = `translate(-${marquee.clientWidth}px, 0)`;
.mock-marquee {
overflow: hidden;
display: flex;
}
.mock-marquee__content {
white-space: nowrap;
display: flex;
animation: marquee 5s linear infinite;
}
.mock-marquee__content__slide {
display: block;
}
.mock-marquee__content__slide:not(:first-child) {
margin-left: 100px;
}
.mock-marquee__content:hover {
animation-play-state: paused;
}
#keyframes marquee {
from {
transform: translate(100vw, 0);
}
}
<div class="mock-marquee">
<div class="mock-marquee__content">
<span class="mock-marquee__content__slide">Hello</span>
<span class="mock-marquee__content__slide">world</span>
<span class="mock-marquee__content__slide">Foo</span>
<span class="mock-marquee__content__slide">Bar</span>
<span class="mock-marquee__content__slide">Bat</span>
<span class="mock-marquee__content__slide">Another one</span>
<span class="mock-marquee__content__slide">And another! Wowz</span>
</div>
</div>

Solved it! Solution was simply to force a queue when removing/adding the node, using a setTimeout. Like so:
window.addEventListener('load', () => {
let marqueeWrapper = marquee.parentNode;
// Remove marquee
marquee.remove();
// Re-add, with forced queuing
setTimeout(() => {
marqueeWrapper.append(marquee);
}, 0)
})
This forces Safari to completely re-render the node, and appears to fix the issue

Related

Problem with custom link cursor in Chrome

I want to use a custom cursor on hover for links. It works fine on Safari and Firefox, but on Chrome it jumps back to the default cursor for a millisecond, and then goes to my custom cursor.
Codepen: https://codepen.io/ford1234/pen/vwzRgJ
I've recreated the problem in Codepen but it also happens on the site I'm applying it to.
<div>
<p>Hello</p>
</div>
<style>
html {
cursor: url('http://telephoneavenue.art/wp-content/uploads/2019/02/black-01.png'), auto;
}
a:hover {
cursor: url('http://telephoneavenue.art/wp-content/uploads/2019/05/blacktriangle-small17px.png'), auto;
}
Expected result: A transition from the circle to the triangle.
Actual result: A transition from the circle, to the default hand pointer, to the triangle.
remove ":hover" on your selector.
your selector must be;
a{
cursor: url('http://telephoneavenue.art/wp-content/uploads/2019/05/blacktriangle-small17px.png'),
auto; }
Have you tried out a transition-duration or a transition-delay? This is used to define the duration of a specified transition. This is the length of time it will take for the targeted element to transition between two defined states.
.example {
transition-duration: 0s;
// or
transition-delay: -1s;
}
Also keep in mind that some features are only supported by certain versions of the browser.

Iframe hover opacity change not working in Microsoft Edge

I have a simple class defined in css for an iframe that holds a slideshow pulled from Smugmug. The basic function is a 25% opacity when the user does not hover over the slideshow and a transition to 100% opacity when the user hovers over the iframe area. This works in Chrome, Firefox and Safari, but not in Microsoft Edge. In Edge, I get the 25% opacity and transitions, but the hover does not lift the opacity.
Does anyone know why Edge does not work? Am I missing some directive for the Edge browser?
Here is an example of the iframe . . .
<div id=avalon class="slide">
<iframe src="https://johndoc1.smugmug.com/frame/slideshow? key=M9jkGB&autoStart=1&captions=1&navigation=1&playButton=1&randomize=0&speed=4&transition=fade&transitionSpeed=2" width="1100" height="825" frameborder="no" scrolling="no"></iframe>
</div>
Here is the css for the slide class . . .
/* Slideshow style */
.slide {
width:80%;
margin-left:auto;
margin-right:auto;
background: #2F4538;
}
.slide iframe{
opacity:0.25;
transition: opacity 0.5s linear;
max-height: 100%;
max-width: 100%;
}
.slide iframe:hover{
opacity:1.0;
}
Thanks.
John Doc
I know that this is actually not very clean, but I tried several things and I was not able to make it run just via css. Maybe Edge is missing some directive in render core ... who knows.
Anyway... I was able to run it via javascript, in this solution I use jQuery as it is closer to me, I will add pure JS solutions as soon as I find, why jsfiddle cannot see my declared functions...
So - here it is:
https://jsfiddle.net/f4y0uugc/2/
note that jQuery code has to be on document ready.
theese are the major changes:
$(".slide iframe").on("mouseover", function(){
$(this).addClass("slideiframe");
});
$(".slide iframe").on("mouseout", function(){
$(this).removeClass("slideiframe");
});
and css added just
.slideiframe{
opacity:1.0 !important;
}
//EDIT - pure JS
Ok, here is a pure solution:
https://jsfiddle.net/f4y0uugc/4/
here you have your JS:
var slide;
function op025(){
slide = document.getElementsByClassName("slide")[0].getElementsByTagName("iframe")[0];
slide.style.opacity = 0.5;
}
function op1(){
slide = document.getElementsByClassName("slide")[0].getElementsByTagName("iframe")[0];
slide.style.opacity = 1;
}
Note, that classes and elements are arrays, yo if you have more than one matches, you will have to add IDs, or iterate in cycle for each solution.
Next, you have to set up calls of functions, so in html:
<div id=avalon class="slide">
<iframe onmouseover="op1();" onmouseout="op025();" src="https://johndoc1.smugmug.com/frame/slideshow? key=M9jkGB&autoStart=1&captions=1&navigation=1&playButton=1&randomize=0&speed=4&transition=fade&transitionSpeed=2" width="1100" height="825" frameborder="no" scrolling="no"></iframe>
</div>
Also, for both solutions, as this is scripted soltion, I have reduced transition duration to 0.2s as if user quickly moves cursor over the edge, opacity behavior is not clean.
I will try something pure css more, and I will let you know if I find something.

mix-blend-mode is broken by 3D transformations on page

I was fiddling with the mix-blend-mode property. Everything works fine until I add something like transform: perspective(100px) or any other 3d transformation anywhere on the page, then it breaks completely. The transformation is applied but the blend mode is gone.
I tested on chrome and firefox and on linux and windows and it's the same everywhere, however on a different computer it worked fine (I don't remember what version of chrome it had and was running ubuntu).
Is that something that can be fixed with CSS or is it possibly just a hardware / GPU drivers issue?
I put background-blend-mode in tags because the mix-blend-mode tag doesn't exist yet, however this property strangely works completely fine and isn't broken by transformations.
Here is a codepen of what I am trying to achieve:
http://codepen.io/vnenkpet/pen/avWvRg
The lightning shouldn't have it's black background flashing with it but should be blended smoothly with the page background.
EDIT:
I have just found out that it actually DOES work in Firefox. Is this therefore a chrome bug? 3D Transforms shouldn't break blend mode as far as I know...
I was having a similar issue, except that applying a mix-blend-mode (multiply) higher on the page broke my transforms lower on the page (using Chrome on Mac). I was able to fix this by applying a z-index rule to the mix-blend-mode div (don't forget to set a position, too).
I'm not entirely sure if this is a bug or if it is expected behavior due to the properties of stacking contexts, though.
You can try to also apply a null transform (3D layer promotion) to the element that has mix-blend-mode specified:
.content {
mix-blend-mode: difference;
transform: translate3d(0, 0, 0);
}
This way, Chrome can successfully blend the two 3D layers together, instead of failing to blend a 3D layer and a 2D layer.
Here's a snippet demonstrating the problem and the solution:
function change(event) {
var content = document.querySelector(".content")
content.className = event.target.checked ? "content content-with-transform" : "content"
}
.parent {
text-align: center;
padding: 2rem;
font-size: 5rem;
font-weight: 700;
}
.fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 4rem;
background-color: #AB1795;
transform: translate3d(0, 0, 0);
z-index: -1;
}
.content {
mix-blend-mode: difference;
background-color: #167CFB;
}
.content-with-transform {
transform: translate3d(0, 0, 0);
}
<div class="parent">
<div class="fixed"></div>
<div class="content">Content</div>
</div>
<label><input type="checkbox" onchange="change(event)"/> Also transform other element</label>
(I stumbled onto this problem when using will-change: transform, not an actual transform, but the solution is the same.)
I realise this is a pretty old thread, but I was having the same issue with janky transforms in Webkit/Blink using the Masonry Isotope plugin with a mix-blend-mode overlay on the grid sections until I added the following CSS to the element that was being transformed. i.e. the masonry grid element
I'm answering this in case it helps someone in future.
[your-selector-goes-here] {
perspective:1000px;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}

CSS3 animation: inherit property for keyframe at 0%

I have following problem:
I want to use CSS3 animation with keyframe rules (#keyframes myname {})
Problem is, I want to use SINGLE at-rule keyframe animation for multiple elements, but these elements have different position each. So, #keyframes animation should inherit original properties of selector at 0% (or from {}) rule, so animation would originate at original position and size of selector.
like this one:
#keyframes myanim {
0% {
left: inherit;
top: inherit;
width:inherit;
height:inherit;
}
100% {
top: 50%;
left:50%;
width: 100%;
height: 60%;
}
}
And selector:
.myselector-one {
top:10em;
left:0em;
width:10em;
height:5em;
animation: myanim 1s;
}
.myselector-two {
top:20em;
left:30em;
width: 15em;
height: 8em;
animation: myanim 1s;
}
Goal is to get original properties of each selector, put them to 0% keyframe as originating position and size and animate to 100% with same properties for every selector.
Is this possible or I have to create animation for each selector? Problem is, that I wouldn't know their position as it's going to be dynamically calculated.
Please, no jQuery solution, just pure CSS3 one! I DON't want to use jQuery animate method.
Hmmm, I have been looking into this problem for a little while and I don't think it is possible using CSS Animations. I've been trying with this JSFiddle a number of different things and running through tutorials about CSS Animations (seeing if anyone mentions the same issue) and also other information about it.
I did then come to the realization of what you are trying to accomplish and I think perhaps there is an easier solution. IF the locations are being dynamically calculated, I would assume you are indeed using some level of Javascript (or some crazy advanced CSS calc method) so I would at least think you would be setting the style of the DOM element with new left or top positions. While I'm not talking about jQuery animation, what you can do instead is use CSS3 Transitions in conjunction with Javascript. This means you get some of the benefits of CSS Animations like the computation being more native (hardware accelerated) as opposed to being done in Javascript but you do lose out on a few things.
Most importantly, there are no transition events for the browser like there is for CSS Animations nor can you have as fine-grain control over keyframes but you do get to work with it dynamically. I only suggest it as your question only refers to a keyframe of 0% and one of 100%.
The issue with what you were trying to do is that using CSS Animations needs to be static and won't pull the values that were currently set to do the animation (unlike transitions). When you are using inherit, you are actually trying to make it use the top and left etc. from it's parent.
Again, this doesn't meet your requirement of pure CSS but using CSS Transitions does mean only limited DOM manipulation via Javascript rather than what jQuery animate does.
Here is another JSFiddle using no jQuery (only very basic javascript to set a class or inline-styles) and CSS Transitions.
HTML
<div class="myselector-one" id="a">Click Me</div>
<div class="myselector-two" id="b">Click Me</div>
Javascript
document.getElementById("a").onclick = function()
{
if (this.className.indexOf("animate-complete")!=-1)
{
this.className = this.className.replace(/animate\-complete/g,"");
}
else
{
this.className += " animate-complete";
}
}
var bIsTransitioned = false;
document.getElementById("b").onclick = function()
{
if (!bIsTransitioned)
{
this.style.top = "50%";
this.style.left = "50%";
this.style.width = "100%";
this.style.height = "60%";
}
else
{
this.style.top = "";
this.style.left = "";
this.style.width = "";
this.style.height = "";
}
bIsTransitioned = !bIsTransitioned;
}
CSS
.myselector-one {
top:10em;
left:0em;
width:10em;
height:5em;
transition:all 2s;
background-color:#ffaa99;
position:absolute;
}
.myselector-two {
top:4em;
left:30em;
width: 15em;
height: 8em;
transition:all 2s;
background-color:#aaff99;
position:absolute;
}
.animate-complete
{
top: 50%;
left:50%;
width: 100%;
height: 60%;
}
An update for anyone who lands on this thread. According to MDN omitting the 0% / from selector would have the desired behaviour. https://developer.mozilla.org/en-US/docs/Web/CSS/#keyframes
Valid keyframe lists
If a keyframe rule doesn't specify the start or
end states of the animation (that is, 0%/from and 100%/to), browsers
will use the element's existing styles for the start/end states. This
can be used to animate an element from its initial state and back.

css3 transition animation on load?

Is it possible to use CSS3 transition animation on page load without using Javascript?
This is kind of what I want, but on page load:
image-slider.html
What I found so far
CSS3 transition-delay, a way to delay effects on elements. Only works on hover.
CSS3 Keyframe, works on load but are extremly slow. Not useful because of that.
CSS3 transition is fast enough but don't animate on page load.
You can run a CSS animation on page load without using any JavaScript; you just have to use CSS3 Keyframes.
Let's Look at an Example...
Here's a demonstration of a navigation menu sliding into place using CSS3 only:
#keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
header {
/* This section calls the slideInFromLeft animation we defined above */
animation: 1s ease-out 0s 1 slideInFromLeft;
background: #333;
padding: 30px;
}
/* Added for aesthetics */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}
<header>
Home
About
Products
Contact
</header>
Break it down...
The important parts here are the keyframe animation which we call slideInFromLeft...
#keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
...which basically says "at the start, the header will be off the left hand edge of the screen by its full width and at the end will be in place".
The second part is calling that slideInFromLeft animation:
animation: 1s ease-out 0s 1 slideInFromLeft;
Above is the shorthand version but here is the verbose version for clarity:
animation-duration: 1s; /* the duration of the animation */
animation-timing-function: ease-out; /* how the animation will behave */
animation-delay: 0s; /* how long to delay the animation from starting */
animation-iteration-count: 1; /* how many times the animation will play */
animation-name: slideInFromLeft; /* the name of the animation we defined above */
You can do all sorts of interesting things, like sliding in content, or drawing attention to areas.
Here's what W3C has to say.
Very little Javascript is necessary:
window.onload = function() {
document.body.className += " loaded";
}
Now the CSS:
.fadein {
opacity: 0;
-moz-transition: opacity 1.5s;
-webkit-transition: opacity 1.5s;
-o-transition: opacity 1.5s;
transition: opacity 1.5s;
}
body.loaded .fadein {
opacity: 1;
}
I know the question said "without Javascript", but I think it's worth pointing out that there is an easy solution involving one line of Javascript.
It could even be inline Javascript, something like that:
<body onload="document.body.className += ' loaded';" class="fadein">
That's all the JavaScript that's needed.
I think I have found a sort of work around for the OP question - instead of a transition beginning 'on.load' of the page - I found that using an animation for an opacity fade in had the same effect, (I was looking for the same thing as OP).
So I wanted to have the body text fade in from white(same as site background) to black text colour on page load - and I've only been coding since Monday so I was looking for an 'on.load' style thing code, but don't know JS yet - so here is my code that worked well for me.
#main p {
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0}
to { opacity: 1}
}
And for whatever reason, this doesn't work for .class only #id's(at least not on mine)
Hope this helps - as I know this site helps me a lot!
CSS only with a delay of 3s
a few points to take here:
multiple animations in one call
we create a wait animation that just delays the actual one (the second one in our case).
Code:
header {
animation: 3s ease-out 0s 1 wait, 0.21s ease-out 3s 1 slideInFromBottom;
}
#keyframes wait {
from { transform: translateY(20px); }
to { transform: translateY(20px); }
}
#keyframes slideInFromBottom {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
Well, this is a tricky one.
The answer is "not really".
CSS isn't a functional layer. It doesn't have any awareness of what happens or when. It's used simply to add a presentational layer to different "flags" (classes, ids, states).
By default, CSS/DOM does not provide any kind of "on load" state for CSS to use. If you wanted/were able to use JavaScript, you'd allocate a class to body or something to activate some CSS.
That being said, you can create a hack for that. I'll give an example here, but it may or may not be applicable to your situation.
We're operating on the assumption that "close" is "good enough":
<html>
<head>
<!-- Reference your CSS here... -->
</head>
<body>
<!-- A whole bunch of HTML here... -->
<div class="onLoad">OMG, I've loaded !</div>
</body>
</html>
Here's an excerpt of our CSS stylesheet:
.onLoad
{
-webkit-animation:bounceIn 2s;
}
We're also on the assumption that modern browsers render progressively, so our last element will render last, and so this CSS will be activated last.
add this to your css for fade in animation
body{animation: 2s ease-out 0s 1 FadeIn;}
#keyframes FadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
increase the ease-out time if you want it to load slower
Even simplier solution (still with [one line inline] javascript):
Use this as the body tag:
Note that body. or this. did not work for me. Only the long ; querySelector allow the use of classList.remove (Linux Chromium)
<body class="onload" onload="document.querySelector('body').classList.remove('onload')">
and add this line on top of your other css rules.
body.onload *{ transform: none !important; }
Take note that this can apply to opacity (as requested by OP [other posters] ) simply by using opacity as a transition trigger instead. (might even work on any other css ruling in the same fashion and you can use multiple class for explicity delay between triggering)
The logic is the same. Enforce no transform (with :none !importanton all child element of body.onloadand once the document is loaded remove the class to trigger all transition on all elements as specified in your css.
FIRST ANSWER BELOW (SEE EDIT ABOVE FOR SHORTER ANSWER)
Here is a reverse solution:
Make your html layout and set the css accordingly to your final result (with all the transformation you want).
Set the transition property to your liking
add a class (eg: waitload) to the elements you want to transform AFTER load. The CSS keyword !important is the key word here.
Once the document is loaded, use JS to remove the class from the elements to to start transformation (and remove the transition: none override).
Works with multiple transition on multiple elements. Did not try cross-browser compatibility.
div {
width: fit-content;
}
#rotated {
transform: rotate(-50deg)/* any other transformation */
;
transition: 6s;
}
#translated {
transform: translate(90px)/* any other transformation */
;
transition: 6s;
}
.waitload {
transform: none !important;
}
<div id='rotated' class='waitload'>
rotate after load
</div>
<div id='translated' class='waitload'>
trasnlate after load
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', init);
function init() {
[...document.querySelectorAll('.waitload')]
.map(e => e.classList.remove('waitload'));
}
</script>
Similar to #Rolf's solution, but skip reference to external functions or playing with class. If opacity is to remain fixed to 1 once loaded, simply use inline script to directly change opacity via style. For example
<body class="fadein" onload="this.style.opacity=1">
where CSS sytle "fadein" is defined per #Rolf,defining transition and setting opacity to initial state (i.e. 0)
the only catch is that this does not work with SPAN or DIV elements, since they do not have working onload event
start it with hover of body than It will start when the mouse first moves on the screen, which is mostly within a second after arrival, the problem here is that it will reverse when out of the screen.
html:hover #animateelementid, body:hover #animateelementid {rotate ....}
thats the best thing I can think of: http://jsfiddle.net/faVLX/
fullscreen: http://jsfiddle.net/faVLX/embedded/result/
Edit see comments below:
This will not work on any touchscreen device because there is no hover, so the user won't see the content unless they tap it. – Rich Bradshaw
Ok I have managed to achieve an animation when the page loads using only css transitions (sort of!):
I have created 2 css style sheets:
the first is how I want the html styled before the animation...
and the second is how I want the page to look after the animation has been carried out.
I don't fully understand how I have accomplished this but it only works when the two css files (both in the head of my document) are separated by some javascript as follows.
I have tested this with Firefox, safari and opera. Sometimes the animation works, sometimes it skips straight to the second css file and sometimes the page appears to be loading but nothing is displayed (perhaps it is just me?)
<link media="screen,projection" type="text/css" href="first-css-file.css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="../js/jQuery JavaScript Library v1.3.2.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||
(navigator.userAgent.match(/iPad/i))) {
$(".container .menu-text").click(function(){ // Update class to point at the head of the list
});
}
});
</script>
<link media="screen,projection" type="text/css" href="second-css-file.css" rel="stylesheet" />
Here is a link to my work-in-progress website: http://www.hankins-design.co.uk/beta2/test/index.html
Maybe I'm wrong but I thought browsers that do not support css transitions should not have any issues as they should skip straight to the second css file without delay or duration.
I am interested to know views on how search engine friendly this method is. With my black hat on I suppose I could fill a page with keywords and apply a 9999s delay on its opacity.
I would be interested to know how search engines deal with the transition-delay attribute and whether, using the method above, they would even see the links and information on the page.
More importantly I would really like to know why this is not consistent each time the page loads and how I can rectify this!
I hope this can generate some views and opinions if nothing else!
If anyone else had problems doing two transitions at once, here's what I did. I needed text to come from top to bottom on page load.
HTML
<body class="existing-class-name" onload="document.body.classList.add('loaded')">
HTML
<div class="image-wrapper">
<img src="db-image.jpg" alt="db-image-name">
<span class="text-over-image">DB text</span>
</div>
CSS
.text-over-image {
position: absolute;
background-color: rgba(110, 186, 115, 0.8);
color: #eee;
left: 0;
width: 100%;
padding: 10px;
opacity: 0;
bottom: 100%;
-webkit-transition: opacity 2s, bottom 2s;
-moz-transition: opacity 2s, bottom 2s;
-o-transition: opacity 2s, bottom 2s;
transition: opacity 2s, bottom 2s;
}
body.loaded .text-over-image {
bottom: 0;
opacity: 1;
}
Don't know why I kept trying to use 2 transition declarations in 1 selector and (not really) thinking it would use both.
You could use custom css classes (className) instead of the css tag too.
No need for an external package.
import React, { useState, useEffect } from 'react';
import { css } from '#emotion/css'
const Hello = (props) => {
const [loaded, setLoaded] = useState(false);
useEffect(() => {
// For load
setTimeout(function () {
setLoaded(true);
}, 50); // Browser needs some time to change to unload state/style
// For unload
return () => {
setLoaded(false);
};
}, [props.someTrigger]); // Set your trigger
return (
<div
css={[
css`
opacity: 0;
transition: opacity 0s;
`,
loaded &&
css`
transition: opacity 2s;
opacity: 1;
`,
]}
>
hello
</div>
);
};
Not really, as CSS is applied as soon as possible, but the elements might not be drawn yet. You could guess a delay of 1 or 2 seconds, but this won't look right for most people, depending on the speed of their internet.
In addition, if you want to fade something in for instance, it would require CSS that hides the content to be delivered. If the user doesn't have CSS3 transitions then they would never see it.
I'd recommend using jQuery (for ease of use + you may wish to add animation for other UAs) and some JS like this:
$(document).ready(function() {
$('#id_to_fade_in')
.css({"opacity":0}) // Set to 0 as soon as possible – may result in flicker, but it's not hidden for users with no JS (Googlebot for instance!)
.delay(200) // Wait for a bit so the user notices it fade in
.css({"opacity":1}); // Fade it back in. Swap css for animate in legacy browsers if required.
});
Along with the transitions added in the CSS. This has the advantage of easily allowing the use of animate instead of the second CSS in legacy browsers if required.

Resources