css动画特效有哪些

CSS动画特效是指通过CSS样式表中的属性和值来实现网页元素动态变化的效果。下面我们一起来看一些常见的CSS动画特效。

/* 浮动动画 */.float-animation{
    animation: float 2s ease-in-out infinite;
}
@keyframes float {
0% {
    transform: translateY(0px);
}
50% {
    transform: translateY(-20px);
}
100% {
    transform: translateY(0px);
}
}
/* 缩放动画 */.scale-animation{
    animation: scale 1s ease-out infinite;
}
@keyframes scale {
0% {
    transform: scale(1);
}
50% {
    transform: scale(1.2);
}
100% {
    transform: scale(1);
}
}
/* 旋转动画 */.rotate-animation{
    animation: rotate 1s linear infinite;
}
@keyframes rotate {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
    

以上三种动画分别展示了浮动、缩放和旋转三种不同的视觉效果。利用CSS动画特效可以让网页更加生动有趣，为用户带来更好的体验。

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