Hola, sigo son lograr que el DIV entre desde la izquierda y que NO APAREZCA de golpe.
Ademas el
radius-border no funciona bien en Safari:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border:0;
}
html, body {
width: 100%;
height: 100%;
background:#000;
color:#fff;
}
.medidas{
min-width: 700px; /* mismo width de #contenedor */
max-width: 700px; /* mismo width de #contenedor */
min-height: 250px; /* mismo height de #contenedor */
max-height: 250px; /* mismo height de #contenedor */
}
div#contenedor{
margin: 0 auto;
overflow: hidden;
}
div#contenedor div.slider{
position: relative;
left: 0;
top: 0;
text-align:center;
font-size:9em;
border-radius:18px;
}
div#contenedor div.slider div{
border-radius:18px;/*Para S*/
float: left;
}
.txt{
background:#7dc12b;
}
.txt2{
background:#aa0000;
}
.txt3{
background:#ffb878;
}
.txt4{
background:#ffedd7;
color:#000;
}
h1,h2,.pp{
text-align:center;
}
</style>
<script type="text/javascript">
var hielo=3000;
function mover(posInicial,posFinal,slider){
if(posInicial<=posFinal){
(function desplazar(){
setTimeout(function(){
if(posInicial>=posFinal){
var clonarImagen=slider.getElementsByTagName('div')[0].cloneNode(true);
slider.appendChild(clonarImagen);
slider.removeChild(slider.getElementsByTagName('div')[0]);
slider.style.left=0;
return;
}
posInicial+=2;
slider.style.left=-posInicial+'%';
desplazar();
},18);
})();
}
setTimeout(function(){mover(0,posFinal,slider);},hielo);
}
window.onload=setTimeout(function(){var slider=document.querySelector('div.slider');mover(0,100,slider);},hielo);
</script></head><body><h2>Bienvenido!</h2>
<div id="contenedor" class="medidas">
<div class="slider">
<div class="txt medidas">UNO<br /><img src="http://www.w3.org/Icons/valid-html20.png" /></div>
<div class="txt2 medidas">DDD<br /><img src="http://www.w3.org/Icons/valid-html401-blue.png" /></div>
<div class="txt3 medidas">TTT<br /><img src="http://www.w3.org/Icons/valid-svgtiny12.png" /></div>
<div class="txt4 medidas">QQQ<br /><img src="http://validator.w3.org/images/v15445.gif" /></div>
</div>
</div><hr />
<p>Info...</p><p>Info...</p><p>Info...</p><hr /><p class="pp">Info...</p><p class="pp">Info...</p><p class="pp">Info...</p><p class="pp">Info...</p><p class="pp">Info...</p><p class="pp">Info...</p></body></html> Alguna ayuda extra... ¿?