CSS Wiggle/Shake Effect

Animate.css shake effect not working every time

This works everytime :-D

function shakeButton($button) {    console.log('Shaking button')    $button.removeClass("animated shake");    setTimeout(      function() {        $button.addClass("animated shake");      },      25    );  }
  $('button').click(function() {    shakeButton($(this));  });

<!-- Never mind, Just some Dummy html... -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><h4>Never mind this, Just some Dummy Results</h4><h3>Check out the JS instead</h3><button>Button 1</button><button>Button 2</button><button>Button 3</button>

SVG shake animation on hover

The issue is with your #ellipse style.

#ellipse {
    position: absolute;
    top: 120px;
    z-index: -99; /* remove this, it is not doing anything useful. */ 
    animation: 3s linear 0s slide 1;
    left: -200px;
}

---

the issue was, hover was not getting triggered at all, as it was behind container element due to negative z-index. This negative z index is not useful at all, unless you are planning to put text above the image, which I do not see in your site.

How to avoid shake effect on hover when transition and transform are combined?

.card-list {  width: 50vw;  margin: 60px auto;  display: grid;  grid-template-columns: 1fr;  grid-gap: 60px;  text-align: center;}
.card-container {  display: flex;  flex-direction: column;  background-color: #95dada;  border: 1px solid grey;  border-radius: 5px;  padding: 25px;  cursor: pointer;  -moz-osx-font-smoothing: grayscale;  backface-visibility: hidden;  transform: scale(-1.05);  transition: transform 0.5s ease-in-out;}
.card-list:hover .card-container {  transform: scale(1.05);}

 <div class="card-list">      <div class="card-container">        <h1>          Hello World        </h1>      </div>    </div>

How to create shake animation in Angular 6?

This is a little bit tricky, if you want to apply the animation to several elements within one component in Angular 6:

app.component.html:

<p [@shakeit]="this.states['state1']" (click)="shakeMe('state1')" (@shakeit.done)="shakeEnd('state1', $event)">Click me</p>

<p [@shakeit]="this.states['state2']" (click)="shakeMe('state2')" (@shakeit.done)="shakeEnd('state2', $event)">Click me</p>

app.component.ts:

import { Component } from '@angular/core';
import { trigger,state,style,transition,animate,keyframes } from    '@angular/animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    trigger('shakeit', [
        state('shakestart', style({
            transform: 'scale(1)',
        })),
        state('shakeend', style({
            transform: 'scale(1)',
        })),
        transition('shakestart => shakeend', animate('1000ms ease-in',     keyframes([
          style({transform: 'translate3d(-1px, 0, 0)', offset: 0.1}),
          style({transform: 'translate3d(2px, 0, 0)', offset: 0.2}),
          style({transform: 'translate3d(-4px, 0, 0)', offset: 0.3}),
          style({transform: 'translate3d(4px, 0, 0)', offset: 0.4}),
          style({transform: 'translate3d(-4px, 0, 0)', offset: 0.5}),
          style({transform: 'translate3d(4px, 0, 0)', offset: 0.6}),
          style({transform: 'translate3d(-4px, 0, 0)', offset: 0.7}),
          style({transform: 'translate3d(2px, 0, 0)', offset: 0.8}),
          style({transform: 'translate3d(-1px, 0, 0)', offset: 0.9}),
        ]))),
  ])]
})
export class AppComponent  {
  states = {};

  constructor() {
    this.states['state1'] = 'shakestart';
    this.states['state2'] = 'shakestart';
  }

  shakeMe(stateVar: string) {
        this.states[stateVar] = (this.states[stateVar] === 'shakestart' ? 'shakeend' : 'shakestart');
  }

  shakeEnd(stateVar: string, event) {
    this.states[stateVar] = 'shakeend';
  }
}

You see, I use a dictionary for the animation states of the different html elements. Therefore, it is a little bit more work and overhead if you want to use Angular 6.
shakeMe method starts the animation.

However, I would recommend to just use CSS keyframes because it is easier to realize for several html elements. The following example does the same animation. You just have to apply the correct css class to the html element.

.shakeit:hover {    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;    transform: translate3d(0, 0, 0);    backface-visibility: hidden;    perspective: 1000px;}
@keyframes shake {    10%, 90% {        transform: translate3d(-1px, 0, 0);    }
    20%, 80% {        transform: translate3d(2px, 0, 0);    }
    30%, 50%, 70% {        transform: translate3d(-4px, 0, 0);    }
    40%, 60% {        transform: translate3d(4px, 0, 0);    }}

<h2 class="shakeit">Hover me</h2>

How to give wiggle animation effect with fixed position?

You can set transform-origin property to bottom.

.el {  margin: 30px 50px;  width: 0;  height: 0;  border-style: solid;  border-width: 150px 50px 0 50px;  border-color: #007bff transparent transparent transparent;  animation: wiggle infinite 3s alternate;  transform-origin: bottom;}
@keyframes wiggle {  0% {transform: rotate(0deg);}  25% {transform: rotate(-3deg);}  50% {transform: rotate(5deg);}  75% {transform: rotate(-1deg);}  100% {transform: rotate(2deg);}}

<div class="el"></div>

CSS Animations Onclick

I think it should be

document.getElementById("s1_imgB").className += " shake";

Creating a small wiggle from a shake on a button

You could check their animations from here https://elrumordelaluz.github.io/csshake/css/csshake.css to get a clue.

---

Related Topics