css三大动画属性

CSS是网页设计中的重要语言之一，它可以实现多种样式效果，其中包括动画效果。CSS的三大动画属性是transition、animation和transform，下面我们来逐一了解它们的用法。

/* transition常用于鼠标悬浮时的过渡效果 */
div{
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 1s, height 1s, background-color 1s;
}
div:hover{
    width: 200px;
    height: 200px;
    background-color: green;
}

/* animation用于制作更丰富的动画效果 */
div{
    width: 100px;
    height: 100px;
    background-color: red;
    animation: change 2s ease-in-out infinite;
}
@keyframes change{
    0%{background-color: red;}
    50%{background-color: blue;}
    100%{background-color: yellow;}
}

/* transform用于实现元素的变换效果 */
div{
    width: 100px;
    height: 100px;
    background-color: red;
    transform: rotate(45deg);
} 

以上是三种动画属性的基本用法，使用它们可以让网页更加生动有趣。同时，需要注意合理使用动画效果，过多的动画或者过于复杂的动画会影响用户体验，甚至会导致网页加载速度过慢。