hover animation css code example

Example 1: css start animation on hover

button{
  animation: rotate360 1.2s linear infinite;  /* animation set */
  animation-play-state: paused;               /* put paused */
}
button:hover{
  animation-play-state: running;              /* trigger on hover */
}
@keyframes rotate360 {                        /* keyframes of animation */
  to { transform: rotate(360deg); }           
}

Example 2: css hover animation

.YOURHTMLCONTENT i {
    height: auto;
    float: left;
    color: #fff;
    font-size: 55px;
    margin: 30px 30px 30px 30px;
    transition: 0.8s;
    transition-property: color, transform;
}

.YOURHTMLCONTENT i:hover {
    color: #FF5733;
    transform: scale(1.3);
}

Example 3: css hover

.a:hover{background-color: black;}

Example 4: css transition on hover

/* Simple CSS color transition effect on selector */

div {
	color: white;
  	background-color: black; 
}

div:hover {
	background-color: red;
}


/* Additional transition effects on selector */

div {
	background-color: black;
  	color: white;
  	height: 100px;
  	transition: width 1.5s, height 3s;
  	width: 100px;
  	
}

div:hover {
	background-color: red;
  	height: 300px;	
  	width: 150px;
}

Example 5: learn css animations transform

Read this comprehensive article about CSS animation transform property. 
It also has many useful examples that help you in best way.

https://medium.com/swlh/learn-css-transform-animation-zero-to-hero-6a2a643bd56b

Example 6: css hover animation

a:hover {
  color: #252525;
}