Comments on: “Shake” CSS Keyframe Animation

By: Caliper

Caliper — Sun, 03 Apr 2022 13:08:05 +0000

Hey want it to be shaking automatically the page finished loading

By: Carrie

Carrie — Tue, 16 Jun 2020 17:41:17 +0000

This is fantastic! Can you tell me what I might add to the CSS if the image is below the fold, and I want it to shake when they scroll down to that image? Otherwise it shakes when nobody can see it.

I wanted to use the shiver to indicate something is clickable.

By: Read In Brief

Read In Brief — Tue, 05 May 2020 09:31:39 +0000

An extremely amazing keyframe animation.
Keep sharing

By: Ajay Sharma

Ajay Sharma — Mon, 31 Dec 2018 14:08:58 +0000

I want to show svg symbols in Meta title and Description in Google Search Result. Can i use utf-8 charset or need iso any other charset format?

By: David

David — Wed, 25 Jul 2018 15:02:52 +0000

In reply to Prad. I've had good luck with SnapSVG as well, for non-CSS animation

By: Sarah Drasner

Sarah Drasner — Wed, 25 Jul 2018 14:46:52 +0000

In reply to Prad. If you need to support IE, you can put the animation on a div that wraps it or the SVG tag itself (like you see in this pen) The SVG element is still an HTML element so it can still be animated in that browser. If you want to animate inside the SVG DOM for older browsers, GreenSock is your best bet- works back to IE9.

By: Sarah Drasner

Sarah Drasner — Wed, 25 Jul 2018 14:44:42 +0000

In reply to Merlin. They are used for hardware acceleration

By: David

David — Tue, 24 Jul 2018 23:29:36 +0000

In reply to Prad.

Not of you are forced to care about IE11 tho :(
https://dev.windows.com/en-us/microsoft-edge/platform/status/csstransitionsanimationsforsvgelements

By: Geoff Graham

Geoff Graham — Mon, 02 Jul 2018 05:46:01 +0000

In reply to Roland Kaiser. Hey Roland! I'm not familiar with PrestaShop personally, but if they provide you with access to edit CSS and you have the class name for the buttons, then you should be good to go to apply the animation. :)

By: Roland Kaiser

Roland Kaiser — Sun, 01 Jul 2018 11:07:30 +0000

Can I use this also at a presta shop? How can I animate my buttons there?

By: lukejpreston

lukejpreston — Fri, 15 Jun 2018 07:43:29 +0000

In reply to Pranab. I don't think there is one, this seems to behave the same

.shake:hover {
    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake {
    10%, 90% {
        transform: translateX(-1px);
    }
    20%, 80% {
        transform: translateX(2px);
    }
    30%, 50%, 70% {
        transform: translateX(-4px);
    }
    40%, 60% {
        transform: translateX(4px);
    }
}

By: soni103101

soni103101 — Tue, 22 May 2018 07:07:28 +0000

Does it take a shot at svgs? I might want to utilize the movement for svg symbols like on this one https://www.movingsolutions.in

By: LukeZzz

LukeZzz — Fri, 27 Oct 2017 09:03:36 +0000

In reply to fardin. The thing goes skrrrrrra

By: Pranab

Pranab — Fri, 23 Dec 2016 09:58:14 +0000

if i use only translateX instead of translate3d and remove perspective..then it works fine..
so, what’s the advantage here to use translate3d?

By: 2srenu

2srenu — Thu, 24 Nov 2016 10:30:54 +0000

In reply to fardin. Spectacular Mountain