首页前端开发CSScss动画的名称

css动画的名称

时间2023-09-07 23:26:02发布访客分类CSS浏览628
导读:CSS动画是Web设计中非常重要的一部分,它可以打造出许多吸引人眼球的特效效果,使得网站看起来更加生动和有活力。这其中,不同的动画名称也代表着不同的效果和作用,下面我们来介绍一些常见的CSS动画名称。1. Fade in/out(淡入淡出)...

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核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: css动画的名称
本文地址: https://pptw.com/jishu/432618.html
mysql如何存下划线文本 mysql如何存储长数据

游客 回复需填写必要信息