.main {
  padding: 20px;
  margin: 20px;
  background-color: #ddeeaa;

}

.main:hover {
  /* Запустите анимацию встряхивания и сделайте так, чтобы анимация длилась 0,5 секунды */
   background: linear-gradient(-90deg, rgba(24,187,156,1), MistyRose, GreenYellow, rgba(106,57,175,1), green, blue, violet, orange, Magenta, Chocolate, Bisque, rgba(187,24,148,1), rgba(115,53,134,1)) ;
   background-size:500% 500%;
   animation:
   gradient 30s ease infinite,
   shake 0.1s;

  // animation: shake 0.1s;
}

    

  /* Когда анимация будет закончена, начните снова */
 // animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;

    }
    
       25% {
        background-position: 25% 25%;
    
    }
    
    
    50% {
        background-position: 100% 50%;

    }
    
       75% {
        background-position: 75% 75%;

    }
    
    
    100% {
        background-position: 0% 50%;
    
    }
}




.ramka { border: solid 2px green; margin: 30px; padding: 10px; display: inline-block; background-color: #cccccc;
border-radius: 15px;	opacity: 90%; 
    }

.ramka:hover {	
            
  background-color: white;
  border: solid 3px blue;
border-radius: 5px;
opacity: 100%;

}

.ramka2 { border: solid 2px green; margin: 10px; padding: 10px; background-color: #cccccc;  display: inline-block;
border-radius: 15px;	opacity: 90%; 
width: 40%;
    }

.ramka2:hover {	
           
  background-color: white;
  border: solid 3px blue;
border-radius: 5px;
opacity: 100%;

}

.ramka3 { border: solid 2px green; margin: 10px; padding: 10px; background-color: #b6fcb6;  display: inline-block;
border-radius: 15px;	opacity: 90%;
width: 40%;
    }

.ramka3:hover {	
           
  background-color: grey;
  border: solid 3px blue;
border-radius: 5px;
opacity: 100%;

}