Как сделать эффект колокольчика?

#css3

На примере этой вёрстки , как сделать эффект колокольчика , что бы при событие hover
блок (ротате) покачивался ?



section{
  display:table;
  margin:30px auto;
}

div{
  width:100px;
  height:100px;
  display:block;
  position:relative;
  margin:5px;
  text-align:center;
  line-height:100px;
  font-size:20px;
  display:inline-block;
}
div:before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  background:orange;
  transform:rotate(45deg);
  position:absolute;
  top:0;left:0;
  z-index:-1;
  transition:all .3s;
  border-radius:8px;
}
div a{
  text-decoration:none;
  color:#fefefe;
}
div:hover:before{
  background:red;
  box-shadow:1px 1px 0 #000000;
  animation:lr .2s infinite;
}
@-webkit-keyframes lr{
  from{
     
  }
  to{
    
  }
}

 
 
    Главная
  
 
 
    Гостевая
  
 
 
    Форум
  





Примерно такое можно добиться на : закрепленном листе иголкой за один угол , и если
его качнуть пальцем то он будет качаться 
    

Ответы

Ответ 1

section{
  display:table;
  margin:30px auto;
}

div{
  width:100px;
  height:100px;
  display:block;
  position:relative;
  margin:5px;
  text-align:center;
  line-height:100px;
  font-size:20px;
  display:inline-block;
}
div:before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  background:orange;
  transform:rotate(45deg);
  position:absolute;
  top:0;left:0;
  z-index:-1;
  transition:all .3s;
  border-radius:8px;
}
div a{
  text-decoration:none;
  color:#fefefe;
}
div:hover:before{
  background:red;
  box-shadow:1px 1px 0 #000000;
  animation:lr .2s infinite;
}
@-webkit-keyframes lr{
  from{
     transform:rotate(44deg);
    margin-left: 1px;
  }
  to{
    transform:rotate(46deg);
    margin-left: -1px;
  }
}

 
 
    Главная
  
 
 
    Гостевая
  
 
 
    Форум
  



Ответ 2

Можно использовать вместо from и to процентные обозначения, интерполируя кадры не
между двумя состояниями, а между четырьмя. Например:


0%: середина
25%: крайнее левое
75% крайнее правое


+50% — 25% чтобы вернуться к середине, 25% чтобы отклониться дальше

100%: середина (вернулись в начальное положение)


Кривую анимации надо будет подбирать аккуратно (симметричную по четвертям), чтобы
резкий переход 100% -> 0% не был заметен. Линейная, по умолчанию, выглядит сносно.
Скорее всего, любая другая будет выглядеть странно.



section{
  display:table;
  margin:30px auto;
}

div{
  width:100px;
  height:100px;
  display:block;
  position:relative;
  margin:5px;
  text-align:center;
  line-height:100px;
  font-size:20px;
  display:inline-block;
}
div:before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  background:orange;
  transform:rotate(45deg);
  position:absolute;
  top:0;left:0;
  z-index:-1;
  transition:all .8s;
  border-radius:8px;
}
div a{
  text-decoration:none;
  color:#fefefe;
}
div:hover:before{
  background:red;
  box-shadow:1px 1px 0 #000000;
  animation:lr .2s infinite;
}
@-webkit-keyframes lr{
  0% {
    transform:rotate(45deg);
  }
  25% {
    transform:rotate(50deg);
  }
  75% {
    transform:rotate(40deg);
  }
  100% {
    transform:rotate(45deg);
  }
}

 
 
    Главная
  
 
 
    Гостевая
  
 
 
    Форум