CSS Animations Cheat Sheet.md

Basic transition

HTML

<div></div>

CSS

div{
  background-color:orange;
  width:100px;
  height:100px;
  transition-duration:1000ms;
  
}

div:hover{
  background-color:blue;
  
}

CSS multiple transition properties

div{
  background-color:orange;
  width:100px;
  height:100px;
  transition-duration:1000ms;
  transition-property:background-color,transform;
}

div:hover{
  background-color:blue;
  transform:rotate(45deg);
}

Basic Keyframe Example

div{
  background-color:orange;
  width:100px;
  height:100px;
  animation-name: zoom;
  animation-duration: 2s;
//animation-fill-mode:forwards;   stops jump to beginning

}

@keyframes zoom{
  from{transform: translateX(0)}
  to{transform: translateX(400px)}
}

Shake

div{
  background-color:orange;
  width:100px;
  height:100px;

 

}

div:hover{
   animation: shake 0.4s infinite; 
}

@keyframes shake { 
            0% { 
                transform: translateX(0px) rotate(0deg); 
            } 
  
            20% { 
                transform: translateX(-4px) rotate(-4deg); 
            } 
  
            40% { 
                transform: translateX(-2px) rotate(-2deg); 
            } 
  
            60% { 
                transform: translateX(4px) rotate(4deg); 
            } 
  
            80% { 
                transform: translateX(2px) rotate(2deg); 
            } 
  
            100% { 
                transform: translateX(0px) rotate(0deg); 
            } 
        }