css动画简单

CSS动画是一种在Web开发中用于制作动态效果的技术。通过CSS代码为HTML元素添加动画效果，从而提升页面的交互性和设计感。本文将介绍一些CSS动画的基础知识以及常用的动画效果。

/* CSS动画基础 *//* 动画属性 */animation-name: ;
    animation-duration: ;
    animation-timing-function: ;
    animation-delay: ;
    animation-iteration-count: ;
    animation-direction: ;
    animation-fill-mode: ;
/* 示例 *//* 动态改变宽度 */.box{
    width: 100px;
    height: 50px;
    background: red;
    animation: changeWidth 1s ease-in-out 0s infinite alternate;
}
@keyframes changeWidth{
0%{
    width: 100px;
}
100%{
    width: 200px;
}
}
/* 常用动画效果 *//* 1. 淡入淡出 */.fade{
    opacity: 0;
    animation: fadeInOut 2s ease-in-out infinite alternate;
}
@keyframes fadeInOut{
0%{
    opacity: 0;
}
50%{
    opacity: 1;
}
100%{
    opacity: 0;
}
}
/* 2. 旋转 */.rotate{
    width: 100px;
    height: 100px;
    background: blue;
    animation: rotate 2s linear infinite;
}
@keyframes rotate{
0%{
    transform: rotate(0deg);
}
100%{
    transform: rotate(360deg);
}
}
/* 3. 移动 */.move{
    width: 100px;
    height: 100px;
    background: green;
    animation: move 2s ease-in-out infinite alternate;
}
@keyframes move{
0%{
    transform: translateX(0);
}
50%{
    transform: translateX(100px);
}
100%{
    transform: translateX(0);
}
}
    

通过CSS动画，我们可以制作出各种有趣的动态效果，从而为页面增添互动性和视觉上的吸引力。当然，需要注意的是CSS动画在实际使用中也有较大的局限性，比如兼容性和性能等问题。因此，需要结合具体的实际需求和技术环境来选择合适的应用方式。

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