使用JavaScript将webkit-keyframes设置为/ to参数,可以通过以下步骤实现:
@keyframes my-animation {
0% {
opacity: 0;
transform: translateY(100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
const style = document.createElement('style');
style.type = 'text/css';
document.head.appendChild(style);
const sheet = style.sheet;
const rule = `@keyframes my-animation {
0% {
opacity: 0;
transform: translateY(100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}`;
sheet.insertRule(rule, 0);
const element = document.querySelector('#my-element');
element.style.animation = 'my-animation 1s ease-in-out';
在这个例子中,我们创建了一个名为my-animation的动画,并将其应用到id为my-element的元素上。动画的持续时间为1秒,并使用ease-in-out缓动函数。
请注意,这个例子中的代码是使用JavaScript编写的,并且没有使用webkit-keyframes参数。这是因为@keyframes规则已经包含了动画的关键帧,并且在所有现代浏览器中都受支持。如果您需要使用webkit-keyframes,请确保您的代码适用于旧版本的WebKit浏览器。
今天来说下CSS3动画,目标是让一个方块做抛物线运动。主要用到的CSS3属性有animation,transform,@keyframes,transition等。
----
Animation版-0
我们先建立一个HTML文件,test.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="animation.css"/>
</head>
<body>
领取专属 10元无门槛券
手把手带您无忧上云