css动画有哪些效果

CSS动画是非常常用的一种技术，可以让网页在展示上增加更多的动态效果，提高用户的使用体验。那么CSS动画都有哪些效果呢？下面我们一一介绍。

.transition{
    transition: all .3s ease;
}

1. 过渡效果

过渡效果是指元素在两个状态间的平滑过渡，可以实现一些简单的动态效果，如鼠标悬停时改变颜色、大小等。通过CSS3的transition属性可以实现过渡效果，下面的代码可以让元素所有属性在0.3秒内平滑过渡。

.animation{
    animation: test 2s linear infinite;
}
@keyframes test {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}

2. 关键帧动画

关键帧动画是指动画被分成关键帧，然后系统会自动计算出每两个关键帧间的中间状态，从而实现动画。通过CSS3的animation属性可以实现关键帧动画，下面的代码能让元素在2秒内无限旋转。

.transform{
    transform: rotateY(60deg);
}

3. 变形效果

变形效果是指利用CSS3的transform属性改变元素的形态和空间位置，可以实现非常炫酷的动态效果。下面的代码可以让元素绕Y轴旋转60度。

.animation{
    transition: transform 0.5s ease;
}
:hover .animation{
    transform: scale(1.2);
}

4. 缩放效果

缩放效果是指改变元素的大小，可以实现一些简单的动态效果，如鼠标悬停时放大图片。通过CSS3的transform属性中的scale函数可以实现缩放效果，下面的代码可以实现鼠标悬停时元素放大1.2倍。

.animation{
    transition: background-color 0.5s ease;
}
:hover .animation{
    background-color: red;
}
    

5. 颜色渐变效果

颜色渐变效果是指改变元素的颜色，可以实现更加鲜明的动态效果，如鼠标悬停时改变背景色。通过CSS3的transition属性可以实现颜色渐变效果，下面的代码可以实现鼠标悬停时元素背景色变成红色。

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