[分享]css动画分为几种

在网页界面设计中，CSS动画是实现美观、生动、互动效果的重要组成部分。CSS动画可以分为以下几种类型。1. 基于关键帧/ 定义关键帧 / keyframes move { 0 {left: 0px;}...

在网页界面设计中，CSS动画是实现美观、生动、互动效果的重要组成部分。CSS动画可以分为以下几种类型。

1. 基于关键帧

/* 定义关键帧 */
@keyframes move {
    0% {left: 0px;}
    100% {left: 200px;}  
}

/* 使用关键帧 */
#box {
    animation: move 1s ease-in-out infinite alternate;
} 

基于关键帧的CSS动画，是根据在不同时间点的状态变化进行设计的。通过@keyframes规则定义关键帧状态，并通过动画属性animation来调用关键帧。

2. 基于过渡

/* 过渡默认效果 */
#box {
    transition: all .5s;
}

/* 鼠标悬停事件 */
#box:hover {
    transform: scale(1.2);
    filter: hue-rotate(180deg);
} 

基于过渡的CSS动画，是通过将变化过程逐渐过渡到变化后的状态。通过transition属性来设置过渡效果。

3. 基于变换

/* 变形默认效果 */
#box {
    transform: rotate(45deg);
}

/* 鼠标悬停事件 */
#box:hover {
    transform: translate(50px, 50px);
} 

基于变换的CSS动画，是通过对元素执行变形操作来产生动画效果。使用transform属性来改变元素的大小、旋转、平移、斜切等。

4. 基于过滤器

/* 过滤默认效果 */
#box {
    filter: grayscale(100%);
}

/* 鼠标悬停事件 */
#box:hover {
    filter: invert(100%);
} 

基于过滤器的CSS动画，是通过在元素上应用滤镜效果来产生动画效果。使用filter属性来改变元素的颜色、模糊度等。

5. 基于混合模式

/* 混合模式默认效果 */
#box1 {
    background-color: white;
}
#box2 {
    background-color: black;
    mix-blend-mode: lighten;
} 

基于混合模式的CSS动画，是通过叠加两个或多个不同的元素，并在其交集处产生动态效果。使用mix-blend-mode属性来设置元素之间的混合模式。

以上就是CSS动画的几种类型，根据实际需求选择合适的动画类型可以达到更好的动画效果。