Home / Questions / 36129
Accepted
hubman
Asked: 2020-11-27 07:52:22 +0800 CST 2020-11-27 07:52:22 +0800 CST

How to shake elements using CSS?

  • 772

I intend to move to the left for 1 second and to the right for 1 second, so that it looks like it is shaking, each movement about 3 times

this is my code but it doesn't do both movements it only does the first one

#formulario:hover{
   /*position: absolute;*/
  -moz-transition-property: background-color, color, left;
  -moz-transition-duration: 1s;
  -webkit-transition-property: background-color, color, left;
  -webkit-transition-duration: 1s;
  -o-transition-property: background-color, color, left;
  -o-transition-duration: 1s;
  background-color: #CEF6CE;
      left: -15px;
      right: -15px;
    position: relative;
}
html

2 Answers

  1. Best Answer

    I think the effect you're looking for is to shake the element for several seconds. You can do this with keyframes.

    #formulario{
  background-color: blue;
  height: 100px;
  width: 100px;
}

#formulario:hover {
  animation: shake 0.82s;
}

@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);
  }
}
    <form id="formulario"></form>

    Source: CSS-Tricks .

    If not, you can use the classes provided on this page: https://elrumordelaluz.github.io/csshake/ through which you have different effects to shake your elements.

    You would simply have to add the link to their css and use the classes they provide you in the elements you want to shake.

    Usage example:

    .formulario{
  height: 100px;
  width: 100px;
  background-color: blue;
}
    <link rel="stylesheet" type="text/css" href="https://csshake.surge.sh/csshake.min.css">
<form class="formulario shake"></form>
<form class="formulario shake-hard"></form>
<form class="formulario shake-horizontal"></form>
<form class="formulario shake-crazy"></form>

    • 7

  2. Possible solution in JavaScript would be to make a recursive timeOut that will carry out the pertinent modifications.
    Taking advantage of the fact that the CSS transform property is easily scriptable, something similar to this can be done.
    (If you don't want to use transform, you can use the same system by adding a different parse)

    	caja.onmouseover=function(event){shake(event.target);};
	
	function shake(elemento){
		var velocidad=32;
		var script=["translate(5px, 0px)","translate(-5px, 0px)","translate(5px, 0px)","translate(-5px, 0px)","translate(5px, 0px)"];
		script.push(""); // termina como empezó, sin transforms.
		var funcion= function(i){
			elemento.style.transform=script[i];
			i++;
			if (i<script.length)
				setTimeout(function(){funcion(i)},velocidad);
		};
		funcion(0);
	}
    	#caja {
		position:relative;
		width:100px;
		height:100px;
		background-color:blue;
	}
    <DIV id="caja"></DIV>

    The script and the speed could also be passed by value and make the function more generic... or even include the speed in the script to indicate different speeds between frames...
    As the "shake" effect is fast, I have not included a transition, but if you want smoothness just add elemento.style.transition=velocidad/1000+"s";after declaring the variable velocidad, but remember to remove it afterwards.

    • 3