css3實現動畫勻速、反復、運行、呼吸燈效果、旋轉、上下懸浮移動、hover文字動效

/* 呼吸燈效果、勻速、反復 */

animation: shine 1s linear 0s infinite alternate;

@keyframes shine {
   0%{
        opacity: 1;
    }      
    100%{
        opacity: 0;
    }      
    
}

 

/* 旋轉效果、反復 */
animation: rotate 60s linear 0s infinite

@keyframes rotate {
   0%{
        transform: rotate(0)
    }      
    100%{
        transform: rotate(360deg);
    }      
    
}

/* 上下懸浮移動、反復 */
animation: float 2s linear 0s infinite;

@keyframes  float {
   0%,100%{
        transform: translateY(0);
    }      
    50%{
        transform: translateY(-146px);
    }      
    
}

 

/* hover文字動效 */
/*如a標簽在hover變色*/

a {
 color:blue; 
} 
a:hover {
 color: red 
} 
a {
 transition: color .4s,background-color .4s; 
}