Rectangle 27 91

You can use css3 animations to flash an element

.flash {
  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 1;

  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 1;

  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 1;
}

@keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-webkit-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-moz-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}

@-ms-keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: #fbf8b2; }
    100% { background-color: transparent; }
}
jQuery(selector).addClass("flash");

Nice solution, if it needs to work only once. After the class has been added, subsequently adding the class does (logically) not result in flashing the element.

The best idea ever. I used a settimeout to remove the class 2 seconds after the effect

Here's an example of removing the class after the animation's done so you can keep flashing it. jsfiddle.net/daCrosby/eTcXX/1

Great, that works, but note that the correct property for the background-color is 'transparent' instead of 'none' if you want to pass a style sheet validator.

How do you make an element "flash" in jQuery - Stack Overflow

jquery
Rectangle 27 2

Sorry for the lack of information, I for some reason assummed that applying rotate in css3 would animate for me, dont know where a got that notion from!

Ive got a job converting a questionaire built in flash to a CSS3/jQuery site because the company wants to make their product available on mobile. The one thing i was having trouble with is the rotating animation of the sign in the bottom left hand corner of the screen. I found a way to use a separate class to store the animation and add it when instructed.

$("#signpost").animate({
    "left":48,
    "bottom":-16
});
$("#signpost").addClass("animaterotation");
#signpost {
    background: url("../imgs/signpost.png");
    background-size:cover ;
    width:213px ;
    height:232px ;
    position:absolute;
    left:-213px ;
    bottom:-4em ;
    z-index:999999 ;
    cursor:pointer ;
}
.animaterotation {
    -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         0.35s; 
    -webkit-animation-iteration-count:  1;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes rotate {
  from {
            transform-origin:0% 80%;
            -ms-transform-origin:0% 80%; /* IE 9 */
            -webkit-transform-origin:0% 80%; /* Safari and Chrome */

            transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg);
  }
  to { 
            transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
  }
}

here's a link to the original:

here's a link to what I've built:

+1, I like the signpost rotation :P

jquery - css3 webkit transform rotate not working - Stack Overflow

jquery css css3 transform rotatetransform
Rectangle 27 0

Using canvas alone will be restrictive. Canvas is basically BitmapData with a few Graphics class methods. If you want to see how you can do flash-like stuff without flash, you should take a look at jquery and css3 (see 2DTransform jquery plug-in).

I've been a flash dev for many years and when I decided to start playing with canvas and html5 I would just choose things I had created in flash and try to re-create them with javascript html css etc... you'll find that most of what your doing in flash can be done quickly using jquery css and on occasion canvas.

It might be good for you to see an example... maybe you could post a link to something you've done in flash and I'll point out the html5/javascript/canvas equivalents.

This answer most directly addresses my question, but there are a lot of good responses here...

Cool... again if you have something in flash that your wondering how to approach using html5/canvas/javascript let me know.

html - Advice for switching from Flash to - Stack Overflow

html flash actionscript-3 html5 canvas
Rectangle 27 0

I believe you can add transform: translateZ(0); to the element to get it hardware accelerated, which should remove the flash.

My understanding is that you are taking an element from the CPU rendering layer and moving it to the GPU rendering layer as you apply 3D transforms. As this transition occurs, you get that flash. By adding a 3D transform by default to the element, it lives in the GPU rendering layer (on supported devices / OSes).

Note for iOS you'll need to prefix that transform property name with -webkit-.

Thanks, Jasper. I tried this solution, but unfortunately it did not solve the problem. I've updated my original post after doing some more digging and I believe I have isolated the section of code that is causing problems.

CSS3 and jQuery Transition Flash on iOS - Stack Overflow

jquery ios css3
Rectangle 27 0

<style>
#masterContainer {
  perspective: 600px;
}

#masterContainer .video {
  transform: rotateY( 45deg );
}
</style>
<section class="container" id="masterContainer">
  <div class="video"></div>
</section>

jquery - Changing perspective of HTML5

jquery flash html5 css3 canvas
Rectangle 27 0

@roboguy222 You said you wanted to get rid of jQuery.

Nope. I don't want to use the UI plugin on top of jquery. The regular library is fine. Sorry for the confusion. Thank you! The prefixes did it.

@bjb568 why would you recommend not using either?

jquery - Using css3 animation and addClass to make a background flash ...

jquery css3 background css-transitions css-animations
Rectangle 27 0

