CSS3不同的自定义缓动效果适用于不同的属性

6 浏览
0 Comments

CSS3不同的自定义缓动效果适用于不同的属性

我已经为一个特定的div设置了一个动画。

.Animation {

-webkit-animation-fill-mode: both; /* 还有 -moz, -ms 等 */

animation-fill-mode: both;

-webkit-animation-delay: 1s;

animation-delay: 1s;

-webkit-animation-duration: 2s;

animation-duration: 2s;

}

@-webkit-keyframes scaleAnimation /* 还有 -moz, -ms 等 */

{

0% {

opacity: 0;

-webkit-transform: scale(2);

}

100% {

opacity: 1;

-webkit-transform: scale(1);

}

}

.ScaleAnimation {

-webkit-animation-name: scaleAnimation; /* 还有 -moz, -ms 等 */

animation-name: scaleAnimation;

}

但是我想为不同的opacity添加一个自定义的缓动函数（cubic bezier），为transform添加另一个自定义的缓动函数。该如何实现呢？

以下方法不起作用：

transition: opacity 1s ease-in-out;

transition: scale 1s ease-in-out;

所以使用自定义的缓动函数 cubic-bezier(0.555, -0.130, 0.270, 1.075) 肯定也不会起作用。

有什么想法吗？ 🙂

0

1 答案

0 Comments

CSS3中为不同的属性设置不同的自定义缓动效果的问题的解决方法是通过使用动画关键帧的方法，分别创建两个关键帧动画，一个用于缩放(scale)，另一个用于透明度(opacity)，然后通过在元素的动画设置中用逗号分隔它们。缓动效果的属性是animation-timing-function，对于基于Webkit的浏览器，可以使用-webkit-animation-timing-function来指定。可以使用以下代码片段进行设置：

div {
    width: 120px; 
    height: 120px;
    background-color: red;
    display: inline-block;
}
div.d1 {
    -webkit-animation-fill-mode: both;
    -webkit-animation-delay: 2s, 2s;
    -webkit-animation-duration: 2s, 2s;
    -webkit-animation-name: scaleAnimation, opacityAnimation;
    -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1), ease-in;
}
@-webkit-keyframes scaleAnimation { 
    0% {
        -webkit-transform: scale(2);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
@-webkit-keyframes opacityAnimation { 
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


D1

这样就可以为不同的属性设置不同的自定义缓动效果了。

参考链接：[http://jsfiddle.net/abhitalks/3y7pcd1t/1/](http://jsfiddle.net/abhitalks/3y7pcd1t/1/)

0