css动画的名称

CSS动画是Web设计中非常重要的一部分，它可以打造出许多吸引人眼球的特效效果，使得网站看起来更加生动和有活力。这其中，不同的动画名称也代表着不同的效果和作用，下面我们来介绍一些常见的CSS动画名称。

1. Fade in/out（淡入淡出）.fade-in{
    opacity: 0;
    animation: fadeIn 1s ease-in forwards;
}
@keyframes fadeIn {
to {
     opacity: 1;
 }
}
2. Bounce（弹跳）@keyframes bounce{
0% {
    bottom: 0px;
}
50% {
    bottom: 15px;
}
100% {
    bottom: 0px;
}
}
.bounce-element{
    animation: bounce 1s infinite;
}
3. Zoom（缩放）@keyframes zoom {
from {
    transform: scale(1);
}
to {
    transform: scale(1.5);
}
}
.zoom-element{
    animation: zoom 1s alternate infinite;
}
4. Rotate（旋转）@keyframes rotate {
to {
    transform: rotate(360deg);
}
}
.rotate-element{
    animation: rotate linear infinite;
}
5. Shake（抖动）@keyframes shake {
0% {
     transform: translate(0, 0);
 }
10% {
     transform: translate(-10px, 0);
 }
20% {
     transform: translate(10px, 0);
 }
30% {
     transform: translate(-10px, 0);
 }
40% {
     transform: translate(10px, 0);
 }
50% {
     transform: translate(-10px, 0);
 }
60% {
     transform: translate(10px, 0);
 }
70% {
     transform: translate(-10px, 0);
 }
80% {
     transform: translate(10px, 0);
 }
90% {
     transform: translate(-10px, 0);
 }
100% {
     transform: translate(0, 0);
 }
}
.shake-element{
    animation: shake 1s infinite;
}
    

以上就是几种常见的CSS动画名称和代码示例，您可以根据自己需要来选择和运用。同时，CSS动画名称也是不断发展和演变的，未来我们还将看到更多的新型CSS动画效果出现，展现Web设计的最新潮流。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！