Here's the solution using Greensock: http://jsfiddle.net/brian_griffin/zquLC/ I believe it does exactly what you asked for. Please note you have to include the first logo twice in order to make a perfect loop.

This can also be done using CSS3 animations, but Greensock is supported in older browsers.

<div id="container">
    <div class="logo" id="firstlogo">
        <img 1/>
        <img 2/>
        <img 3/>
        <img 1/>
    </div>
    <div class="logo" id="secondlogo">ditto</div>
    <div class="logo" id="thirdlogo">ditto</div>
</div>
#container {
    height:100px;
    overflow:hidden;
}
.logo {
    width:100px;
    height:400px;
    float:left;
    position:relative;
    top: -300px;
}
img {
    width:100px;
    height:100px;
    position:relative;
    display:block;
}
var spd = 1.5 //seconds
var tl = new TimelineMax({repeat:-1})
tl.to('firstlogo', spd, {top:"+=0px"})
tl.to('firstlogo', spd, {top:"+=100px"})
tl.to('firstlogo', spd, {top:"+=0px"})
tl.to('firstlogo', spd, {top:"+=100px"})
tl.to('firstlogo', spd, {top:"+=0px"})
tl.to('firstlogo', spd, {top:"+=100px"})

Wow, Brian - that looks great! Thanks so much. So, noob question: what's the drill; net suggested Greensock first, but you supplied functioning code that I can use a start point. Who should I tick?

I have no idea, I'm new here, too. Tick whoever comes after and offers a proper CSS3-only solution :)

lol - yes, i was thinking about responsiveness, but that would've seemed ungrateful! :-)

I think Brian earned the tick. Good work, and have a +1 from me.

jquery - ideas to animate several individual parts of a large graphic ...

jquery html5 flash css3 animation
Rectangle 27 0

Yes, this can definitely be done in HTML/JS. And you don't even need HTML5 or CSS3 for that.

I think the trickiest part will be the positioning of the part images, especially with different frames.

I don't think it is that difficult to position the parts on different places when selecting different frames: just wrap everything in a 'master' div with the frame name and position parts with CSS like .fastFrame .threePedals, etc. It only means a lot of CSS rules.

Yup. But it's not only the frame that changes positions. There are some other parts that you have to factor in as well, e.g. the wheels and the stem. I didn't say it's overly difficult, but I do think it's the trickiest part. Everything else should be rather straight forward and easy.

@Marcel: the whole thing is driven by an XML-based parts catalog, which references images for each part and also defines exactly how they fit together. All you'd need is some JS to take those pre-defined coordinates and plug them into the styles...

Can this Flash tool be done with JavaScript (jQuery)/HTML5/CSS3? - Sta...

javascript jquery html5 css3
Rectangle 27 0

Apparently, it's a known issue with webkit animations. A bit of googling came up with this...

body {
    -webkit-transform: translate3d(0, 0, 0);
}

I added that to the css in your example and tried it about 10 times and didn't get the flicker once, where I was able to consistently get it before.

Could you link to the bug report? It's something I've not heard of as yet, and I'd be intrigued to read more about it. =)

I just googled it - didn't see any official bug reports. The above code fixes what is obviously an issue though.

I just tried your method, well from the post you provided but it didn't work. Yet, adding it to :before, :after { -webkit-transform: translateZ(0); } stops the flash for me, incase anyone else comes across this and goes "It doesn't work!"

