Jump to content

Search the Community

Showing results for tags 'transitions'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 4 results

  1. I've just been playing with CSS media queries and transitions, to apply different layouts to different screen sizes, and I came across an unexpected effect when testing in Internet Explorer 11 and Google Chrome. Firefox doesn't seem to be affected, and reacts in the way I would expect. In this example there are three div elements, one of which is a container. Here is the HTML. <div id="container"> <div id="heading">HEADING</div> <div id="links"> <ul> <li>Link 1</li> <li>Link 2</li> <li>Link 3</li> <li>Link 4</li> <li>Link 5</li> </ul> </div></div> I applied a CSS transition that would resize the height of both div elements, as well as the font within them; all in just 0.5s. Here's the CSS. /* Below is the default styles */html, body, div, img, p, span, header, nav, ul { margin: 0 auto; border: 0; padding: 0; font-size: 1em; position: relative; -webkit-transition: height 0.5s ease, font 0.5s ease; transition: height 0.5s ease, font 0.5s ease; } ul { list-style-type: none; }li { display: inline; }#container { } #heading { width: 100%; height: 200px; background-color: red; font-family: "segoe ui light"; font-size: 50px; color: white; }#links { width: 100%; height: 50px; background-color: blue; font-family: "segoe ui light"; font-size: 30px; color: white; }/* Below is the styles applied to medium sized displays (tablets etc.) */@media screen and (min-width: 701px) and (max-width: 900px) { #heading { height: 100px; font-size: 40px; }#links { height: 40px; font-size: 20px;} }/* Below is the styles applied to small displays (mobile phones etc.) */@media screen and (max-width: 700px) {#heading { height: 50px; font-size: 30px; } #links { height: 30px; font-size: 15px; }} The height of both div elements are applied simultaneously, with the transition completing in 0.5s. However, the amendment to the size of the font doesn't apply simultaneously and, in fact, were amended almost as if they were triggered separately at different times. That is, the first div was affected by the change, which took 0.5s. Then, the second div was affected by the change, which took an additional 0.5s. So, the font transition took a total of 1s to complete. But, by definition, I would have expected the transition to be applied to both div elements at the same time and to complete within 0.5s just like the height. Is anyone aware of any reason why the font transition may be interpreted differently to the height transition?
  2. Hi all - My end goal is a static image that, when hovered, will darken slightly and white text will slide up and fade in from the bottom of the frame. But I'm not sure of two things: first, how do I have a single div container/hover "area" trigger both animations, rather than just the top-most one? Second, as the animation stands now, it only triggers when I hover over the image - which has been positioned out of frame so as to make the fade/slide-in animation look right. How can I specify the affected hover area so that it triggers an image to arrive from out of frame? Since I suspect that was really unclear, here's what I've got so far. #backgroundimg img { /* static image background*/position: absolute;top: 0;left: 0;z-index: 2;} #anisquare { /* dark square that fades in on hover; width and height are same dimensions as my background image */width:293px;height:272px;position: absolute;top:0;left:0;z-index: 3;background:black;opacity:0;transition:opacity .3s;-moz-transition:opacity .3s; /* Firefox 4 */-webkit-transition:opacity .3s; /* Safari and Chrome */-o-transition:opacity .3s; /* Opera */} #anisquare:hover{opacity: 0.38;} #fadingtext { /* here's where my confusion starts... */position:absolute;top: 0;left: 0;width: 293px;height: 272px;} #fadingtext img {position:absolute;top: 280px;left: -1px;width: 191px;height: 45px;z-index:4;opacity:0;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;} #fadingtext:hover { opacity: 1; top: 228px;left: -1px;} As it stands, the image only rolls up and appears when I mouse over the image. I would like it to animate when I mouse over the area specified by the #fadingtext div tag. Also, at the moment, both hover animations are mutually exclusive - eventually I want hovering over a single div container to activate both of them. Many, many thanks in advance!!
  3. Hello! I'm new here and I am dealing with a little problem which I hope you guys can help me with! What I want to achieve: Basically what I want to happen is that when the logo gets hovered the black message box will fade in using css transitions. Take a look at the image below and you will get me. And when the mouse moves away from the logo the message box fades out to zero again. But something is wrong, I dont know what. https://docs.google.com/file/d/0B0ONzhkyFUwhQXNOTFJzb0lVSFE/edit?pli=1 <-- image to make you understand. What I am dealing with: Thanks for staying with me, here is my HTML, CSS AND jQuery HTML: <div id="colume"> <div id="logo-to-hover"><a href="#"><img src="images/villave-logo.png" alt="villave-logo" width="220" height="53" /></a> </div> <!-- end logo-to-hover--> </div> <!-- end colume--> <div id="message"> <div id="box-1" class><p>Byggvareforhandler</p> </div> <!-- end box1 --> </div><!-- end message--> jQuery: <script>$(function() { $( "#logo-to-hover" ).hover(function() { $( "#box-1" ).toggleClass( "box-a"); return false; });}); </script> CSS: #logo-to-hover { width: 220px; height: 55px; margin-right: 20px; float: left; } #boxes { width: 940px; height: 71px; margin-left: auto; margin-right: auto; position: absolute; } #box-1 { height: 44px; width: 200px; margin-left: 10px; margin-right: 10px; background-image: url(../images/hoverbg.png); float: left; text-align: center; opacity: 0; -webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out; }.box-a { opacity: 1; -webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out; }
  4. I'm using the following code. By clicking on div id="popUpPane", the div and it's childs should appear and slowly fade in.By clicking on the div again, it should slowly fade out and then disappear.Firefox and Chrome (which is webkit too) behave that way and I know Safari did in an earlier version, too. But right know on Safari and on Safari Mobile nothing happens at all when I click on "popUpPane".Is this a bug in Safari or is there something I could change to come back to the intended behaviour?One addition: If I set -webkit-transition to -webkit-transition: opacity .5s ease-in-out; it works fine but the transition only appears on the first click. There's no transitions after that first one... If I delete the opacity-part in the java-script the opo-up works but there's no transition.All other transitions on my site are working. But they all use only opacity and no visibility.Here's my code:CSS:#popUpPane { white-space:normal; position:fixed; width:100%; height:100%; top:0; left:0; text-align:center; vertical-align:middle; visibility:hidden; z-index:90; } #greyOut { position:fixed; width:100%; height:100%; top:0; left:0; background-color:#000; opacity:0; }#popUpPicCanvas { position:relative; top:50%; margin-top:-325px; display:inline; opacity:0; z-index:100; }.fade { -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }HTML: <div id="popUpPane" onClick="noPopUp()"> <div id="greyOut" class="fade"> </div> <canvas id="popUpPicCanvas" width="1000" height="650" title="Bastian Beuttel" class="fade"></canvas> </div>Javascript:var popUpPane = document.getElementById("popUpPane"), greyOut = document.getElementById("greyOut"), popUpPicCanvas = document.getElementById("popUpPicCanvas"), popCanvasContext = popUpPicCanvas.getContext("2d");var doPopUp = function(source,x,y){ var popUpPic = document.getElementById("pic"+source); popCanvasContext.canvas.width = x; popCanvasContext.canvas.height = y; popCanvasContext.drawImage(popUpPic, 0, 0,x,y); popUpPane.style.visibility = "visible"; greyOut.style.opacity = "0.7"; popUpPicCanvas.style.opacity = "1";};var noPopUp = function(){ greyOut.style.opacity = "0"; popUpPicCanvas.style.opacity = "0"; popUpPane.style.visibility = "hidden";};I hope someone can help me.Thanks for your responds!
  • Create New...