Sacudir en CSS3

En este Tutoriales En Linea les traemos este truco de efecto que permite efectos visuales en transición y animaciones de sacudir - shake en CSS3.
Background:animation

<style>
  main {
    width: 100%; height: 229px;
    display: flex;
  }
  main > span {
    background: #b4a078;
    color: white;
    margin: auto;
    padding: .3em 1em .5em;
    border-radius: 3px;
    box-shadow: 0 0 .5em #b4a078;
    animation: shake-baidu 2s ease 0s infinite;
    animation-play-state: paused;
  }
  .main:hover > span,
  .main > span:hover {
    animation-play-state: running;
  }
  @keyframes shake-baidu {
    from    { transform: rotate(0deg); }
    4%      { transform: rotate(5deg); }
    12.5%   { transform: rotate(-5deg); }
    21%     { transform: rotate(5deg); }
    29%     { transform: rotate(-5deg); }
    37.5%   { transform: rotate(5deg); }
    46%     { transform: rotate(-5deg); }
    50%,to  { transform: rotate(0deg); }
  }
</style>

<main class="main">
    <span>¡Necesitas saberlo!</span>
</main>
Ver resultado


<a onclick=Tutoriales En Linea" class='avatar avatar-64 photo' height='64' width='64'>
  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2019-03-11
  • Categorias: Diseño Web CSS3 html5 WebSite Nomina Tutorial



Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!