jquery - Chrome screen flash when applying a CSS3 animation (only the ...

jquery google-chrome css3 webkit css-transforms
Rectangle 27 0

Have a look at the Greensock animation platform (GSAP). It's a tween library which was originally developed for ActionScript and has now been ported to JavaScript. It's incredibly powerful with support for delays, staggers, repeats, loops, reverse etc., and has been, more or less, the industry standard for animation in Flash for the last 4 or 5 years.

The timeline functionality will probably be of particular interest to you as it makes choreographing the type of animation you've described above an absolute breeze. For example, it will allow you to group a collection of individual animations together and play them back, loop, repeat and reverse them as if they were a single animation.

Thanks net - I'll take a look now. Cheers.

jquery - ideas to animate several individual parts of a large graphic ...

jquery html5 flash css3 animation
Rectangle 27 0

I have seen this lots of times in older Chrome builds, but as of the last few weeks it has been fixed. I'm running Chrome 19, and don't see these flashes any more.

I think that it happens when a 3d transform is animated. By forcing a 3d translate as Archer has pointed out this is avoided, as the page is already rendered on the graphics card.

I was using Chrome 19 also, but I did see the flash. <br/>

jquery - Chrome screen flash when applying a CSS3 animation (only the ...

jquery google-chrome css3 webkit css-transforms
Rectangle 27 0

HTML, CSS, PHP, JQUERY are truly your best bet for developing for a wide range of devices. If the scope of devices is the main goal I would stay away from using HTML5 and CSS3. You still may run into problems using much jquery with IE7 below. Mobile browsers on the other hand are much more advanced or up to date with standards then desktop browsers. I would suggest creating two versions of your application. One dedicated to running on mobile devices and one for desktop browsers. It is a shame apple wouldn't support flash applications. If all you need is hoovers for interaction you won't even need jquery / but for the other it will be useful.

programming languages - What web development tools will allow a page t...

programming-languages interactive dynamic-websites user-interaction
Rectangle 27 0

Apparently, it's a known issue with webkit animations. A bit of googling came up with this...

body {
    -webkit-transform: translate3d(0, 0, 0);
}

I added that to the css in your example and tried it about 10 times and didn't get the flicker once, where I was able to consistently get it before.

Could you link to the bug report? It's something I've not heard of as yet, and I'd be intrigued to read more about it. =)

I just googled it - didn't see any official bug reports. The above code fixes what is obviously an issue though.

I just tried your method, well from the post you provided but it didn't work. Yet, adding it to :before, :after { -webkit-transform: translateZ(0); } stops the flash for me, incase anyone else comes across this and goes "It doesn't work!"

jquery - Chrome screen flash when applying a CSS3 animation (only the ...

jquery google-chrome css3 webkit css-transforms
Rectangle 27 0

Flash card - CSS3 JQuery [JavaScript]

some HTML5 magic

/*  jQuery ready function. Specify a function to execute when the DOM is fully loaded.  */
$(function(){
 $("#question").hide();
         $("button").click(function(){
             $("#f1_card").css({
                 "-webkit-transform":" rotateY(180deg)",
                 "-moz-transform":" rotateY(180deg)",
                 "-o-transform":" rotateY(180deg)",
                 "transform":" rotateY(180deg)",
                 "-webkit-box-shadow":" -5px 5px 5px #aaa",
                 "-moz-box-shadow":" -5px 5px 5px #aaa",
                 "box-shadow":" -5px 5px 5px #aaa"
             });
             $("#answer").hide();
             $("#question").show();
         });
         $("#question").click(function(){
             $("#answer").show();
             $("#question").hide();
             $("#f1_card").css({
                 "-webkit-transform":" ",
                 "-moz-transform":" ",
                 "-o-transform":" ",
                 "transform":" ",
                 "-webkit-box-shadow":" ",
                 "-moz-box-shadow":" ",
                 "box-shadow":" "
             });
         });
});
jQuery JavaScript
Rectangle 27 0

It's done through flash. If you right click on the menu you can see it. But It's possible to do somewhat similar with HTML/CSS/CSS3. Also JavaScript framework like jQuery will be helpful to you.

Do you have any idea how? Could using an animated gif work, or would there be a better way to replicate it? Thanks for the site. It has some cool stuff on there.

easiest way to do is using a GIF. Otherwise you will have to manually write the animation using jQuery or somewhat similar

jquery - How to draw random lines with CSS to replicate effect - Stack...

jquery html css html5 css3
Rectangle 27 0

jQuery (and javascript) do animations with CSS behind the scenes, so if CSS3 is off the table because it isn't cross browser, then it will be in jQuery as well. If you're asking if this effect can be replicated with CSS2 and javascript, CSS2 just doesn't have the complexity needed to achieve this. The only other ways that I can think of doing this without Flash/other plugins (like canvas, etc.) are just as cross-browser incompatible as CSS3.

javascript - Replicating a CSS3 Animation in JQuery - Stack Overflow

javascript jquery css3 animation
Rectangle 27 0

I have seen this lots of times in older Chrome builds, but as of the last few weeks it has been fixed. I'm running Chrome 19, and don't see these flashes any more.

I think that it happens when a 3d transform is animated. By forcing a 3d translate as Archer has pointed out this is avoided, as the page is already rendered on the graphics card.

I was using Chrome 19 also, but I did see the flash. <br/>

jquery - Chrome screen flash when applying a CSS3 animation (only the ...

jquery google-chrome css3 webkit css-transforms