打开代码片段,先在webview模式中查看动画(是正确的),再切换到skyline模式中,动画的贝塞尔曲线是错误的。
也可以将下面代码新建index.html打开查看浏览器中的表现(是和小程序webview模式一致,以此证实skyline模式渲染的是错误的)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹跳动画</title>
<style>
.container {
padding: 100px;
text-align: center;
}
.bounce-element {
width: 60px;
height: 60px;
background: #3498db;
border-radius: 8px;
margin: 0 auto;
}
.animate-bounce {
animation: bounce 1s infinite;
transform-origin: center bottom;
}
@keyframes bounce {
0%, 100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
</style>
</head>
<body>
<div class="container">
<div class="bounce-element animate-bounce"></div>
</div>
</body>
</html>
效果预览: