常用的CSS动画效果

一、文字颜色渐变效果

方式一：

.headClass{
        background-image: -webkit-linear-gradient(left, #0ee5ff, #f4ab20 50%, #0ee5ff 50%, #f4ab20 100%, #0ee5ff);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-background-size: 200% 100%;
        -webkit-animation: masked-animation 3s infinite linear;
    }

@-webkit-keyframes masked-animation {
    0%  { background-position: 0 0;}
    100% { background-position: -100% 0;}
}

二、上下缓慢移动效果

//动效样式
@keyframes move{
  from{transform:translate(0,0)}
  to{transform:translate(0,5px)}
}

样式中添加动效：

animation: move 0.8s ease-in-out 1s infinite alternate;

三、旋转效果

 
@keyframes rotate {
  0% {
    transform: translate(-50%,-50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%,-50%) rotate(360deg);
  }
}
 
animation: rotate 3s linear infinite;

四、动画延迟效果

animation-delay: 1s;
-webkit-animation-delay: 1s; /* Safari 和 Chrome */