Best Method for Creating a Pure HTML5 + CSS3 Animated "Sonar Wave" Icon

Best method for creating a pure HTML5 + CSS3 animated sonar wave icon.

Status Update:

Firefox v14.0.1 fails to render this Answer (and jsFiddle's in messages) correctly. Use Firefox version prior to v14.0.1 or stable v15.0

---

Looking at your jsFiddle, I can see that Chrome is enlarging the original font without resizing it.

My goal was to include CSS only method to scale the Font Size, but I could not do that in pure CSS. Perhaps somebody else can.

My method then took a different approach. That said, I changed all the font sizes in your example so they are really large. Then I placed all the span tags in a wrapper div and made that really small.

The end result is a HD Version of your example that works well in Chrome. No more pixelated edges to see on the font.

Currently, the CSS3 Animations causes slowdown in stable build Firefox v13 when 2 or more examples are on the webpage. Chrome does not have this problem and can display all of them with no slowdown!

---

Here are my jsFiddles that includes 10 CSS3 style examples:

jsFiddle for Firefox (just 1 example is enabled).


jsFiddle for Chrome (all 10 examples are enabled).

Reminder: The Chrome jsFiddle will cause CPU Spike in Firefox since Firefox chokes on CSS3 Animations that are too intensive. Perchance next Firefox update fixes that bug.

---

Edit: For a different easing flavor, you can use any cubic-bezier. There are many Online Easing Generators that will supply a preset or custom made value such as this generator HERE. Just select an easing preset and hit the Left Button to view it. Then if you like it, copy only the cubic-bezier and use it like so:

.pulse{
    -webkit-animation: pulsate 1.600s infinite cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -moz-animation: pulsate 1.600s infinite cubic-bezier(0.190, 1.000, 0.220, 1.000);
}

Just change the 1.600s duration to what you your using or adjust as required.

Single Example: jsFiddle

Glowing right angle quote animation with CSS3 and/or Javascript

For the fun of it, here is a method using pure css. It has very limited support for browsers.

.glowquote {
    background: -webkit-linear-gradient(left, black 0%, green 40%, green 60%, black 100%);
    background-size: auto 50%;

    padding: 0 100px;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    -webkit-animation: gradient-animation infinite 1s linear;
}

http://jsfiddle.net/grc4/uF8H2/3/

Edit: The jsfiddle now partly works in firefox. The gradient animation works correctly, and the only thing that does't work is the text clipping (-moz-background-clip:text doesn't exist). This could be solved by using an image mask over the top of the background.

CSS3 animation, translate to position

I'm not an expert in CSS3 transforms, but I think translate is relative to the element's original position.

One way I can see to achieve what you want with CSS would be to position the element absolutely, and use a CSS3 transition to change its left and top properties.

Here is a Fiddle: http://jsfiddle.net/nSa9s/2/

HTML:

<div class="box"></div>

CSS:

.box {
    position: absolute;
    background: #ff0000;
    left: 400px;
    top: 200px;
    width: 100px;
    height: 100px;
    -webkit-transition: all 1.0s linear;
    -moz-transition: all 1.0s linear;
    -o-transition: all 1.0s linear;
    -ms-transition: all 1.0s linear;    
    transition: all 1.0s linear;
}
.box.move {
    left: 200px;
    top: 100px;
}

jQuery:

$(document).ready(function() {
    $('.box').on('click', function() {
        $(this).addClass('move');
    });
});

The purpose of the JS is to add the move class to the element when it is clicked.

---

Related Topics