动画视觉效果模式

1.fade-in {
2  opacity: 0;
3  animation: fadeIn 0.5s ease forwards;
4}
5
6@keyframes fadeIn {
7  to { opacity: 1; }
8}

1.animated-gradient {
2  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
3  background-size: 400% 400%;
4  animation: gradientShift 10s ease infinite;
5}
6
7@keyframes gradientShift {
8  0% { background-position: 0% 50%; }
9  50% { background-position: 100% 50%; }
10  100% { background-position: 0% 50%; }
11}