Jump to content

Search the Community

Showing results for tags 'animations'.

  • 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


  • Community Calendar

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 7 results

  1. I Can't Understand The Purpose Of That Property,And What Is The Difference Between animation-fill-mode:none; And animation-fill-mode:forwards;?...
  2. Hello There. I'am Making What It Seems Like A Function To Animate The Background Color Of An Element,But I Have A Problem. This Is The Code: <script> function color(id,duration,r_start,g_start,b_start,r_end,g_end,b_end) { var element=document.getElementById(id); var parameter=setInterval(colorGradually,50*duration); function colorGradually() { if (r_start==r_end && g_start==g_end && b_start==b_end) { clearInterval(parameter); } else { for (var i=r_start,var j=g_start,var k=b_start; i<r_end && j<g_end && k<b_end;i++,j++,k++) { element.style.backgroundColor="rgb("+i+","+j+","+k+")"; } } } } </script> <div id="test" style="width:100%;height:200px;background-color:rgb(128,128,128)"></div> <input type="button" onclick="color('test',1,128,128,128,255,255,255)" value="Change"> The Script Isn't Working At All. I've Checked The Script With Esprisma Code Validator And The Code Was Syntactically Valid,But I Can't Recognize The Problem...
  3. This Code Isn't Working: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(document).ready(function(){ $("#area").animate({ backgroundImage:"url('image2.png')" },2000); }); </script> <style> #area { width:100%; height:600px; background-image:url("image2.png"); } </style> <div id="area"></div>
  4. Hi, I am trying to come up with a preloader. The problem is none of the animations start. What I am trying to achieve is the following sequence: preloader_wrapper fade in, then fade out as soon as the document is loaded. JS: jQuery(document).ready(function($) {/* * Preloader */$('#preloader_wrapper').addClass('preloader_fadein');$(window).load(function(){$('#preloader_wrapper').addClass('preloader_fadeout');$('header *').css({ -webkit-animation-play-state: 'running'; -moz-animation-play-state: 'running'; -o-animation-play-state: 'running'; animation-play-state: 'running';});});}); CSS: .preloader_wrapper { position: absolute; top: 50%;}.preloader_fadein { -webkit-animation: preloader_fadein 2s ease; -moz-animation: preloader_fadein 2s ease; animation: preloader_fadein 2s ease;}@keyframes preloader_fadein { from { opacity: 0; left: 45%; } to { opacity: 1; left: 50%; }}.preloader_fadeout { -webkit-animation: preloader_fadeout 2s ease; -moz-animation: preloader_fadeout 2s ease; animation: preloader_fadeout 2s ease;}@keyframes preloader_fadeout { from { opacity: 1; left: 50%; } to { opacity: 0; left: 55%; }}.header * { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused;}
  5. rgrisham

    Animation ?

    Started on the 2D tutorial and could not get animation to work - IS this explained further along in the animation section of CSS3? Or, is animation in JavaScript? I was hoping it wasn't a computer setting problem because when I was in the CSS3 2D transformation tutorial, the animation was not working. Thanks Rich
  6. 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!!
  7. I have a problem with my website. I'm trying to build a navigation bar that has another one underneath it and that appears after you hover a top level menu item: XHTML 1.0 <div id="navContainer"><div id="navigation"> <ul id="nav"> <li id="item1"><a href="#">Item 1</a></li> <li id="item2"><a href="#">Item 2</a> <ul id="submenu 1"> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Sub Item 2.2</a></li> <li><a href="#">Sub Item 2.3</a></li> </ul> </li> <li id="item3"><a href="#">Item 3</a> <ul> <li><a href="#">Sub Item 3.1</a></li> <li><a href="#">Sub Item 3.2</a></li> <li><a href="#">Sub Item 3.3</a></li> </ul> </li> <li id="item4"><a href="#">Item 4</a></li> </ul> </div></div> CSS 3 /* ---------- 6. CSS 3 Menu ---------- */#navigation {width: 738px;height: 40px;clear: both;background: #5d801a;-moz-border-radius: 10px;-webkit-border-radius: 10px;}/* STYLING THE FIRST-LEVEL MENU */ul#nav {float: left;width: 438px;margin: 0 150px;list-style: none;}ul#nav li {display: inline;}/* STYLING THE LINKS IN THE TOP-LEVEL MENU */ul#nav li a {float: left;font: bold 1.1em arial,verdana,tahoma,sans-serif;line-height: 40px;color: #ffffff;text-decoration: none;text-shadow: 1px 1px 1px #880000;margin: 0 0 10px 0;padding: 0 30px;background: #5d801a padding-box;-moz-border-radius-topright: 10px;-webkit-border-top-right-radius: 10px;-moz-border-radius-topleft: 10px;-webkit-border-top-left-radius: 10px;}/* APPLIES THE ACTIVE STATE FOR THE LINKS IN THE TOP-LEVEL MENU */ul#nav li:hover > a {color: #ffffff;text-decoration: none;text-shadow: 1px 1px 1px #330000;background: #6f1747 padding-box;;-moz-border-radius: 10px;-webkit-border-radius: 10px;margin: 0 0 10px 0;}/* THE SUBMENU LIST HIDDEN BY DEFAULT */ul#nav ul {display: none;}/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */ul#nav li:hover > ul {position: absolute;display: block;width: 360px;height: 30px;margin: 46px 79px;background: #6f1747;-moz-background-origin: content-box;-webkit-background-origin: content-box;-moz-border-radius: 20px/40px;-webkit-border-radius: 20px/40px;-moz-animation: cssMenu 3s;-webkit-animation: cssMenu 3s;}/* STYLING THE LINKS IN THE SUBMENU */ul#nav li:hover > ul li a {float: left;font: bold 1.1em arial,verdana,tahoma,sans-serif;line-height: 30px;color: #ffffff;text-decoration: none;text-shadow: 1px 1px 1px #110000;margin: 0 5px;padding: 0 20px;background: #6f1747;-moz-background-origin: content-box;-webkit-background-origin: content-box;-moz-animation: cssMenu 3s;-webkit-animation: cssMenu 3s;}ul#nav li:hover > ul li a:hover {color: #120000;text-decoration: none;text-shadow: none;}ul#nav li:hover > ul#submenu1{position: absolute;display: block;margin: 46px 0; <----padding: 0;margin-left: -24px;-moz-background-origin: content-box;-webkit-background-origin: content-box;-moz-animation: cssMenu 3s;-webkit-animation: cssMenu 3s;}/* ---------- 7. CSS 3 Menu's Animation ---------- */@-moz-keyframes cssMenu {0% {background: #cccccc content-box; color: #ffffff;}100% {background: #6f1747 content-box; text-shadow: 1px 1px 1px #110000; }}@-webkit-keyframes cssMenu {0% {background: #cccccc content-box; color: #ffffff;}100% {background: #6f1747 content-box; text-shadow: 1px 1px 1px #110000;}} The issue is this: Is there a way to control the timing of the :hover property?(CSS only or Javascript if it isn't possible with CSS) Because I want the submenu to be 6px under the top level menu (as you noticed from the 46px margin rule) but in the second I leave the parent item (so I stop hovering it) the submenu will instantly disappear without giving the time to the user to click on the submenu items.And if there isn't a way to control the :hover property, what's the best way to achieve the effect? Thank you all
  • Create New...